A while back, I compared the differences between mobile and online marketing. Among the topics covered in that post, we looked at the need to optimize websites for the mobile experience. Over the past couple weeks, I’ve been researching a different approach to mobile website optimization, responsive web design (RWD). I even sat down with our graphic designer, Alice Chein, to talk about this relatively new approach to web design.
What is Responsive Web Design (RWD)?
Exactly as its name suggests, RWD enables a website to ‘respond’ to user behavior and environment based on screen size, orientation, and platform. Sites built using RWD dynamically adapt to the parameters of any device that accesses the site. As a user switches from laptop to tablet to smartphone, the website should automatically switch to accommodate for resolution, image size, and scripting abilities, eliminating the need for a different design and development for each new device.
In addition to screen size, RWD requires site developers to take into consideration the needs of site visitors. For example, when a visitor comes to your site using a mobile device, you must take into consideration things such as what they would want to see first and the size buttons will need to be for easy clicking on a mobile device.
How does it work?
RWD consists of a mix of flexible grids and layouts, images and an intelligent use of HTML5 and CSS3 media queries. Media queries are used to determine how a site is laid out depending upon device and features including width, height, orientation, aspect-ratio, resolution, and more. When a user accesses a website using a particular device, the media queries trigger the site to display with the correct layout.
The layout of the site adapts within a flexible grid-based layout. Traditional sites and layouts utilize pixels for adapting sizes and laying out margins and spacing. With RWD, flexible grids use percentages to scale aspects of the site to fit on different screens. These grids also allow different sections of a site to move from one position to another to better fit a screen (such as moving a navigation bar from the left hand side in a computer browser to the top in a mobile browser).
As the alternatives to RWD are either not optimizing a site for mobile or creating multiple versions of a site, many regard RWD as the path forward for web development. And, with the growing number of screen sizes your site is being viewed on, RWD is definitely the most resource-effective strategy. Another great benefit is the impact RWD has on search, but more on that in the future (hint: Google prefers RWD).
For a more in depth understanding of Responsive Web Design, check out the resources below.
Examples of RWD sites: Media Queries
Guidelines: “Responsive Web Design: What it is and How to use it”
The Good and the Bad: “Responsive Web Desgin: Pros & Cons”