This article is an attempt to share some insights pertaining to web design for multiple devices: desktops, laptops, tablets, smartphones and other internet enabled portable gadgets. Thanks to CSS media queries, you can now serve the same content to all those platforms and define a style sheet for each specific range of screen sizes. To provide each web site visitor a web experience tailored to her device, web developers have to create multiple CSS stylesheets — at least 3 — in order to cover the display spectrum.
Let’s assume you use the following CSS media queries:
<!– Smartphones in portrait mode and tablets in portrait mode –>
<link rel=”stylesheet” media=”screen and (min-width: 128px) and (max-width: 640px)” href=”phone.css”>
<!– Smartphones in landscape mode and tablets in portrait mode –>
<link rel=”stylesheet” media=”screen and (min-width: 641px) and (max-width: 800px)” href=”portait.css”>
<!– tablets in portrait mode and tablets in portrait mode –>
<link rel=”stylesheet” media=”screen and (min-width: 801px) and (max-width: 960px)” href=”tablet.css”>
<!– larger tablets in landscape mode, laptop and desktops –>
<link rel=”stylesheet” media=”screen and (min-width: 961px)” href=”full.css”>
Of course your choice of dimensions range depends on your web site design. Therefore the pixels (px) values above are just for illustration purpose.
The objective of media queries is to use a specific stylesheet according to the dimensions the web browser’s viewport in other words the screen width your web pages will be displayed on.
The advantage of using separate stylesheet is that the web browser will only load the css file(s) matching the conditions defined in the media query (min-width, max-width).
It also make your CSS style management more easier.
However if your stylesheets are small in size you could combine multiple files into one stylesheet and use media queries to get the same results as before.
For instance, given the fact that the user experience and features offered by the latest smartphones are quite similar to the one found in tablets, the stylesheets targeting those two platforms will be quite similar with just a few minor differences in CSS rules related to each device’s width.
You can create a external stylesheet named mobile.css combining the phone.css, portrait.css and tablet.css
/* CSS styles common to the combined stylesheets can be pasted in the section immediately below */
…
@media all and (min-width: 128px) and (max-width: 640px) {
/* CSS styles unique to phone.css will be pasted below */
…
}
@media screen and (min-width: 641px) and (max-width: 800px) {
/* CSS styles unique to portrait.css will be pasted below */
…
}
@media screen and (min-width: 801px) and (max-width: 960px) {
/* CSS styles unique to table.css will be pasted below */
…
}
You end up with the following markup in the head section of your HTML documents:
<!– mobile devices: smartphones, tablets, e-readers –>
<link rel=”stylesheet” media=”screen and (min-width: 128px) and (max-width: 960px)” href=”mobile.css”>
<!– larger tablets in landscape mode, laptop and desktops –>
<link rel=”stylesheet” media=”screen and (min-width: 961px)” href=”full.css”>
In the end your web site will take a smaller bite off the end-user’s data plan. The optimization above also makes your site management easier.
