The Growing Intricacies of Responsive Web Design

By Devanshi “Nikki” Garg

Published: September 23, 2013

“While most critics would agree that responsive Web design (RWD) won’t be going away any time soon, it is important to realize that the approach has not yet fully matured and is continuing to evolve.”

Web design trends often take off rapidly, then quickly fade to obscurity. While most critics would agree that responsive Web design (RWD) won’t be going away any time soon, it is important to realize that the approach has not yet fully matured and is continuing to evolve. As the Web development community continually refines its techniques and creates new approaches, responsive Web design promises to become an increasingly popular solution to delivering holistic design for the mobile ecosystem. The approach is here to stay—and it’s about to get a lot more intricate.

New approaches are beginning to emerge for controlling the quality of product images, blog posts, and news stories and improve performance on responsive Web sites. From responsive images to responsive content to server side responsive Web design (RESS), the methods and techniques for optimizing multidevice accessible Web sites are becoming more complex, yet more effective. In this article, which is Part 1 of a two-part series on responsive Web design, I’ll describe some of these techniques.

Adaptive and Responsive Images

“Responsive sites use media queries to communicate optimal image scales for particular screen resolutions.”

One of the major challenges of implementing a responsive Web site is maintaining the integrity of images. Responsive sites use media queries to communicate optimal image scales for particular screen resolutions. After receiving acknowledgment that a users’ device is a tablet, desktop, or smartphone, a Web site displays images using the optimal size parameters for the particular device. This becomes more intricate when dealing with Retina-display devices, or HiDPI displays. Images that display clearly and crisply on non-HiDPI screens can appear blurred on Retina displays. Paula Borowska of Designmodo offers up some crafty solutions for this issue:

“There is a possible solution to this issue, which is to use an image at twice its desired size and display it at 50% of those dimensions.”

However, looking at this problem from a usability standpoint, oversized images can lead to excessive load times and slow site performance. In her article on Smashing Magazine, Sherri Alexander explored multiple issues that relate to the prevention of image distortion when implementing responsive Web design. According to Alexander, excessive preloading results in suboptimal performance due to the fact that “browsers reload all of the images they can identify,” leading to obvious speed and performance issues. As the Web in general continues to adopt aesthetics that employ heavy use of photos and other images, preloading of images poses a potential issue for users using slower, wireless connections.

Responsive Content and the Reader Experience

“A high-quality information architecture is one of the most valuable properties of a Web site and should always influence decision making in responsive design.”

Businesses across the board use content as a way to drive conversions, spike Web traffic, and attract leads. Placing well-structured, well-organized content strategically throughout a site, using a deliberate hierarchy, increases user engagement system wide. Thus, a high-quality information architecture is one of the most valuable properties of a Web site and should always influence decision making in responsive design.

Media queries and CSS preprocessors are highly effective means of adapting sites to the varying screen widths of smartphones and tablets. However, a sole reliance on them and a lack of critical analysis will invariably result in disparate layouts that lack consistency or familiarity. In particular, content shifting can hamper information hierarchy and result in a less impactful user experience. Web designer Trent Walton has succinctly described this issue, which he refers to as “content choreography”:

“Media-queried responsive and adaptive sites afford us the ability to rearchitect content on a page to fit its container, but with this exciting new potential come[s] equally exciting challenges.”

A design team’s job doesn’t start and end with fitting content to the viewport. It is not enough just to adapt the layout to the viewport’s width. As Walton points out, when content shifting is implemented in a haphazard fashion, the impact on users is akin to “someone rearranging the groceries in your pantry every time you closed the door.”

Over the long term, designers and developers should focus on providing the most consistent, contextual experience possible across all device types, because even though Web browsers and tools have greatly increased our ability to modify layouts based on the viewport size, they still can’t organize information based on its relevance to brand and company hallmarks. This, most assuredly, is a problem that goes far beyond responsive Web design.

Server-Side Responsive Design (RESS)

“Server-Side Responsive Design (RESS) is an approach to developing Web sites that are optimized for multiple devices, enabling faster load times by avoiding the loading of unnecessary components.”

Server-Side Responsive Design (RESS) is an approach to developing Web sites that are optimized for multiple devices, enabling faster load times by avoiding the loading of unnecessary components. Luke Wroblewski describes the process as “optimized rendering for specific devices”:

“A single set of page templates define[s] an entire Web site for all devices, but key components within that site have device-class specific implementations that are rendered server side.”

Essentially, RESS provides one alternative to scaling images and incorporating the recontextualizing of responsive content. While, responsive design loads and alters Web content on the client side, RESS does the necessary work on the server side to decrease the work that a browser must perform.

Each version of a Web site—whether for smartphone, tablet, or desktop—loads the appropriate template, which incorporates consistent components that get loaded onto the device, while reserving room for unique elements for each device type that get downloaded from the server—for example, specific images, content, or functions. Dave Olsen has created a great visual explanation of this concept. While the solution is effective, it adds even more complexity to the process of designing a Web site to provide optimal experiences regardless of a user’s device type.

Should You Join the Responsive Bandwagon?

“Responsive design—while still evolving—feels like a trend that’s here to stay.”

As the Chief Operating Officer of a Web application development firm that’s been around for over a decade, I’ve seen dozens of trends come and go. I’ve witnessed the massive rise of client-side Java and Flash applications and, of course, their subsequent demise. I’ve marveled at how Ajax, JavaScript, and CSS3 have transformed interactivity from being proprietary to being standards based. And I can definitely say that, as we’ve implemented responsive Web design for our clients at an enterprise level, responsive design—while still evolving—feels like a trend that’s here to stay.

In the second part of this two-article series on responsive Web design, I’ll explore the impact of responsive design on business and operations.

- See more at: http://www.uxmatters.com/mt/archives/2013/09/the-growing-intricacies-of-responsive-web-design.php#sthash.Bkg5RhOx.dpuf

via UXmatters http://www.uxmatters.com/mt/archives/2013/09/the-growing-intricacies-of-responsive-web-design.php