Going mobile with TwentyTen

CMS & WordPress
1

I have a number of websites built with a TwentyTen child theme that I’d like to make mobile for smartphones. At this time I’m not interested in making them responsive for tablets. Just mobile for smartphones.

The sites are fairly extensive so I guess I need to scale them down and only make certain pages mobile designed and ditch the rest. So that leads me to a few questions:

  1. is it possible to create a mobile site that only has a small percentage of pages of the master site?

  2. it seems the most popular plugin to make a site mobile is wptouch. but i’m not finding wptouch flexible enough in the design. so…
    2A - is there a more flexible plugin that anyone suggests? preferably free.
    2B - i know i can create mobile pages without a plugin. is it possible to have some pages of the mobile site created on my own and some created with wptouch? reason being, there’s no way I could manually mobilize all the pages of an extensive site.

just looking for some direction here for a mobile newbie. please advise. thanks!

2

I personally stopped building mobile designed/scaled sites and instead utilize media queries. Just about all phones now-a-day support media queries. The first three results from a google search are good starting references

In short, using media queries you will only alter your CSS file for each site, adding a couple @media statements at the bottom that then contain the classes/ids you want to alter.
Example from one of my non-wordpress sites


@media all
{
  div.pageContainer
  {
    border-color: #000;
    border-width: 0 1px;
    border-style: solid;
    margin: auto 5%;
    width: 90%;
  }

  div.pageContainer div.pageContent div.projectSlider
  {
    height: 250px;
  }

  div.pageContainer div.pageContent div.projectSlider .project
  {
    height: 250px;
  }

  div.pageContainer div.pageContent div.pageContentText div.column
  {
    width: 30%;
  }

  div.pageContainer div.pageContent div.pageContentText div.halfpagecolumn
  {
    width: 45%;
  }

  div.pageContainer div.pageContent div.pageContentText div.lastcolumn
  {
    min-width: 300px;
    width: 30%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section div.project div.description div.screenshot
  {
    height: 120px;
    width: 120px;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset
  {
    width: 70%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset label
  {
    width: 40%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset div
  {
    width: 60%;
  }
}

@media all and (max-width: 1200px) and (min-width: 1025px)
{
  div.pageContainer
  {
    border-color: #000;
    border-width: 0 1px;
    border-style: solid;
    margin: auto 2%;
    width: 96%;
  }

  div.pageContainer div.pageContent div.projectSlider
  {
    height: 250px;
  }

  div.pageContainer div.pageContent div.projectSlider .project
  {
    height: 250px;
  }

  div.pageContainer div.pageContent div.pageContentText div.column,
  div.pageContainer div.pageContent div.pageContentText div.halfpagecolumn
  {
    width: 45%;
  }

  div.pageContainer div.pageContent div.pageContentText div.lastcolumn
  {
    min-width: 300px;
    width: 45%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section div.project div.description div.screenshot
  {
    height: 120px;
    width: 120px;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset
  {
    width: 90%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset label
  {
    width: 50%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset div
  {
    width: 50%;
  }
}

@media all and (max-width: 1024px) and (min-width: 801px)
{
  div.pageContainer
  {
    border-color: #000;
    border-width: 0 1px;
    border-style: solid;
    margin: auto 2%;
    width: 96%;
  }

  div.pageContainer div.pageContent div.projectSlider
  {
    height: 180px;
  }

  div.pageContainer div.pageContent div.projectSlider .project
  {
    height: 180px;
  }

  div.pageContainer div.pageContent div.pageContentText div.column,
  div.pageContainer div.pageContent div.pageContentText div.halfpagecolumn
  {
    width: 45%;
  }

  div.pageContainer div.pageContent div.pageContentText div.lastcolumn
  {
    min-width: 300px;
    width: 45%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section div.project div.description div.screenshot
  {
    height: 100px;
    width: 100px;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset
  {
    width: 90%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset label
  {
    width: 50%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset div
  {
    width: 50%;
  }
}

@media all and (max-width: 800px), all and (max-device-width: 800px), all and (orientation: portrait)
{
  div.pageContainer
  {
    border-color: #000;
    border-width: 0 1px;
    border-style: solid;
    margin: auto 2%;
    width: 96%;
  }

  div.pageContainer div.pageHeader ul
  {
    bottom: 10px;
  }

  div.pageContainer div.pageHeader ul li
  {
    border-radius: 8px;
    margin-top: 5px;
  }

  div.pageContainer div.pageHeader ul li:hover
  {
    border-radius: 8px;
    margin-top: 5px;
  }

  div.pageContainer div.pageContent div.projectSlider
  {
    height: 120px;
  }

  div.pageContainer div.pageContent div.projectSlider .project
  {
    height: 120px;
  }

  div.pageContainer div.pageContent div.pageContentText div.column
  {
    float: none;
    width: 95%;
  }

  div.pageContainer div.pageContent div.pageContentText div.halfpagecolumn
  {
    float: none;
    width: 95%;
  }

  div.pageContainer div.pageContent div.pageContentText div.lastcolumn
  {
    float: none;
    margin-left: 25%;
    margin-right: 25%;
    min-width: 300px;
    width: 50%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section div.project div.description div.screenshot
  {
    height: 80px;
    width: 80px;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset
  {
    width: 90%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset label
  {
    width: 50%;
  }

  div.pageContainer div.pageContent div.pageContentText div.section fieldset div
  {
    width: 50%;
  }
}

Granted there is some optimizations I could have done, but you get the idea.

3

so it sounds like media queries do NOT let me scale down the amount of content that is presented. it just lets me style it differently… right?

i’m looking for an ideal solution that will allow me to do both.

4

That is correct, it won’t scale down the content into smaller chunks, so you would definitely need something else to fill that void.

5

thanks. to give a clearer depiction of what i’m driving at… lets say i wanted to create a mobile version of this site so that it looks like the image below (with a lot less content), i’m looking for the best solution to go about that.

any ideas?

6