Media Queries in Responsive Web Design

Responsive web design or RWD is an approach to web design in which a site is designed to provide an optimal viewing experience, i.e. easy navigation and reading with minimal resizing, panning and scrolling across a wide range of devices. Web designers have reached a point where it is virtually impossible to keep up with the endless screen resolutions that pop up as new devices are continuously being produced. On the other hand, clients are demanding websites that cater for all the available devices. No one wants to suffer the consequences of their site being inaccessible to visitors from one device.

The responsive web design approach suggests that the design and development process should be geared towards responsiveness to the user’s environment and behavior; both of which are often influenced by or related to platform, screen size and orientation. The practice involves using a mix of flexible layouts and grids, images and intelligent use of CSS media queries. As the visitor switches from using their desktop to their tablet pc, the website should automatically adjust to accommodate for the reduction in resolution, scripting abilities and image size. In plain language, responsive web designs aims at providing websites that will automatically respond to the user’s preferences. This eliminates the need for the design and development of a different version of the website for every new gadget that is released into the market.

Website Designing

Media queries are the most import pillar is responsive web design. Without them, fluid layouts will struggle to adjust to the numerous screen sizes and devices on the market. They can appear cramped on mobile devices chunky on the large, widescreen display. Media queries help adapt the site’s typography to the resolution or the device.

Media query techniques

Mobile first

This responsive design technique includes first developing a simple mobile layout then modifying it progressively as screen size increases. This approach is meant to ensure that only the necessary and supported files are loaded. It provides a good fallback that ensures support for devices that don not offer support for media queries like Opera Mini, Windows Mobile and older Blackberries.

Conditional Internet Explorer Style Sheets

This is one of the most popular techniques used in responsive sites. Instead of using support polyfills for media queries, simply load the same style sheet you are using for browser that supports media queries for IE. This often involves loading a basic stylesheet to set up a multi-column layout for big screens. It is a simple, yet effective way of supporting IE while at the same time supporting non JavaScript enabled mobile devices since it loads a light linear layout for basic feature phones.

A fine example of such a site is http://huffduffer.com/. It is a mobile first approach but with an extra column for screen width above 480 pixels

Respond.js

Respond.js is a lightweight polyfill that is aimed a browsers that don’t offer support for CSS3 style media queries. Respond.js parses files quickly without the need for additional libraries. However, the speed and size comes at a significant cost. Respond.js is not a full featured solution; it only provides the bare minimum requirement for responsive layouts to work. The script offers support for the max-width and min-width queries, but neglects other queries like device-height, device-width, aspect ratio orientation, resolution, color or monochrome. However, it does detect high resolution mobile devices like high end smart phones and non color handheld devices like the kindle. There are a number of caveats when it comes to using Respond.js. It should only be used when-

1) Desktop support is the primary concern
2) You don’t have non JavaScript users who would otherwise have to view un-optimized pages.
3) You will only be querying the browser’s height and width.

An example is http://aaronweyenberg.com/, a desktop centered website that has a basic layout.

CSS3-MediaQueries-js

Unlike Respond.js, CSS3-MediaQueries-js supports all the media queries in css3. When using it, you only have to tick the Internet Explorer support box and it would offer support for all browsers that don’t support CSS3media queries. However, this script is not as fast as Respond.js and parses CSS at a much slower pace. It also comes in a hefty 15kb file that takes time to load. Yepnope {http://yepnopejs.com/} can be used to load the file whenever media queries are not detected.

However, if you are developing for mobile first, you should add a minimum-device width condition to the Yepnote [http://yepnopejs.com/] query. This keeps the hefty file from loading on smaller screens that don’t need it.

CCS3-MediaQuery should be used if;

1) You don’t have many feature-phone users in your audience.
2) The website can accommodate the 15kb file loading hit.
3) You need to use advanced media queries, not just simple pixel width conditions. Example: hicksdesign.co.uk, a site that uses complicated media queries apart from the simple height and width.

ConclusionWith the explosion of mobile commuting, responsive web design is the only way forward. Media queries are the ideal tools to improve the browsing experience on different devices but it is important to remember that not all devices support them. It is therefore important to utilize the tools like Respond.js to ensure that every user gets a satisfactory experience when visiting the websites.

Author Bio: Terry Low is published author and technology columnist with the Monterey County Herald. He along with his partner Clarence Low, co-founded Byte Technology – a highly-successful denver web design firm based out of Colorado.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top