A collection of web design related ramblings and nonsense

Mobile Optimisation with CSS Media Queries

November 12th, 2012

Mobile Optimisation CreativeBinge

Mobile optimising your website, using Responsive Web Design, can initially be a daunting experience but anyone who is familiar with CSS will find the process relatively easy.

A common method is to use media queries to serve CSS, based on the browser’s dimensions. iPhones are 320×480, the Samsung S3 is 360×640, the iPad has a resolution of 1024×768 and there are a gazzillion other device sizes in and around this area.

Retina Display

The first thing to consider is document setup. You need to design your mobile version and imagine how it would expand in a liquid layout. What size should you create your document?

Retina display is the term Apple use for the display on their phones and tablets. Usually – the higher the resolution is on a monitor – the smaller things physically get, on screen. (Adjust your monitor to a low setting and you’ll see that everything looks massive). Apple’s devices have a high resolution but a small screen, so they up-scale the images to twice their actual size. You therefore have to make your images twice as big and then set the size with CSS. There are some javascript methods around but this is the basic way.

Your document should therefore be twice as big as it would appear on the phone. Therefore, you should create it at 640px width and any height. It sometimes helps to create it at this size, add guides and then increase the canvas size, this will help if you need to create wide background images or work out how it’s liquid layout would work.

Here is how I created my document:

Mobile Design Document Setup

Future Proof

The thing to remember is to future proof your layout as mobile screen sizes are changing all the time. To do this – you need to implement a liquid layout with a minimum and maximum width. When implementing my mobile friendly site, I decided that anything that has a width over 767px should be fine to display the desktop version of the site. Edit: it’s probably best to have a view for devices between 768 and 960px / full width of your desktop site as when you force the viewport to a certain zoom level you can run into complications.

Media Query

1
2
3
4
5
/* regular desktop styles here */

@media only screen and (max-width : 767px){
   /* mobile styles here */
}

This is the basic code that will allow you to start optimising your site. It basically says that anything with a width less that 768px will use the following styles. You would still set your desktop styles first above the media query and then override anything you need to, within this media query.

min-width & width:auto

This often consists of widths. You’ll probably be needing to give your containing div a min-width of 320px to stop it getting overly squashed, in the off a user has a tiny display.

1
2
3
4
5
div#wrapper{
        min-width:320px;
        max-width:767px;
        width:auto;
    }

As much as possible, widths should be set to auto so your layout expands up to 767px for small tablets, differing screen sizes in portrait view or when people use their phone in landscape view. You can in fact target these separately but with a liquid layout, there’s not much point.

Scaling Background Images

1
2
3
4
5
6
7
8
div#wrapper div#header h1{
        background-image:url(/images/richard-stelmach-logo-mobile.gif);
        background-repeat:no-repeat;
        background-position:top center;
        background-size:320px 409px;
        height:409px;
        margin:0 auto;
    }

As my logo is twice as big to maintain quality, I then had to set it’s size in the CSS to position it correctly in the h1.

Mobile Font Sizes

You can use regular pixel font sizes and they’ll appear at a similar size to normal. Sometimes however, the iPhone will increase the font size of certain elements, especially if their size isn’t defined. To avoid this, use:

1
-webkit-text-size-adjust: none;

Stopping the iPhone from Displaying the Desktop Version

To ensure your mobile version is displayed, add this meta tag within the :

1
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />

Testing

If you don’t have a Mac, the easiest way to test is simply to resize your browser. Once it’s finished it’s useful to test it on devices but so far I don’t know of an easy way to do this, other than using my actual iPhone itself. Opera Mobile Emulator has a variety of Android devices that is a great way to test and as it’s downloadable you can test local files. http://ipadpeek.com/ is useful for testing how your site looks on an iPad though I’m not sure this is accurate.

Conditional Javascript

You may find that some javascript functionality is inappropriate on a mobile. I found that my lightbox gallery didn’t work as well on the phone so simply directed the user to a new page and inserted a back button for the user to go back to the listing page.

1
2
3
if($(window).width() > 767){
//javascript for desktop version here
}

Server Side Device Targeting

Alternatively you could link certain javascript files or exclude content by using the handy PHP script called Mobile Detect.

Conclusion

There was some further work required to determine whether the page had been called by an AJAX request. I would recommend this post about detecting AJAX with PHP which I found very useful.

My site took a day to optimise and most of that time was due to some javascript issues when implementing my non-lightbox gallery. For small scale sites, mobile optimisation can be done relatively quickly and easily and with mobile usage increasing constantly, it’s becoming a necessity.

4 Responses to Mobile Optimisation with CSS Media Queries

  1. steve - Wednesday November 21st, 2012 at 12:16
  2. Hi there colleagues, how is all, and what you would like to say about this post, in my view its truly awesome for me.

    buy followers on instagram real - Tuesday December 10th, 2013 at 00:33
  3. I see a lot of interesting articles on your website. You have to spend a lot of time writing, i know how to save you a lot of time,
    there is a tool that creates unique, google friendly posts in couple of minutes, just search in google –
    laranita’s free content source

    Ezekiel - Sunday July 6th, 2014 at 17:46
  4. It’s hard to find your page in google. I found it on 20 spot,
    you should build quality backlinks , it will help you to rank to google top 10.
    I know how to help you, just type in google – k2 seo tips and tricks

    Alisia - Wednesday July 9th, 2014 at 00:14

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>