Was Yahoo Late to Mobile?
This visualization is from the Harvard Business Review article The Decline of Yahoo in Its Own Words. This visualization includes two drastically different designs (a line chart and a heatmap) depending on the device context. Both visualizations are static and both are annotated with the same information. To better understand the responsive techniques used, we performed an open-coding process of the changes between the desktop and mobile versions of the visualization. To view the mobile version of the visualization, we used the Device Mode provided by Chrome DevTools to simulated an iPhone X device in both a portrait and landscape orientation. Take a look at the article yourself, and the codes we generated here:
Desktop vs. Mobile (Portrait)
Code |
Action |
Component |
change visualization design (line to table) |
modify |
view |
wrap subtitle text |
reposition |
title |
modify color encoding |
modify |
marks |
swap axes |
reposition |
marks |
reposition text annotations |
reposition |
labels |
remove axis ticks |
remove |
axis ticks |
remove count axis |
remove |
axis |
add count labels |
add |
labels |
add company axis |
add |
axis |
Desktop vs. Mobile (Landscape)
Code |
Action |
Component |
change visualization design (line to table) |
modify |
view |
wrap subtitle text |
reposition |
title |
modify color encoding |
modify |
marks |
swap axes |
reposition |
marks |
reposition text annotations |
reposition |
labels |
remove axis ticks |
remove |
axis ticks |
remove count axis |
remove |
axis |
add count labels |
add |
labels |
add company axis |
add |
axis |