Userbag.co.uk

A few week’s or so back Luke was showing off his new Responsive CV at work, which had the rather cool feature of instantly resizing itself to fit pretty much any screen size – even mobile. The magic behind all this, rather than any nifty bit of JavaScript, tuned out to be CSS Media Queries, a CSS feature I’d never really paid much attention to beforehand.

The basic idea behind CSS Media Queries is to give web developers the power to tell the browser to apply extra CSS when certain conditions are met. The most useful condition in regards to creating a mobile version of your site website the being browser width’s. As a rough example of how they work, imagine for example you have a website with a default width of 1000px and a user then resizes their browser window to 950px wide.

Using the following code snippet, once the users browser window has been resized to below 1000px the enclosed CSS will be instantly applied to the page, changing the containers width to 900.

@media only screen and (max-width: 1000px) {
	#container {width:900px !important; }
}

The real advantage’s of Media Queries over a standard fluid layout start to show up when you get to the significantly different screen resolutions, for example the 320px width of a mobile phone browser. Since Media Queries allow you to selectively apply whole chunks of additional CSS, you can use it to totally rearrange elements on the page in order to ensure your site remains functional at any resolution. Have a go at resizing this site for instance, the first big change to happen is the removal of the sidebar (at 720px), which coincides with the search bar being moved up to the top. The next big one happens when the site is transformed fully in to the mobile site (at 450px) which has quite substantially different styling to the normal view.

If you want to apply your mobile site CSS to any screen resolution below 350px, your code my look something like this.

@media only screen and (max-width: 350px) {
	#container {width:320px !important; }
	/* Mobile Site CSS here */
}

Or, if you want to resize headings on any resolution between 600px and 800px, your code may be as follows:

@media only screen and (min-width: 600px) and (max-width: 800px) {
	h1 {font-size:0.0em;}
	/* More styles */
}

As you can see, using this technique it becomes relatively straight forward (assuming you already have a good grasp of CSS) to create a mobile version of your site by just altering and adjusting a few of its styles.

One thing you may notice though, is that even if your Mobile Site styles work fine when you resize your browser window to the correct size, your actual mobile phone’s browser still shows the desktop version.

In order to get your mobile CSS styles to be applied correctly, its important to tell the mobile browser that you want everything rendered at its real size (as opposed to the zoomed out view they normally try to adopt when encountering desktop sites).

To do this, you’ll need to ad a veiwport meta tag to your websites header;

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

Once that’s done your mobile CSS should start showing up on your phone just as you would expect it to.

Having only recently added CSS Media Queries to this site, I’m still incredibly impressed with them. CSS Media Queries turn the rather substantial job of creating an alternate mobile friendly version of your site in to about half an hour’s CSS. Awesome, no?