responsive design is hot lately, and justly so. making your website or email more accessible for visitors, however, can have negative consequences. visual content is not necessarily responsive visual content. how can we adapt our beautiful content for a responsive internet?
responsive design and visual content are both intended to increase the effectiveness of communications by making content more accessible. historically, however, visual presentation has optimized content for understanding in a single, static format. responsive design, on the other hand, uses multiple formats to accommodate the ways users access that content. companies like lemon.ly and tools like chartist are starting to provide ways to ensure all your content is effective on any screen size.
‘oh the irony’
a twitter message from john haydon started me thinking about the intersection of these two online design trends. I saw the tweet on my phone and clicked through to view the promised infographic from verve, a british agency. the graphic adjusted to fit the width of my phone’s browser. unfortunately, the copy in the resulting image was all but impossible to read without zooming in and panning from one section to another. I replied back to john’s tweet, commenting on the irony of having to zoom to read how good design minimizes the need to zoom.
thanks, edward tufte
visual content has been hot for a long, long time. the saying “a picture is worth a thousand words” dates back only a century, but the idea probably started the day written language moved beyond pictograms. tufte’s classic the visual display of quantitative information uses examples dating back centuries to support the premise that good graphic design is at once the simplest and the most powerful method for analyzing and communicating statistical (i.e., “big”) data. online studies only add to the conclusive evidence that pictures convey information more effectively than words. (strictly speaking, copy also qualifies as content that is viewed, but the phrase is commonly used to describe a combination of visual elements. text, if included, is formatted for visual impact).
tufte’s examples of visual content, along with representations from cave paintings to the verve infographic above, optimize content for meaning in a single, static format. responsive design for web and email focuses on increasing the number of users who are able to view the content, no matter what device/screen size they are using. if you compare a site that has switched from a non-responsive to a responsive design, it is usually not as styled from a cosmetic design perspective as its predecessor. on the other hand, it’s not butt-ugly, and content is equally easy (or easier) to reach on a traditional browser and much easier on a phone or tablet.
making all content responsive
many of the responsive frameworks take the first step toward fully responsive design by scaling images to different sizes. if the graphic in question is meant to be viewed on a larger browser canvas, however, scaling down may defeat the communications goal. just as the page design responds to screen size, so too must the graphical content. lemon.ly, a design shop deep in the badlands of south dakota, has started to crack the code with infographics built like pages:
on desktop
on phone
It’s not clear whether lemon.ly’s responsive infographics can be embedded into other pages, but I expect this functionality will be coming soon. another option for the roll-your-own set is chartist, a tool that uses javascript to let developers make charts (and presumably any image in svg format) do all kinds of nifty stuff with css. the trick here is creating the graphic elements in the page rather than adding them – “in the dom,” as the developer puts it. gion kunz, who developed a similar solution at cambridge technology partners in 2013, elected to make chartist open source. here’s a five minute video where he explains how to use the tool. my hypothesis that css can be used to make other image elements and layout responsive is based on the ways kunz tweaks the figure in the image:
help your graphics catch up with your web design
interesting stuff, and clearly things are going to move fast as responsive visual content catches up with responsive design. no matter what method or methods win out, you will want to revisit your most popular visual content and update it to replace it or link to a responsive version.
