Planer

  • Home
  • Chapters
    • 01: Introduction
    • 02: Visual Ethics
    • 03: Research
    • 04: Design
    • 05: Visualization
    • 06: Maps
    • 07: Diagrams
    • 08: Motion
    • 09: Case Studies
  • Examples
    • Maps
    • Charts
    • Diagrams
    • Data Visualization
    • Interactive Graphics
    • Motion Graphics
  • Resources & Exercises
  • Expert Interviews
  • Tutorials
    • Illustration
    • Motion graphics
    • Data visualization
    • GIS
    • JavaScript
Home 2016 March 19 Responsive design for graphics

Responsive design for graphics

responsive

Accessing interactive graphics on small, smart phone screens versus a large desktop computer screen results in two very different user experiences. Responsive design – designing content to provide an optimal viewing and interaction experience across a wide range of devices – is a common way to address this. In other words, your graphic may be restructured or even simplified for smaller screens so that type and visuals are easy to read and interaction is comfortable and easy to achieve. Additionally, buttons and other interactive elements may be redesigned to better function in a touch-screen environment.

This responsive graphic created by the Boston Globe restructures to adjust to smaller screen sizes. The navigation changes from a vertical menu to a single button that allows users to click linearly from candidate to candidate. This adjustment makes the graphic more space conservative and easer to navigate on a small screen.

Click here to explore the Boston Globe’s campaign donation graphic.

Mar 19, 2016 jennpal
Where Are Ü Now visualizationNYT Lasik interactive
Recent Posts
  • Interactive Map: Sierra Nevadas
  • Data Visualization: Plotting Emotion
  • Information Graphic: What Time Will the Polls Close?
  • Data Visualization: The Complete History Of The NFL
  • Aortic Stenosis
Recent Comments
  • Mr WordPress on Hello world!
Archives
  • April 2017
  • January 2017
  • November 2016
  • October 2016
  • September 2016
  • March 2016
  • May 2015
Categories
  • Charts
  • Data visualization
  • Data Visualization
  • Diagrams
  • Examples
  • Exercises & Resources
  • Expert Interviews
  • Featured
  • GIS
  • Illustration
  • Interactive Graphics
  • JavaScript
  • Maps
  • Motion Graphics
  • Motion graphics
  • Tutorials
  • Uncategorized
Meta
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
Footer Sidebar 1

Drop a widget on "Footer Sidebar 1" sidebar at Appearance > Widgets page.

Footer Sidebar 2

Drop a widget on "Footer Sidebar 2" sidebar at Appearance > Widgets page.

Footer Sidebar 3

Drop a widget on "Footer Sidebar 3" sidebar at Appearance > Widgets page.

2016
Planer theme by Dankov