Thread on charts for mobile phones 🤳 📊 I'm sharing a few tips from a recent project where we adapted our own charts, initially designed for a US letter sized report. This is the cover page of the PDF report (the title was our suggestion 🖋️). 1/🧵 - ThreadSky

chezvoila.com • 152 days ago

Thread on charts for mobile phones 🤳 📊

I'm sharing a few tips from a recent project where we adapted our own charts, initially designed for a US letter sized report.

This is the cover page of the PDF report (the title was our suggestion 🖋️).

1/🧵

Comments

miskaknapek.bsky.social•87 days ago

thanks for a good thread

seblammers.bsky.social•152 days ago

This whole thread is great. Thank you for sharing this Francis!

I wonder what the target mobile screen width is that you optimize for? The mobile images you shared looked rather wide to me...

chezvoila.com•152 days ago

You're welcome!

We used 360 pixels for width.

seblammers.bsky.social•151 days ago

OK, that's pretty standard. Then it's maybe just the aspect ratio of the mockup or my eyes.

alrightpet.bsky.social•152 days ago

Completely agree we need to design online content for mobile phone access - for any many people, their smartphone is their main internet-connected device, for some it is their only such device.

chezvoila.com•152 days ago

First, a waterfall chart. I shared it here before to show how we used arrows to clarify the direction of the change and avoid using a legend.

The mobile version is better because we could place the labels directly on the bars. 🎯👌🏻

2/🧵

chezvoila.com•152 days ago

Second example: a table.

Just squeeze it? Indeed, but with a nuance. We removed the header for "Selected" because it was obvious enough and also we removed the separation line.

3/🧵

chezvoila.com•152 days ago

One of my favourite chart types: the abatement curve.

We split negative/positive cashflow. Better than squeezing, and also this chart is well known in the field, so we wanted to preserve recognition.

We created a separate legend because we couldn't annotate height/width directly on the chart.

4/🧵

aman.bh•152 days ago

This is my favourite example from the thread, I love how the legend was transformed. So elegant.

chezvoila.com•152 days ago

Very generous of you because I just noticed that I posted an incomplete version! Here it is with the full legend.

aman.bh•152 days ago

Oh, hehe. This is even better! Thanks for taking the time to share the entire thread. Bluesky's becoming worth it thanks to content like this.

chezvoila.com•152 days ago

A timeline is inherently horizontal until it isn't.

Rotating forced us to to create a separate legend to define the drivers. What you lose in one adaptation, you lose in another.

We also tweaked the way we show "Today".

5/🧵

chezvoila.com•152 days ago

Line chart and column chart are... left intact.

A bit of squeezing did the job here. Why make it complicated?

6/🧵

chezvoila.com•152 days ago

What do to of a large, unwieldy Sankey diagram?

First, rotate it to make it vertical.
Then, simplify. We removed the lettering of activities and assets.
Finally, squeeze a little, of course.

Done, it fits.

7/🧵

unamandita.bsky.social•152 days ago

I also find sometimes repeating elements (like legends) or breaking out specific parts of a chart that you want to highlight is helpful, so readers don’t need to scroll back up to see them again. The graphics in here are offer a good example: https://www.scientificamerican.com/article/how-to-understand-your-childs-screenings-for-autism-and-other-conditions/

unamandita.bsky.social•152 days ago

Agree on all points, especially the idea of flipping horizontally-oriented charts! And I'm with @sonjakuijpers.bsky.social on not forcing everything into one screen's worth of space.

Comments

Posting Rules

Reply