SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Going mobile with TwentyTen

    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. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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
    Code css:
    @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. #3
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    370-gns3z.jpg

    any ideas?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •