Despite having many developers amongst my readers — who presumably use a desktop or laptop most of the time by necessity — the majority of visitors to this site are using mobile devices. That’s true for the web in general, too.
When I redesigned the site in 2014, I messed it up in what’s probably a common way. I designed for the desktop first (mistake 1), then I added media queries specifically for iOS devices (mistake 2), and then I tweaked the CSS to present a design tailored to those devices (mistake 3). You live and learn.
I read an excellent Google developer article on responsive web design recently, and it made complete sense to me. What I should have done is:
-
Design universally, but with an eye firmly on mobile first, since most people are on phones and tablets (for this site, phones outnumber tablets four to one). Create the most streamlined, elemental, essential interaction experience. Don’t rely on anything specific to an interaction model, like hover states or cursors.
-
Decide on responsive thresholds (not “breakpoints”; that term means something completely different to programmers) based on how the site actually looks. Judge it visually, not with preconceived screen-sizes in mind. View the design as a single thing that adapts itself when the reading experience requires it, not as discrete desktop and mobile versions.
Obvious enough in retrospect. I’ll approach the next redesign that way.
It’s not new information, of course; that’s how you design anything in the world. I was just blind to the fact that computers (as in desktop-type machines) were a temporary, strange, niche case; an artefact of immature technology. Pointing devices and pixel-precision, with very high information and interaction density to squeeze the most out of limited and low-resolution screen space, complete with minuscule text and navigational elements. But things have moved on. We have a vast majority of non-expert users, and touch interaction, and high-resolution large displays, and human-scale presentation.
It’s time to stop worshipping at the altar of the Weird Machine, because almost nothing else in the world is designed or used like computers are.
The real world is mobile. Simple, task-centric interfaces, used under suboptimal ergonomic conditions, amidst distractions. That’s our daily experience; it’s our life-context. It took me this long to make the trivial realisation that traditional computers are the glaring exception.
Designing for mobile is designing for elementality and simplicity; for compromised coordination, vision, hearing, and attention. It’s the purest form of information and interaction design.
Without technological form, but rather just for human compatibility.