icon/dark/fileicon/dark/foldericon/dark/folde-openicon/dark/hashtagicon/dark/line-graphicon/dark/listicon/dark/localicon/dark/lock

Creating fully responsive websites that display at their best across all browsers and mobile devices has been made simpler with CSS3 Media Queries. Media Queries allow a web designer to tailor content depending on the properties of the target output device, such as a smartphone or tablet. A web designer using Media Queries could choose to display content in a single column rather than in multiple columns if, for example, screen estate is limited and the device is being used in a portrait orientation.

The CSS3 Media Queries module is supported by all current versions of desktop and mobile browsers including IE, Firefox, Chrome, Safari and their related mobile versions. As of writing, caniuse.com [http://www.caniuse.com/#feat=css-mediaqueries] reports that global browser usage has 87.88% support for CSS3 Media Queries.

Implementing CSS3 Media Queries

There are two main methods of implementing Media Queries. Which you choose depends on how you wish to display and maintain a mobile version of your website. If you are planning to create a highly optimized mobile site that has very different styling to the standard desktop website, you could create a separate stylesheet that only handles mobile display. You could then use the following HTML on your webpage to link to the mobile stylesheet:

[html]<br />
[/html]

The above stylesheet will only be used if the target device screen has a horizontal resolution less than 800 pixels. Having the mobile CSS separate gives the web designer creative freedom but comes at the additional cost of maintaining multiple stylesheets.

A second option is to create Media Query conditions within a single stylesheet. With proper planning a well designed website can translate well to mobile devices and all display methods can be maintained within a single stylesheet. To implement a Media Query in your stylesheet you could use the following CSS:

[css]<br />
@media screen and (max-width: 800px) {<br />
.mobile {<br />
display:none;<br />
#content {<br />
width: 100%;<br />
}<br />
}<br />
[/css]

The above Media Query will only display HTML elements with the 'mobile' class if the target device screen has a horizontal resolution less than 800 pixels.

Before And After Demonstration Of CSS3 Media Queries

The following example demonstrates how a simple two column webpage can be displayed dynamically depending on the device resolution. The HTML for the page is quite simple, using three div containers; 'page', 'content' and 'side bar':

[css]<br />
#page {<br />
width: 90%;<br />
height: 500px;<br />
background: gray;<br />
margin: auto;<br />
padding: 10px;<br />
}

#content {<br />
background-color:white;<br />
float: left;<br />
width:70%;<br />
height:500px;<br />
overflow:hidden;<br />
}

#sidebar {<br />
background-color:lightgray;<br />
float: right;<br />
text-align:center;<br />
width: 29%;<br />
height: 500px;<br />
overflow:hidden;<br />
}<br />
[/css]

The two columns use relative percentages which mean that the columns will always resize to fit the width of the 'page' div whilst maintaining the same ratio. In the below image you can see how this is rendered in a desktop browser window with a horizontal resolution of 1366 pixels:

Webpage displaying in desktop browser

Webpage Displaying In Desktop Browser

As you can see, there are no problems here. The text displays correctly and all the links in the sidebar are easily readable. If we then look at the same page on a mobile device which only has a width of 360 pixels in the portrait orientation, you can see we have a problem:

Webpage displaying in mobile browser portrait and landscape

Webpage Displaying In Mobile Browser Portrait (left) And Landscape (right)

The sidebar has been resized too small, the links are broken over many lines and the main content section is also difficult to read. An option you could take is to hide the sidebar and only display the content column. To achieve this we could add the following CSS3 Media Query:

[css]<br />
#sidebar {<br />
display: none;<br />
}

#content {<br />
width: 100%;<br />
}<br />
[/css]

The condition above will only display the sidebar if the device horizontal resolution is greater than 550 pixels. Additionally it increases the width of the content column to fit the width of the 'page' div. You can see that this will now render on a mobile device as follows:

Webpage displaying in mobile browser portrait and landscape

Webpage Displaying In Mobile Browser Portrait (left) And Landscape (right)

Of course, with CSS3 Media Queries, talented web designers could easily implement the sidebar in other ways; displaying the sidebar as a footer, or by using a mobile gesture such as swiping the screen to display the sidebar. For further examples of responsive websites, check out the following websites and resize your browser window to see how content dynamically changes:

Conclusion

Responsive design was the buzzword of 2013 and this trend continues to grow in importance as more and more people use a range of devices to browse. Now you can control design using CSS3 Media Queries and ensure a seamless browsing experience across all platforms.

Using CSS3 Media Queries to build responsive mobile websites is simple but effective. For further reading, see the full CSS3 Media Queries specification.