• the qualified yes
  • about
the qualified yes
Home » how to » don’t forget responsive visual content

don’t forget responsive visual content

responsive visual contentresponsive 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:

lemonly_responsive infographic on desktop

on desktop

lemonly responsive infographic on phone

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.

 

Related articles
  • Using Infographics to Deliver Your Message
  • The Responsive Designer

like it? share it!

  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to email a link to a friend (Opens in new window)
  • More
  • Click to share on Pocket (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to print (Opens in new window)

if you liked this...

Posted in how to, other | Tags: responsive design, responsive images, responsive visual content, visual content | 2 Comments
« lights! camera! call to action!
“is inbound marketing profitable?” wrong question! »

lately

  • Zoom Video Settings for Teachers
  • don’t lose sight of the card
  • dermatology
  • REPOST: How our morals might politically polarize just about anything
  • images in google drive not showing up in google photos?

lens

_DSC5739_17For a LifetimeIphiclides feisthamelii (6)
More Photos

topic search (tags)

  • Facebook
  • twitter
  • social media
  • linkedin
  • privacy

feel free to share

Creative Commons License
creative commons attribution-share alike 3.0.

Archives

  • the qualified yes
  • about
CyberChimps ©2022