Adaptive and Responsive Images
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
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.
