How to get a WordPress theme to look good on small screens

0

Do you detest it when you come across a WordPress theme you appreciate, but realise it looks awful on a smartphone or tablet? Here’s how to fix it…

Mobile devices are eating away at the visitor logs for websites all over the internet. Sure, most sites will look good enough on your smartphone, but it’s a nuisance to have to pinch and zoom to actually read something, right? This means mobile iterations of internet sites are more important than ever, and obviously this is clearlysomething you don’t want to miss out on. So when we do web design, moblie adaptation is a necessity these days

There are many ways to make your website mobile available. If we look at WordPress, you’ll see there are various plug-ins serving mobile-friendly versions of your site. Not everyone wishes to use a plug-in though.

In this article we use media queries to make the Twenty Ten theme responsive. That is to say, if the customer is seeing via a little screen we’ll make the theme adapt. Since we don’t want to ruin the Twenty Ten template itself with our edits, we’ll create a child theme to keep additions independent. Let’s get started!
1. Make a child theme

First of all we need to develop our child theme. As implied, child themes rely on parent themes which means that Anything that doesn’t appear in the child will be loaded from the parent. A child theme sits in its own folder in wp-content/themes/ and is activated just like any other theme. First, create a folder called ‘twentyten-responsive’ and, within a file called ‘style.css’, insert the following code:

 001 /*  
 002 Theme Name: Twenty Ten Responsive
 003 Theme URI: http://tdh.me/wordpress/twenty-    ten-responsive/
 004 Description: A child theme that makes     Twenty Ten responsive.
 005 Author: Thord Daniel Hedengren
 006 Author URI: http://tdh.me/
 007 Template: twentyten
 008 */
 009
 010 @import url(‘../twentyten/style.css’);
 011

2. Activate the child theme

Use a development install of WordPress that has the Twenty Ten theme, which is shipped with WordPress by default but can also be downloaded. Upload the twentyten-responsive folder to wp-content/themes/ and activate the Twenty Ten Responsive theme from within WordPress. You’ll notice that the site looks just like Twenty Ten, since at this point we haven’t done anything but import Twenty Ten’s stylesheet.

3. Now it’s time to develop the  header.php too

Just before we can do any fun stuff with media queries in style.css we first need to add a little bit of code to header.php. Touching Twenty Ten itself is a big no-no, so duplicate the header.php file from the wp-content/themes/twentyten/ folder and place it in the twentyten-responsive folder. In the meta section of our own header.php, around line 14, add the following line which will let us play with the viewport:

001 <meta name=”viewport” content=”initial-scale = 1,user-scalable=no,maximum-scale=1.0″/>

4. Decide on the media queries

In this guide we’re not going for a fully fluid version of Twenty Ten but rather adapting the layout for various set widths. The default site width is 980px, which most current displays will be able to handle. We’ll have a media query for 320px width and up, and then we’ll add some added rules for 480px and up. The next step is 640px, and then we’ll go over the 980px width rules as well (ie the default width).

5. Set up the media queries

With our plan determined, let’s start to write the media queries. This is done in the child theme we set up in step 1 since all edits should be kept free from the parent theme. Open style.css from the twentyten-responsive folder and add the following queries. Do read the commenting inside of the code for a quick insight as to what each media query is meant to do.

001 /* ===============
002    MEDIA QUERIES */
003
004 /* 320 px and up */
005 @media only screen and (min-width: 320px)
006
007     /* This goes for everything 320 pixels     and up */
008
009
010
011 /* Up to 480 px */
012 @media only screen and (max-width: 480px)
013
014     /* Up to 480 pixels */
015
016
017
018 /* From 481 px and upwards */
019 @media only screen and (min-width: 481px)
020
021     /* For screens 481 pixels and wider */
022
023
024
025 /* From 640 px */
026 @media only screen and (min-width: 640px)
027
028     /* Special styling from 640 pixels and     up */
029
030
031
032 /* 980 px and up */
033 @media only screen and (min-width: 980px)
034
035     /* Where we set everything straight again */
036
037

6. choose what to cover.

The key to getting the variations for more compact screens to both look excellent and work properly is to make sure you cover unnecessary elements, and find new locations for vital ones. In this example we’ll hide the header on top up until the desktop version, and we’ll float the right-hand column to the bottom of the page. At times you’ll be better off with other priorities, but deciding which elements are critical is key so make sure you think things through before touching any code.

7. Mobile first

There is a reason there is so much discuss about ‘mobile first’. The first media query – 320 pixels and up – will fundamentally strip away Almost everything we don’t want or need from Twenty Ten’s layout, and reposition other things. These rules will apply at min-width: 320px, which is the standard for smartphones, so we’ll have to make some more tweaks to our edits later. For now, let’s get free of some stuff from Twenty Ten that isn’t appropriate for small screens. You’ll find these referenced styles in Twenty Ten’s style.css, which we must import to the top of our child theme’s style.css file.

001 /* 320 px and up */
002 @media only screen and (min-width: 320px)
003
004     #wrapper
005         margin: 0;
006         padding: 0;
007
008     #site-title
009         width: 100%;
010         margin-bottom: 0;
011         text-align: center;
012
013     #site-description
014         width: 100%;
015         float: left;
016         margin-top: 10px;
017         text-align: center;
018     #access, #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper
019 @media only screen and (min-width: 481px)
020         width: 100%;
021
022     #branding img
023         display: none;
024
025     div#content
026         width: 100%;
027         margin: 0;
028
029     div#primary
030         width: 100%;
031         margin-top: 20px;
032         padding-top: 20px;
033         border-top: 3px double #000;
034
035     #main .widget-area ul
036         padding-right: 0;
037
038     #footer
039         margin-bottom: 0;
040
041     #site-info, #site-generator
042         width: 100%;
043         float: left;
044         text-align: center;
045
046

8. Make it pretty for small screens

While this straightforward piece of code (which generally just overwrites the primary styles from the Twenty Ten theme) will make the site infinitely more readable when viewed on mobile devices, it is in need of a good deal of beautifying by us. Let’s include some spacing in the next media query. The motive we’re doing it here and not on top is that we’ll have different amounts of space later, so it’s not as global as the above changes.

001 /* Up to 480 px */
002 @media only screen and (max-width: 480px)
003
004     .post, div.page, li.widget-container
005         padding: 0 10px;
006
007
008

9. Make it pretty for somewhat larger screens

Screens that are greater than 480px but more compact than 640px might benefit from a little more spacing, so let’s raise the padding we just set for the up-to-480px screens in the prior step, from 10px to 15px.

001 /* From 481 px and upwards */
002 @media only screen and (min-width: 481px)
003
004     .post, div.page, li.widget-container,     #comments
005         padding: 0 15px;
006
007

10. Reposition the sidebar

You may possibly ponder why we have a media query from 640px and up? The reason is that from this size it works with the sidebar positioned on the right-hand side. Our problem is, we need it to scale properly, so the width will be detailed in the form of a percentage.

001 /* From 640 px */
002 @media only screen and (min-width: 640px)
003
004     #container
005         width: 62.5%;
006         margin: 0;
007
008     .post, div.page, li.widget-container
009         padding: 0 20px;
010
011     div#primary
012         width: 32.5%;
013         margin-top: 0;
014         padding-top: 0;
015         border: 0;
016
017

11. Back to normal

Right now, the desktop model of the site looks pretty bad, a lot like the screenshots shown throughout the page. This is typical – we have overwritten a lot of styles after all! In our last media query – the one for 980px and up – we’ll set things straight again, essentially reverting to the standard Twenty Ten.

001 /* 980 px and up */
002 @media only screen and (min-width: 980px)     
003
004     #access .menu-header, div.menu,     #colophon, #branding, #main, #wrapper
005         width: 940px;
006
007     #wrapper
008         margin: 20px auto;
009         padding: 0 20px;
010
011     #site-title
012         width: 700px;
013         margin-bottom: 18px;
014         float: left;
015         text-align: left;
016
017     #site-description
018         width: 220px;
019         float: right;
020         text-align: right;
021
022     #branding img
023         display: block;
024
025     #footer
026         margin-bottom: 20px;
027
028     #site-info
029         width: 700px;
030         float: left;
031         text-align: left;
032
033     #site-generator
034         width: 220px;
035         float: right;
036         text-align: right;
037
038

12. What we’ve obtained so far…

At this stage we actually have a pretty respectable mobile version of the site, along with a middleground for mid-sized, and the typical setup for desktop. You would think we could stop here, and if you only used text that would be the case, but alas, images and other things need to behave as well. We haven’t looked at single posts and pages either, so there’s still work to do.

13. Single posts and pages

A fast look at a single post tells us that the comments need styling; at the moment, they hit the outer margins of the window. Fortunately this is uncomplicated enough to take care of, since the comments section sits in div#comments. Remember the padding code launched in step 7, and added to in steps 8 and 9? Find that, and add #comments to it and you’ll be fine. The code from step 7 would look like this:

001 /* Up to 480 px */
002 @media only screen and (max-width: 480px)
003
004     .post, div.page, li.widget-container,     #comments
005         padding: 0 10px;
006
007

14. Getting the navigation links right

It’s not just the comments code that needs to be positioned, as other elements will appear up when you’re creating an current theme responsive as well. In Twenty Ten, one such element is the navigational links, linking to the prior page in archives as well as to the previous post on single posts. We only need to worry about these when #wrapper is set to no padding, so just add the .navigation class to the same media queries as you did in step 13, like this:

001 /* Up to 480 px */
002 @media only screen and (max-width: 480px)
003
004     .post, div.page, li.widget-container,     #comments, .navigation

15. The Internet Explorer answer for your HTML5 needs

Twenty Ten isn’t coded in HTML5 so you won’t come across this problem here, but more and more WordPress themes are. The thing is, Internet Explorer just does not play well with HTML5 and CSS3 all the time. You’ll be fine from version 9 and up, but Prior to that you’ll have difficulties. There are numerous boilerplates that resolve this in a more or less classy fashion, but the best solution is perhaps Remy Sharp’s excellent JavaScript HTML5 shim, which is hosted for free at Google Code. It will make the HTML5 tags behave as expected in IE6-8. You can incorporate it in any project, using the IE conditional tag:

001 <!–if lt IE 9>
002 <script src=”http://        html5shim.googlecode.com/svn/    trunk/html5.js”></script>
003 <!endif–>

It operates completely well with WordPress themes as well, Despite the fact that you should look at using wp_enqueue_script() and possibly wp_register_script() to queue the HTML5 shim script with your theme.

You might also like More from author

Leave A Reply

Your email address will not be published.