Mobile development and responsive design are frequently mentioned these days. The most widely used technique for responsive design is media queries, a CSS3 extension of the media types frequently used in HTML4 and CSS2.

Here is a simplified example which hides an element if the browser device has a max width of 500 pixels:

@media (max-device-width: 500px) { .sidebar { display: none; } }

There are lots of things to consider, such as resolutions and variations (for instance have a look at Andy Clarke’s Hardboiled CSS3 Media Queries). Media queries are not supported by IE8 or older, but I guess we can live with that. When used correctly, media queries can be a powerful tool.

Media queries are indeed a nice asset when it comes to CSS, but the technique is only part of the solution. Media queries will not automatically prevent the browser from downloading parts of the page which may be superfluous on mobile devices, something the developer needs to consider when creating mobile adaptions.

Many external scripts are quite large, which can be a problem. The minified and Gzipped version of JQuery is about ten times smaller in filesize than the regular version. It could also download a lot of images which may be unused on certain devices.

It would be nice to have a media query equivalent for JavaScript and other resources. There are some work-arounds, such as the one described by Peter-Paul Koch in Combining media queries and JavaScript, but I hope this area will improve in the future.


No comments yet.

Leave a reply