Nowadays, the webmasters of most websites must take into account the growing number of users browsing the web from mobile devices, smartphones and tablets.
The screen size and resolution of these devices is generally much smaller than that in the desktop and laptop devices that were taken as reference at the time the design of most websites was created.
Ideally, the design of a web site should be responsive, detecting the characteristics (screen size, resolution) of the device and adapting the layout consequently. The first step in this direction was the specification of the viewport meta tag, thas has already been explained in other articles in this blog. Currently, a more precise control on the responsive layout can be achieved using CSS media queries. This technique allows the designer to setup sets of CSS rules specific for different screen resolutions, device orientations, etc. In this way, the design can be made to adapt to different devices using the same HTML code for the page.
This post gives an overview of the usage of CSS media queries in the design of a web site.
Continue reading »