Responsive Web Design

Posted by on Dec 17, 2011 in blog, copywriting | No Comments

What is responsive web design?

The term Responsive Web Design was coined by web designer Ethan Marcotte (http://unstoppablerobotninja.com/) in an article on A list Apart (http://www.alistapart.com), and it basically amounts to a new way of designing and developing websites to ensure that the design is optimized for all possible types of browser window displays, resolutions,  sizes and shapes as well across browsing platforms, using a combination of flexible or fluid grids, flexible images and CSS media queries. Marcotte qualified his definition by saying that:

“A responsive design is composed of three distinct parts:

  1. 1.      A flexible grid.
  2. 2.      Flexible images. Or more specifically, images that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).
  3. 3.      CSS3 Media queries, which optimize the design for different viewing contexts, and spot-fix bugs that occur at different resolution ranges.”

With the advent of smartphones, e-readers, netbooks and tablets, the number of screen-sizes and devices our websites are served to and displayed on are increasing exponentially as are browsing methods such as the use of touchscreens, game controllers, mice and keyboards. Thus as technology grows and changes so must our scope as designers. Responsive web design means a whole new way of working when designing, including using new features of CSS3 and tools like Javascript and PHP to ensure that websites are completely scalable from one device to another and from portrait to landscape on devices that offer both. For example, instead of using absolute values, scalable web design means using percentages and em’s.

Clients will obviously want designs that are accessible across a wide range of devices, and one option up until now has been to design separate websites for separate devices. While this still has its place in some scenarios, responsive web design offers an alternative to this.

Some of the basic tools and techniques needed to accomplish the design of a responsive website will now be examined more closely.

 

2. Features of responsive web design

Responsive Typography

Responsive typography means that your typography and its attributes scale to be optimally legible on the screen they are being read on and remain correctly positioned within the design structure. This means that when coding, you will use em’s and percentages instead of absolute pixel or point sizes so that fonts remain resolution independant. Using different stylesheets or CSS3 media queries, text can be altered to display legibly for the device the user is reading on.

There are also external tools such as Lettering.js (http://letteringjs.com/) which grant designers much greater control over their web typography (letter spacing, leading and kerning) by making font sizes flexible and FitText (http://fittextjs.com/) which makes heading sizes relative to the width of the parent containers and display devices, rather than relative to the other text, so that they fill space as they should.

Flexible images

As the name suggests, flexible images are images that scale with the size of the device screen. There are several ways to accomplish flexible images sizing, some of which are simple but more resource-heavy and others more complex but lightweight in terms of image load times.

Using just HTML and CSS, the width and height of an image can be set using the CSS max-width property. When set to 100%, images will be loaded to the site at their original sizes and then resized by the browser to fit the containers they are in (which with media queries will change depending on the device they are viewed on). The downside to this is that for smaller devices like mobiles, page load times can be unnecessarily slowed down by an image-heavy page or large images.

Another option is to crop images using the overflow: hidden CSS property, meaning only selected portions of an image will display on smaller screens.

Moving on to more complex methods of display, scripts like Javascript and PHP can be used to select from many versions of an image on a server and display them to the site depending on screen size and resolution.

Responsive web page layouts

The use of flexible grids is paramount to responsive web design. The flexible grid builds on the idea of liquid layouts and basically means that designers must stop using pixel values to define elements and start using percentages – all layout elements must be calculated as percentages relative to their parent containers.

CSS3 media queries are the crux of responsive web design and responsive web page layouts. They are applied to toggle the website layout width and height in response to the width and height of the user device and allow the designer to code any styling element to display differently depending on the size of the screen width or resolution it will appear on.

This means that a 3-column desktop website can become a single column mobile website by changing the layout and positioning of column elements using the media query inside a stylesheet or by linking to a completely separate stylesheet in the link tag, for example:

<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”example.css” />

This would link any device with a screen and display size of less than 480px to a stylesheet called example.css, and bypass the main website stylesheet altogether.

Testing and cross-browser support

Naturally, it is vital to test your websites across all the major browsers, both pc and mobile as well as testing them on as many devices as possible. Software applications such as Adobe Device Central are very useful for testing like this as it has a large library of device interfaces on which to display your design. Free tools like Web Developer (http://chrispederick.com/work/web-developer/) are also very useful for web development testing as they allow you to view your designs in many different window sizes.

When trying to be as wide-reaching as possible, there will always be gaps and shortfalls where things do not work across all the mediums you are trying to reach. In some cases, Javascript or other scripting fixes can be applied to compensate for browser incompatibilities, especially for earlier versions if IE or mobile devices which don’t support many of the newer features of CSS and HTML5 like the media query.

In some circles, these is a growing de-emphasis on the necessity for a website to look identical from browser to browser providing the site displays in a functional and aesthetically pleasing way. Naturally, those users with browsers that support features such as HTML5 and CSS3 will have a richer experience, but as long as the content of the site is accessible to all, the exhaustive amounts of time that can be wasted trying to get the site looking identical across all browsers can be bypassed by accepting the differences as they are.

 

3. Conclusions

Pros

Responsive web design is a good way to “future proof” websites against the ever-changing nature of the technology we use to view the web with. Its nature makes it adaptive and thus longer lasting in terms of the life-span of the website. It eliminates the need for different designs for different devices and thus saves time.

As opposed to a simple static design, a responsive design improves overall user experience by offering the user something he can view correctly over all his various internet access platforms, and possibly even makes the site accessible to more users that it would have been otherwise as so many users (especially in this country) have mobile internet access, but no desktop access.

It forces designers to think outside of the standard-static-website box, (which we should have been doing for a while now anyway) and expand the scope of our designs.

 

Cons

Different devices have different capabilities, and responsive web design on the whole does not seem engineered to design to the lowest common denominator (i.e. older, slower mobile devices).

CSS Media queries are applied only after all content has been downloaded, including images markup, scripts, etc, meaning that even if the display looks good across all devices, there will be bandwidth problems for mobiles especially in cases of image-rich sites. Only if smaller images are served to the mobile separately using scripting, will this problem be overcome.

In addition, CSS3 Media queries are not supported by most mobile handsets or by older web browsers, meaning that complex javascript workarounds may be necessary.

Responsive web design has been called a fad and a quick fix by some, who are in favour of device-specific development, saying that it is not possible to downscale a desktop website effectively and still get a pleasing outcome. Certainly, responsive design cannot make a website all things to all people and there is only so much that media queries can achieve. Due to the sheer number of different devices out there, a site is never going to look perfect on all of them.

 

The future

There is a place for responsive web design out there, but one needs to look very carefully at what the website is trying to achieve. Simply put, responsive web design is appropriate for certain websites and not appropriate for others.

For any standard run-of-the-mill website, having a responsive site is a great idea, but a before committing to the design, a detailed analysis of who visits the site, from where (what devices) and why, will help the designer decide whether going the responsive route is best, or whether designing a dedicated mobile site is a better idea. At the end of the day, the user decides the role responsive web design will play.

When a mobile user is after content and nothing much else, for example on a news website, it makes more sense to build a separate mobile site mainly stripped of images, giving it a better load time, and perhaps use responsive web design to tackle desktop and tablet devices.

In addition, in the case of large application websites like Facebook, it would seem evident that mobile apps are more appropriate than a resized version of the main site because the user can find and access what they want instantly instead of having to navigate around. The same would apply to image-rich consumer websites where the user wants limited and specific data that is easy to find. Instead of having him scroll around looking for things, building an appropriate mobile interface would probably be a better route.

I tend to agree with Kayla Knight from Smashing Magazine, that responsive web design is not the be-all and end-all answer to mobile and device web design, it is merely a concept and one of several options, which, “when implemented correctly can improve the user experience as technology evolves.” It is certainly more inclusive than the alternatives and will reach a wider range of web users. It is brilliant that using CSS3 and HTML 5 we can now build a site that will port from the oldest pc to the newest mobile device in a way that wasn’t possible 5 years ago, but I believe that mobile-specific sites or alternatively mobile apps, will also always have their place.

 

References

Ethan Marcotte clarifies his definition of “Responsive Web Design”. June 23 2011. David Cochran .09 September 2011. http://alittlecode.com/ethan-marcotte-clarifies-his-definition-of-responsive-web-design

10 Excellent Tools for Responsive Web Design.  Aug 3 2011 . Jason Gross. 09 September 2011. http://sixrevisions.com/tools/responsive-web-design/

Fit To Scale. May 10th, 2011. Trent Walton. 13 September 2011. http://trentwalton.com/2011/05/10/fit-to-scale/

Responsive Web Design: What It Is and How To Use It .January 12th, 2011. Kayla Knight. September 13th 2011. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Responsive Web Design. May 25, 2010. Ethan Marcotte. September 08 2011. http://www.alistapart.com/articles/responsive-web-design/

Understanding the Elements of Responsive Web Design. March 14, 2011. Jason Gross. 09 September 2011. http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design/

Responsive Web Design Techniques, Tools and Design Strategies July 22nd, 2011. Smashing Editorial. 09 September 2011. http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Foreground images that scale with the layout. April 24, 2009. Zoe Mickley Gillenwater. 13 September 2011.  http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/

Responsive Web Design – Stop and Think.  26 August 2011.  Anthony Grace. http://www.codersbarn.com/post/2011/08/26/Responsive-Web-Design-Stop-and-Think.aspx

Responsive Web Design, most complete guide. September 13th, 2011. WebDesignShock. 14 September 2011. http://www.webdesignshock.com/responsive-web-design/

11 reasons why Responsive Design isn’t that cool! August 24th, 2011. WebDesignShock. 14 September 2011. http://www.webdesignshock.com/responsive-design-problems/