Media Queries: An Evolution in Web Design

Why We Now Need Modular Design

If you own a website in the twenty-first century, you can almost guarantee that it has been or will be viewed on a device that is not a desktop PC. People are turning to other devices more and more when surfing the net and this is reflected in many web analysis tools that now check your website for compatibility with mobile devices. Even Google Analytics now tells you how many times your site has been viewed on a mobile.

Creating one design that will be viewed correctly on many different browsers has always been a necessity for web designers; however, it is becoming ever more important for them to design their work to be compatible with multiple devices.

Modular design is a relatively new idea in the web design industry, though it is becoming popular. The basis of the idea is to divide your website into sections and prioritise those sections in order of importance. When you have established an order that best suits your user’s experience, you display more or less of the modules depending on the device’s screen size and compatibility. This effectively creates a modular site that constantly reassesses its design for maximum user experience.

User Experience Is Key

In 2012 the quality of user experience, or UX, is going to be more important than ever, with the mobile device market releasing a vast variety of new and exciting products and designs.

With websites being viewed on more types of devices than ever before, today’s web designer is going to have to think more laterally about their website designs. Web designers will potentially be coming up with multiple layouts for the same site in order to compensate for a vast array of screen sizes. However, if this is done well, a website’s quality and functionality will appear seamless across all device types.

Where Media Queries Come In

Media queries allow cascading style sheets to check for the conditions of particular media features when accessed by a device. This allows for a single style sheet to contain multiple styles and allow for responsive layouts.

Separate styles for multiple devices can be stored in a single style sheet and the CSS can effectively run an ‘if’ statement to enquire as to which styles to apply.

With the introduction of devices such as the iPad, and a recent increase in the popularity of surfing the web on your mobile phone, 2012 is almost certainly going to see the creation of many more responsive web designs. By utilising this simple technique, it is possible to design a more compatible, more ergonomic website that will look great and function brilliantly on any device.

The potential that media queries hold is enormous, and with their help, web designers are now far better equipped for the future. If there was ever a good time to learn more on media queries and how to utilise them effectively, that time is now.

Guest post by: Will Newmarch is a contemporary web designer based in Sussex, England. His interests lie in the more modern aspects of web design and how it is developing in this new age of technology. He has recently obtained an honours degree at Brighton University.

• Responsive Web Design book by Ethan Marcotte
• Collection of Inspirational Websites Using Media Queries and Responsive Web Design
• Responsive Web Design - Most Complete Guide
• Responsive Web Design Techniques, Tools and Design Strategies
• Responsive Web Design Templates and Frameworks
• 4 Ways HTML5 Is Better For SEO
• 5 Top Web Design Trends for 2012