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.
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?
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!
Check out the free Brunelleschi theme from WordPress Extend, this uses the 1140 css grid, the Twenty Eleven will show in a mobile browser, but it is things like Adsense banners that are fixed with that cause issues, as you can see I have changed form banners to blocks, si this website will show in a mobile ok.
http://wordpress.org/extend/themes/brunelleschi
HTH
David
Hi David,
Is it a good idea to create a child theme for this template if you want to make chages to the style ?
Mike
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
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?
Hi Steve,
IT is only the page files, I am going to reconstrct the header and footer, there is already an 1140 theme in extend.
http://wordpress.org/extend/themes/brunelleschi
Here is a sample page template file the all articles page.
http://pastebin.com/1WEDp2ZT
You will see elements row, eightcol and fourcol
Regards
David
Hi David,
Isn’t the 1140 grid already included in the Three Menus child theme?
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?
Hi Steve,
Yes they are wrapped in the classes fourcol, fourcol and fourcol last
http://pastebin.com/LT09Sh5U
And the theme width is greater that the standard 2011 theme to give the 1140px wide.
HTH
David
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