I neglected my visualizations web site, things made thinkable, for too long. Here’s what I did to bring it back to life:
- Fixed the aspect ratio
- Made it reactive
- Embraced SVG
- Started a mailing list
- Stopped reusing code
- Switched to newer fonts
- Reduced bloat
- Added social meta tags
- Started tweeting about it
- Quit my jobs
plus:
What I didn’t do
and:
The result
1. Fixed the aspect ratio
Back in 2010, people used computers with large, landscape screens.
So I made all my visualizations 960px wide and about 480px high.
Seemed like a good idea at the time.
I didn’t think about computers with small, portrait screens, soon to become known as “phones”.
From now on, all my visualizations will aim at an aspect ratio of 1:1, and will be properly scaled to fit any size of screen.
Mobile last... better late than never.
2. Made it reactive
Back in 2010, I decided to split the text below my visualizations into two columns for easy reading.
Easy reading on those large, landscape screens, that is.
I’ve now put in place a reactive design: two columns on wide screens, one column on narrow screens.
3. Embraced SVG
Back in 2010, browser support for SVG was patchy, and there were no good libraries for SVG animation.
So I animated PNG images using Prototype and script.aculo.us (anyone? anyone?) and, later, jQuery.
It was clunky and it didn’t allow scaling to different screen sizes (that’s why I fixed the width of the visualizations at 960px).
Now, SVG works in all but the oldest browsers, and Snap.svg is a powerful SVG animation library.
No more bitmap images: it’s SVG all the way for me.
4. Started a mailing list
Back in 2010, RSS feeds were all the rage.
Email was dead. No one built mailing lists any more. Why would anyone give you their email address when they could just subscribe to an RSS feed?
Turns out RSS feeds were not long for this world.
Email, it turns out, is immortal.
I’ve now started building a mailing list.
With all those tens of thousands of page views, just think how big it would be now if I’d started it in 2010.
5. Stopped reusing code
My code had, over the years since 2010, broken into countless itty bitty files.
Each file contained shared code for headers, footers, notes, sources, etc.
Shared code is brittle code. I can no longer change a single line of code in any one of those itty bitty files, for fear of breaking some 10-year-old web page or other.
Now, as far as possible, I put all the code for a single page into a single PHP file, a single CSS file and a single Javascript file.
6. Switched to newer fonts
Nothing dates a web site like a web-safe font.
I switched to my go-to fonts: Bellefair and Lato.
I self-hosted them to avoid subjecting my visitors to Google’s insatiable data gorging.
Bellefair and Lato aren’t especially new fonts, but they’re easy on the eye.
7. Reduced bloat
Sometimes it’s expedient to use other people’s code on your web site.
Trouble is, it always comes at a price.
jsSocials added several extra files, which slowed down page loading, which no doubt hurt my web site’s ranking on Google.
Font Awesome involved loading a font from fontawesome.com, which was slooooow. I only used a handful of characters in the font.
Google Analytics fed more data to the beast that is Google. It also created cookies, which, according to luddite laws, requires permission from users.
I stripped it all out and wrote my own code to handle social sharing and analytics. It’s now much, much simpler and much, much faster.
8. Added social meta tags
I don’t know if you’ve noticed, but social media has grown since 2010.
Back then, the only meta tags a self-respecting web page needed were the keywords and description tags. (It seems astonishing now that search engines ever trusted web developers to list the keywords for which their web pages should rank.)
These days, you need a whole host of meta tags, so that when someone tweets a link to your web page, it appears with a beautiful image, title, description, etc.
9. Started tweeting about it
Knowing I was 14 years late to the game, I searched Twitter for an available handle that bore even the remotest resemblance to my name.
@markjjeffery was already taken, of course. By someone who, despite having joined Twitter in 2010, hadn’t added a profile photo and had only ever tweeted once. About a visualizations web site, as it happens. Called things made thinkable. Hang on... that’s me!
Turns out I’ve had a Twitter account since 2010. I’d forgotten I’d ever signed up.
Time to start tweeting... again, better late than never.
10. Quit my jobs
Why did I neglect my web site for so long?
For the last 7 years, I’ve had a full-time job and a part-time job.
That didn’t leave much time for creating visualizations.
Worse, the employment contract for one of my jobs seemed to claim ownership of everything I did, even in my spare time.
Knowing that my employer might try to claim ownership of any visualization I created kinda took the joy out of it.
The solution? I quit both my jobs.
Incidentally, if quitting your job is something you’re contemplating, you might want to check out another of my podcasts, The Quit Work Podcast.
What I didn’t do
The things made thinkable logo looks pretty retro these days.
It’s not a logo so much as the name of the web site, in italics, in the bulky font Georgia, in the basic colour #500080.
Clearly no designer was involved in the creation of this logo.
I like it.
It’s the one thing I didn’t change.
The web site wears its 2010 heritage with pride.
The result
Compare and contrast my first visualization:
Trillion Dollar Economies (circa 2010, 960px wide)
with my latest:
Rivers of the Atlantic (circa 2022, scalable)