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.
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.
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”:
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.
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.
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.
*Originally published on NetNewsCheck.
Devanshi Garg is COO of Icreon Tech.
