Urgent “mobile first” design reboot for PainScience.com

I scrambled to reboot the design of PainScience.com over the last two weeks to avoid Google’s wrath. The search behemoth has been warning webmasters for a few years now that they will penalize sites that aren’t easy to use on the teensy screens of mobile devices. I’ve been on board from the start, and I thought PainScience.com was in pretty good shape for this transition.

I was wrong.

Two weeks ago I got a little flurry of warnings from Google about a variety of mobile “user experience” problems, and — dammit — they were not wrong.

And those warnings were accompanied by a much sterner kind of warning: a sharp drop in my search rank, which in turn was accompanied by a sinking feeling in my gut. Time to get to work!

In a world without pocket computers

In 2007, there were no phones that could browse the web. The iPhone was born that year, but the insane mobile explosion didn’t really get serious for several more years, and it wasn’t until at least 2014 that it became obvious that it was actually going to take over.

Back in the 2000s, I designed PainScience.com based on the assumption that it would be viewed only on giant windows. It would have seemed foolish back then to limit myself to design choices for windows narrower than my hand. And I have small hands.

So I designed for space, making many choices that only made sense with a prairie of screen real estate to work with. As mobile roared onto the scene, I started tweaking and hacking that fundamentally design to adapt to smaller screens.

Things got complicated. It became a bizarro house of cards. When Google came calling last week, I realized I had tweaked and hacked that old design as much I could without breaking it. Further adjustments would be dangerous and unreliable.

I gave in to the inevitable, and started from scratch.

I feel the need…

Speed is the bedrock of mobile usability. If it ain’t fast, it doesn’t matter what else you get right. So aggressive simplification was my top priority. I simplified and sacrificed, and then I simplified and sacrificed some more. I killed off many design features that looked just fine on mobile… but they were incompatible with that all-important need for speed.

I reduced the size of the site’s stylesheet by a whopping eighty percent — at least, for the “above the fold” view, the stuff you can see before you start scrolling. The whole package is 40% smaller than it was, and relies on fewer external resource.

And yet it looks more or less the same. Feels weird to do that much work for “nothing.”

The most painful cut: RIP Prenton

I sacrificed my cherished web font, Prenton, which has been such a distinctive feature of this website for so long that it feels like as much a part of my brand as my salamander logo. Here’s a sample of Prenton for posterity:

RIP, Prenton! Your italic ampersand is the best I have ever seen!

If there’s one decision I may yet reverse, it’s this one.

A design so “clean” you could eat off it

Readers have always praised PainScience.com for a “clean” design, but I set out to make it even cleaner. In many ways, the old design still had the typographic and layout complexity of a desktop design, just cleverly shrunk down to fit on mobile screens.

The new design is much more just text.

A simple example: “pull quotes” are gone. Pull quotes are excerpts that are “pulled” out of the text and displayed in a large, decorative font. Not only is there just not room for them on mobile, but it doesn’t even make sense: their purpose is to break up large blocks of text, which do not exist on mobile by definition: there’s not enough space for such large blocks of text.

Another example: in the old design, I had stubbornly tried to wedge sidebars into mobile screens. Technically it worked, but it didn’t actually work well, and it actually looked bad on the smallest phones. I used to dismiss that concern, but I can’t anymore, because millions of people are visiting my website not just with phones, but with small phones (mainly the iPhone SE). So in the new design “side” bars span the full text column width on mobile, and only move off to the side when there’s plenty of room for it.

Entrepreneur interrupted

This was a massive project that hadn’t even been on my radar. I normally rotate constantly through dozens of writing, research, and administrative priorities, with many projects waiting in the wings for months or years at a time until I can finally get started on them, and even then they only get done in baby steps taken over months.

This project went from nothing to my top priority to the exclusion of everything else in less than a day.

Some things can’t be ignored, like auditors, cats that want out, and Google when they start penalizing your ecommerce site. So I put everything else aside and did nothing but design design design for the last two solid weeks.