Going Mobile with Twenty Eleven

We have been working on a theme that will render in all browsers, using a custom twenty eleven theme.
Twenty Eleven is fluid and will collapse, the images auto resize as well, we have mixed this with some 1140 grid code, custom category and page colors, so it looks good on a mobile, and hidden the header on small devices, viewing it in a browser and resizing the screen you will see the effect, we want to make this website readable on a small device, mobile friendly and the content fluid.

The Requirement

We researched by looking at magazine and news websites, in the UK we liked The BBC and the new Huffington Post and have settled for a three column front page, we started off by coding the page using template parts but this was two restrictive, so we looked at the code for the WordPress twenty eleven Ephemera Widget which add to the sidebar.

Reading the code we noticed that the widget cached the widget content, if a post is edited or deleted the cache is deleted, we were quite excited about this as it means we can have a fully widgetized home page, as the widget is cached then the database reads and writes are minimal, and our tests are loading under 1.5 seconds.

The Widgets

For our home page post content we wanted things like the latest posts, category posts and author posts, once we had our head around the code we were able to create all of these, we are still working on more as on the single post page we want to show more from the post categories and more from the author, these will not be cached but dynamic.

The Sidebars

We have created a few sidebars, most for the homepage three columns, slideshow, then we wanted header banner, below and above posts, and page, post sidebars for our dynamic widgets.

Here is our test website feel free to visit and resize the browser to see how the theme collapses, if you have a mobile or small device, please test the website and leave a comment below.

We have tested with the website Cross Browser Testing some issues with IE6 but the rest look ok.

Lets look at a couple here is Windows and FireFox

The Ipad and Safari, the Google adsense does not resize like the images, so we will need to consider this, and where we place the ads. 

Last the Iphone, this is the same fluid theme, easy to read and the 300px wide adsense fits as well.

12 thoughts on “Going Mobile with Twenty Eleven

  1. I’m very interested in a version of the twenty eleven theme which will work better in mobile browsers – yours looks great, but I’m really only interested in the custom css etc which you use to make it render differently at those smaller sizes.  Will you be writing a guide or similar?

  2. Hi,

    I’m currently building a site based on Twentyeleven and just learned that it doesn’t display well on mobile browsers. In particular, I wonder why the images resize but not the rest of the elements? The look I am trying to achieve on mobile is your Twenty Eleven Dark Child Theme. I think I may look for a more mobile friendly theme rather than try to uber customize twentyeleven. Do you have any suggestions?

    Thanks!

  3. Also I am using the Iphone theme switcher plugin Version 0.51 By Jonas Vorwerk. currently I am using the Brunelleschi theme for my mobile template. can I upload a child theme for this template and can I select the child theme using this plug in ?

    Mike

  4. You say this is a child of twentyeleven but wouldn’t you have had to amend just about every template file in order to incorporate the 1140 layout?

  5. Thanks Dave that’s a great help. One other thing regarding using twentyeleven as a parent; if I just run twentyeleven with three footer areas and view on my iPad the sidebars stack on top of each other. Looking at digitalraindrops.net on the iPad I see you dont get this problem. Did you have to do something special to correct this or is this because you are using the 1140 grid?

  6. OK I see. I was surprised when I first saw twentyeleven in the iPad as twentyten didn’t have any issues on iPad regarding the footer sidebars. Thanks for your help – I now have a good idea of what to do. Cheers

    • Hi,
      I do not understand how to solve the problem of the three footer’areas using the file sidebar-footer.php.
      Also I see in my ipad the three areas, one below the other and not side by side.
      thank’s!
      Filippo

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Blog

Read More

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More