Did you ever wonder how big websites like Microsoft or Apple can fit your phone screen without lacking any important page?
When you visit a website, you expect it to somehow magically work even on tiny screens. Like often in life, there is no magic trick, just someone who did the work to adapt the websites, one by one, to phones, tablets, and bigger screens.
Adapt web content and applications to different screens
During the smartphone takeoff decade, this came to be called responsive design. Websites adapt nowadays to different screen resolutions, showing and hiding more or less of the information, as the screen size increases or decreases.
The second step was to start designing the mobile-first. This forced designers to focus on the most important jobs to be done by the visitor, and push the rest of the pages away until needed.
The third step was taking the same approach to web applications. As websites became applications and gained more and more features, their interface had the same problem as the content websites. Interactive pages, maps, data entry screens, they all needed to adapt to smaller and smaller screens. When responsive design and mobile-first techniques are applied to web applications, these are called Progressive Web Applications (or PWA).
The common tactic during these three web (r)evolutions is unbundling. This means decomposing a web site or application in features, tasks, or jobs to be done. Then, to expose the most important ones first, and make the others available only when needed.
One tiny chart can start in your dashboard, then move to sales and marketing
You can use the same unbundling tactic for your graphics. You can start with a tiny chart and add more and more details as you adapt it to bigger layouts. Or you can start from a long scrolling infographic, unbundle it, and use the composing graphics in order of importance and as they are fit for other media.
Let’s take one graphic, the smallest possible, and see how it could be used in a different medium.
|Use and reuse list||Type||Where to use it|
|2. Landing page||Marketing||Website|
|3. Printed brochure||Marketing||In real life|
|4. Brochure PDF||Marketing||Website/Email|
|5. Roll-up, Poster, Book||Marketing||In real life|
|6. Presentation||Marketing||In real life/Web call|
|7. Flyer||Marketing||In real life|
|9. Support email||Support|
|10. Knowledge base||Support||Website|
|11. Bite-sized content||Social||LinkedIn, Twitter, Instagram…|
Apart from Marketing and Sales, Support and R&D are other possible users of good data visualizations. Even better, you can transform your graphic into live interactive charts, and make them part of your software products.
|Use and reuse list||Type||Who can use it|
|1. Administration dashboard||Software Product||Customer admin|
|2. Customer dashboard||Software Product||End-user|
|2. Operations dashboard||Software Product||Operations|
You can use the above uses and categories to audit your graphic. Work on it and complement it with needed parts so that it becomes appropriate for each medium and usage. This will help you improve the main information of the graphic and make sure you can reuse it to increase its value for your business.
Last call to add your name to receive the Tiny Graphics PDF for free!
The book will help you create your first graphics based on your own data, and find inspiration for coming up with new visualizations, with examples and tiny practical steps.