7 Essential Resources for Responsive Web Design

written by aext on September 18, 2011 in Web Design with one Comment

A large percentage of the world’s population owns a web-capable mobile device nowadays, with nearly 130 million people using iPhones alone. The sheer variety of mobile devices available poses a unique problem for web designers who, up until now, have been comfortable designing for standard desktop resolutions. Responsive design was conceived to solve this problem, and offers a way for designers to create dynamic websites that look great on multiple screen sizes while maintaining usability and readability.

clip_image002

Responsive design depends on new methods for structuring and styling websites. Through fluid grids, media queries and CSS techniques for creating flexible multi-media, you are able to transform a single website into a mobile-ready application.

I have compiled seven essential resources to help you streamline your process and ensure the result is responsive, adaptive, and standards compliant.

1. Responsive Web Design, by Ethan Marcotte

clip_image004

To produce a flawless responsive website requires learning a little about how it was developed, how it is applied and how to master the principle techniques for executing it in efficient and creative ways.

Author and Responsive Design "inventor", Ethan Marcotte explores fluid grids, flexible images and CSS3 media queries in this beautifully laid out book, which you can grab for a mere $9. Several examples are included that demonstrate the techniques in practice and will leave you with a thorough understanding of each topic.

2. Mobile Boilerplate

clip_image006

The Mobile Boilerplate is a complete web design framework developed by Paul Irish and his legion of open source developers, who brought us jQuery and Google Chrome. The framework consists of an HTML5 template, dependent script libraries and full set of stylesheets. Critical extras such as a User Agent Detection .htaccess file, mobile sitemap and mobile icon templates enhance the package and make it the most complete and robust mobile frameworks available. Best of all, it is free, cross-browser tested, semantic and standards compliant.

If you prefer to work with a more lightweight solution, honorable mentions include the Golden Grid system and Skeleton frameworks.

3. Mobile Screen Resolution Database

clip_image008

This database, hosted by Cartoonized, holds and exhaustive list of known mobile device brands and their screen resolutions. While other databases offer full spec sheets on various device types, this database lists only what you need and provides a fast way of searching or sorting. You may choose to view tables sorted by resolution or brand, or select a specific brand to narrow your results.

Defining a list of device resolutions you wish to target helps you determine how best to layout your design and build your media queries.

4. Hardboiled CSS3 Media Queries

clip_image010

If you’re not familiar with media queries, they are a CSS technique for detecting a visitor’s screen size and are used to apply a specific set of CSS overrides to scale, hide, move or change website elements.

Veteran designer as CSS innovator Andy Clarke offers an array of advanced media query placeholders that you can use for targeting popular devices, screen sizes and orientations.Each example is designed to compliment class-specific media queries and viewport tags already defined in your markup, and can be appended to an existing stylesheet.

5. Lettering.js

clip_image012

You can apply CSS styles to every text element in your website to control weight, font and style, but anything more advanced and you may be tempted to use graphics. Since the goal of a mobile-first approach to web design is minimizing load and ensuring compatibility, it is better to use actual text wherever possible.

The amazing letter.js script is a jQuery plugin developed by Paravel that gives you control over kerning, rotation and individual character effects. It will take the text content of any element you define and turn it into individually classed spans, which allow you to apply specific styles to each character. When combined with mobile-optimized properties such as percentages and ems, your text is guaranteed to scale better on smaller screens.

6. Imgsizer.js

clip_image014

Text and layout get the most attention in responsive design, but if you are developing a portfolio or image gallery, the images need to scale as well. A technique used in the past was to set percentage dimensions in the stylesheet, but this causes a problem in Windows, which renders re
sized images jagged and pixelated, even when scaled down with media queries.

Ethan Marcotte developed this responsive image solution for producing smooth and clean images free of rough effects, and the resulting jQuery plugin is essential for any responsive design project where images are a focal point.

7. Matt Kersley’s Usability Tester

clip_image016

You probably don’t own one of every device on the market, so a good testing platform is necessary to ensure your design performs the way you expect it to. There are actually a handful of great web applications out there for testing viewport and media queries, each with different features and drawbacks. Where Matt Kerley’s app excels is in its simplicity, reliability and speed. Enter your URL and select width or device size, and see results on a single page. Since this app does not reproduce your website as a screenshot, you are able to debug directly from each frame using any browser plugins such as Dragonfly or Firebug.

For similar solutions, check out Protofluid and Screenfly.

Author – Vail is a long-time writer, designer and copy editor with a vibrant background in corporate business writing. When she is not hard at work designing something, she loves writing for Wix.com, the free website builder.