x

Contact Us

Feel free to drop us a line at [email protected].

Responsive designs with CSS3 media queries

Separate mobile versions of websites are great - imagine going to Google on your mobile and being shown the standard view? The search box would be lost amongst the vast white space that would be your mobile screen; however, luckily for our zooming fingers, they display a specially formatted version for your browser. It’s perfect, everything within touching distance.

Now, go to your website. How’s that text coming out? I’m guessing not good if you’re reading this far on. Now, you could create a separate mobile domain for your website (like the previous example of Google does) and use one of the many mobile frameworks to achieve a pretty standard, well formatted but basic website. Of course, you could spend a while reformatting the framework but why not save yourself some time..?

Enter “Responsive Designs”, or the ability to respond the environment that the website is being shown in. It’s a simple concept of retrieving the browser properties and processing some CSS depending on the selection made, or none at all if the no match is found.

So where to start? It’s probably advisable to think about your layout before you start a project, but you can easily update an existing one as well (take this website for example). First things first though, lets tell the browser not to rescale the current page with the simple <head> metatag:

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

A good explanation of what this is doing, why it’s needed and the problem it solves can be found in here: Using the viewport meta tag to control layout on mobile browsers.

Changing the design depending on the viewport size is incredibly easy, check the below media queries out:

You can of course reference the media queries in your <head> <style> references:

<link rel=”stylesheet” href=”special-style.css”
media=”only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)”>

It’s quite self explanatory what is happening here, but the media queries and looking for screen only devices with a min/max width/height of X value. The queries here depict the most common formats which you’ll probably want to use, but you can use an combination of widths/heights to detect any screen - useful for if you know you’re website will be viewed on large screens/tiny screens, or you’re just not sure what.

Now, inside these media queries you simply need to add CSS which will format the page correctly: widths, floats, text sizes and image sizes are all very important - especially image sizes as these will force any not overflow:hidden content into a larger block element.

To change image sizes on the fly (and yes, special mobile images would be better), simply change the max-width property of any images you have, ie:

div.classname img {
   max-width:200px;
}

This will ensure the images, although downloaded full size which your mobile users might not be so keen on, will be scaled down to an appropriate size.

And away you go, get formatting. To test your designs, simple resize your browser, or install a web developer plugin such as Pendule (you are using Chrome, aren’t you?) which will resize to a set of predefined sizes or any size you enter.

Good reading: