The web used to be relatively easy to design for. In a lot of cases you could simply pick the most common screen resolution, whether that be 640, 760 or 1024 and design for a fixed width. If you wanted to go a step further then you could use percentages so your layout adapted its width however with the variety of device sizes increasing all the time this is no longer an option.
Device sizes can range from around 320 pixels wide for smart phones with a huge variety of tablets, laptop, desktop monitors and smart TVs making up the rest of the devices to consider, so what’s the best practice for creating a responsive website?
Beginners Guide to Media Queries
You may have used media queries in the past without actually realising, for example the media=”screen” or media=”print” that is sometimes added to a stylesheet link is a media query. To use them for responsive design we’re just taking advantage of the width attributes.
Media queries in an external stylesheet
The first example allows us to specify different stylesheets like so:
<link rel="stylesheet" media='screen href="/css/style.css" />
<link rel="stylesheet" media='screen and (min-width: 480px) href="/css/xsmall.css" />
<link rel="stylesheet" media='screen and (min-width: 600px) href="/css/small.css" />
<link rel="stylesheet" media='screen and (min-width: 700px) href="/css/medium.css" />
<link rel="stylesheet" media='screen and (min-width: 980px) href="/css/large.css" />
<link rel="stylesheet" media='screen and (min-width: 1170px) href="/css/xlarge.css" />
Within this example, I’d include all my common styles within the style.css which would be for all devices at the smallest resolution (i.e. smart phones). I’d then build on that for each resolution as more screen becomes available.
However, this obviously leads to more HTTP requests and can also lead to jumps in presentation if you resize your browser so I prefer the following solution.
Media queries within a CSS file
By putting the media queries within a single CSS file you can reduce the amount of HTTP requests and I personally find it much easier to manage when you have the code that relates to the same element in a similar location within the CSS.
Here’s an example as to how this might look:
.wrapper { width: 100%; }
@media only screen and (min-width: 480px) { .wrapper { width: 440px; } }
@media only screen and (min-width: 600px) { .wrapper { width: 560px; } }
@media only screen and (min-width: 760px) { .wrapper { width: 720px; } }
@media only screen and (min-width: 980px) { .wrapper { width: 990px; } }
@media only screen and (min-width: 1170px) { .wrapper { width: 1130px; } }
Viewport width issue
Despite using media queries, some devices don’t initially render at the correct zoom level. Therefore it’s also important to include the following meta tag when using media queries to create a responsive layout.
<meta name="viewport" content="width=device-width, initial-scale=1">
Media query browser support
As is usually the case, the only browser that you really need to consider as a problem is Internet Explorer. IE8 and below do not support media queries so it’s a good idea to provide a fall back if you do need to support those browsers. For example, you could serve up a single stylesheet which incorporates all the stylesheets up to 990px.
An alternative is css3-mediaqueries-js which provides a JavaScript version.
Summary
With the growth of mobile devices accessing the internet set to eclipse that of desktop computers in the near future it’s important for us to provide a better experience for mobile users and responsive design is an excellent solution to add to our toolbox.