See The World As Your Users See It: Thoughts on Responsive Web Design

Responsive web design renders page content based on the needs of the user’s device, rather than forcing the device to adapt to the content of the page. This is in contrast to “traditional” web design, in which static HTML and CSS pages were written or generated in the same way for all users because most users used laptops and desktops.

m.arstechnica.com

Above: The Ars Technica mobile site, m.arstechnica.com.

As more and more phones gained web browsing capability, designers had to satisfy a new user group that was limited by its data plans and its tiny screens, and so the dedicated mobile site was born. Guy Podjarny calls them “mdot” sites, since the stripped-down sites are frequently named “m.something.com.” Smartphone and tablet users will often find themselves being redirected to one of these.

Benefits of Responsive Design

As the Responsinator demonstrates, there are now so many possible variations in screen size among commonly used mobile devices that it would be time-consuming to design a different site for each one. Though a mobile site will be usable in most cases, Ethan Marcotte suggests that responsive web design offers a better way to accommodate a growing diversity of device screen resolutions. Marcotte’s example sites make use of CSS media queries to determine whether or not a device screen exceeds some predetermined minimum size [6]:

    <link rel="stylesheet" type="text/css"
       media="screen and (max-device-width: 480px)"
    href="shetland.css" />
    <!-- Load shetland.css if device screen width <= 480px -->

Media queries (@media) are also used as conditionals within the CSS files, such that the page layout can be made flexible by applying logic that removes most of the layout restrictions beyond certain size limits. The result is a single stack of images and text at the smallest sizes, or a single row at the largest [6]. Therefore, a responsive site is a site that can, within limits, change its appearance to suit the viewer’s device.

The “flexible grid” of Marcotte’s demo relies on two things detailed in a 2009 article: a design that replaces absolute font sizes and <div> or container dimensions with relative <em> or percentage-based ones, and the formula target ÷ context = result [4]. A static grid layout can be redesigned into a dynamic one by using the T ÷ C = R formula, where the Target is the layout element within the Container and the Resulting percentage replaces the fixed-pixel length. The outermost container becomes 100%, as does the base font size. Ideally, the resulting page gives users the readability they require, and the designers the approximate ratios they desire.

As Marcotte explains here, the logic of responsive web design can also be applied to create dynamically resizing images, even in Internet Explorer 7 and 8. In IE 9, Firefox 3+, and other recent browsers, the max-width property is all that is needed, while IE 7 and IE 8 use width:100% instead. Both pieces of code result in images that do not overflow their containers, regardless of the size of that container [5]:

/* IE &gt; 8, Firefox &gt; 2, etc. By Ethan Marcotte. */
img,
object {
     max-width: 100%;
}
/* IE 8 and older. By Ethan Marcotte. */
img {
     width: 100%;
}

Responsive web design techniques are compatible with most screen resolutions, and they are also compatible with most recent browsers. Marcotte claimed that the media query techniques in his 2010 article were compatible with Safari 3, Chrome, Firefox 3.5, and Opera 7, as well as Safari Mobile and Opera Mobile [6]. Microsoft claims that IE8 and later can use image resizing, and that IE9 partly supports media queries; full media query support is promised in IE 10 [1].

The modern.ie website.

The modern.ie website, which provides testing tools and virtual machines with old browser versions, represents Microsoft’s acknowledgement that it is harder to design for browser versions that only work on one version of one operating system.

Difficulties of Responsive Design

Two pitfalls of responsive web design originate from its dependency on dynamic resizing, and its origins in Ethan Marcotte’s flexible grid system. As Max Luzuriaga explains, though solid colors will scale, things like gradients, textured edges, and image backgrounds do not scale well as a page shrinks or expands [3]. Likewise, image scaling takes place based on container size with no ability to detect which parts of an image are meaningful, as opposed to a static layout that emphasizes certain images’ locations. The other issue is that Ethan Marcotte’s grid-based method requires that all pages be designed around a grid system in order to scale with it as it changes size [3].

Though Marcotte’s T/C = R conversion process is simple, applying it to an existing site is a complex process. Designing a responsive site that serves the needs of both mobile and desktop users needs to take into account the different things each group expects from the site. Mobile sites should display the bare minimum of information and functions to begin with, to take advantage of limited screen space and patience [2]. Mobile users probably expect to find the content they need quickly. Recklessly applying T/C = R to the desktop site may not be the best way to create the mobile site.

Guy Podjarny raises the criticism that the more complex scripting required for a responsive site causes mobile browsers to load a page more slowly. While a mobile (“mdot”) site has a minimum of content and scripting so as to reduce the amount of data that needs to be transferred, loading a responsive site requires a mobile user’s device to load the entire HTML file even though most of its code will not be executed. Even if the code can be optimized to avoid using excess resources, this just makes the code more complex and likely more difficult to maintain [7]. The problem is that responsive web design represents a tradeoff of performance (the time spent to process the conditional media-query-based scripts) to improve the usability of the interface. Both performance and usability are important, and in the end, as Guy points out, a horrible-looking but fast-loading text-only site causes users to “very quickly realize they should go to another website [7].”

Lastly, responsive web design does not work on older, less standards-compliant browsers. Ethan Marcotte suggests the use of CSS and Javascript workarounds for Internet Explorer < 9, Firefox < 3.5, and Opera < 7, and states that his fluid grid techniques should still work even if the media queries do not [6]. Since most major desktop browsers have supported CSS2 since 2009, all but the most cutting-edge CSS should function correctly, and the older browsers will fade from use over time.

Conclusion

Though I personally have little web development experience, I have used many mobile sites and recognize some of the potential problems with a pure responsive approach. I usually use mobile browsers to view content, not to submit or create it. When confronted with a slow-loading page, I tend to give up after about thirty seconds if it looks as if it still has not started to render. Though being able to fill out complex forms and use the same features as desktop users sounds nice, if it comes at the price of the entire site rendering slowly because it has been redesigned as a responsive site, I would rather the developer stick with the existing mdot site. Responsive web design, like any other major update or upgrade, has to be done carefully.

At the heart of the shift from static to responsive web design is the recognition, rooted in the ever-shifting resolutions of mobile and desktop computing devices, that the age of the “one true user experience” is over. Now that standards compatibility has become more common in the major browsers, responsive web design, it is at last possible to design sites that display reasonably similarly on all desktop and most mobile operating systems. Anyone who designs web applications must now be able to cater to a variety of users on a variety of devices, rather than expecting the user’s device to comply with any one display standard. Whether responsive web design is workable for a particular project or not, taking the needs of a diverse user population into account is as possible as it is necessary.

Works Cited
[1] Katrien De Grave (2011, November). Responsive Web Design [Online]. Available: msdn.microsoft.com/en-us/magazine/hh653584.aspx

[2] Sabina Idler (2012, November). The opportunities and challenges of responsive
design
[Online]. Available: http://www.webdesignerdepot.com/2012/11/the-opportunities-and-challenges-of-responsive-design/

[3] Max Luzuriaga (2011, August 9). Designing for a Responsive Web [Online]. Available: http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/

[4] Ethan Marcotte (2009, March 3). Fluid Grids [Online]. Available: http://www.alistapart.com/article/fluidgrids

[5] Ethan Marcotte (2009, April 17). Fluid Images [Online]. Available: http://unstoppablerobotninja.com/entry/fluid-images

[6] Ethan Marcotte (2010, May 25). Responsive Web Design [Online]. Available: http://www.alistapart.com/articles/responsive-web-design/

[7] Podjarny, Guy (2012, October 9). Responsive Web Design Makes It Hard To Be Fast [Online]. Available: http://www.guypo.com/technical/responsive-web-design-is-bad-for-performance-there-i-said-it/

Advertisements