blog.lnk.si

The Retina­pocalypse: A Case Study

The ‘retinapocalypse‘ refers to a worrying new trend in web design which threatens to usher in a new age of information elitism. Its emergence owes itself to the proliferation of smartphones and tablets with high-resolution displays which can render text in crisp detail, arguably more legibly than print.

Graphic designers seem to have developed a form of tunnel-vision for these devices. Imagine their smug satisfaction as they recline their over-priced ergonomic chairs in a swanky over-styled Collingwood office. They’ve just spent weeks on the publication’s digital re-branding, involving countless hours staring into their 4K iMacs. It looks beautiful on their screen and fantastic in print, what could go wrong?

Meanwhile, Ms. Average J. Joe hunches over her pile of uni readings, squinting through vintage thick-rimmed hipster frames into the second-hand 120-dpi monitor she snagged off Freecycle. She sets down her freshly-brewed cup of AeroPress for a moment to adjust her self-crocheted shawl which drapes over her shoulders–one of the few solemn comforts to be found in an unheated share-house in Northcote. Scrolling through the Broadsheet email, she remembers Little Bean Blue’s crisp and fruity cold-drip from an impromptu visit after a Greens rally outside Parliament earlier that year. Now, she wonders, if any of the cafe’s wintry offerings could draw her onto the 86 tram an hour early for her brunch date at the latest obscure bar to open on Flinders Lane.

***

I’ve previously rage-tweeted about Broadsheet’s problematic design choices, but things are getting out of control. Examining the following screenshot of this review of Little Bean Blue on their site taken on a regular-sized Acer monitor on my boring old Windows 7 PC.  I adore the sparse, minimalist layout they’re going for but minimalism should not extend to the functionality. The layout has several issues that violate basic common sense, and should ring alarm bells if engagement and accessibility is of concern to these designers.

Broadsheet website layout

The first problem you’ll notice is the whopping great image pushing the main article down ‘below the fold’. In terms of UX design, I don’t believe in forcing readers to scroll down to get to the main text. It’s an extra step, and debate abounds as to its importance but not utilising the real estate above the fold is a mistake. You have about three seconds to grab a reader’s attention. Of the very little text content that appears on this page, it’s only the headline, which the reader already knows because they just clicked on it from somewhere–a menu, a feature on the site’s front page, or their email newsletter.

Broadsheet website design

After being forced to scroll past this monstrosity we come across a second issue, and the crux of the retinapocalypse. The designers have chosen a ridiculously miniscule font size for the main body text. It’s quite simply, completely unreadable. I actually did a double-take and checked my browser wasn’t stuck on small text zoom. Speaking of zoom, no amount of sub-pixel rendering is going to help this fundamental design flaw. For example, The ‘eyes’ of the ‘e’ characters have fused together, and the ‘a’ is barely recognisable.bs3

An appraisal of Broadsheet’s retina offerings is only fair and we see a similar problem (pictured below) in neglecting to acknowledge the power of the fold in their iPhone (4S) design. This time it’s even worse–a banner ad obscures the main headline of the review. However, the ‘peek’ of a second image suggests a scrollable image gallery, which is a nice touch (pun intended).

Broadsheet mobile app

Scrolling down to the body of the article, the drop-cap is an appealing flourish but is unfortunately misaligned to the baseline grid (as illustrated below). The body text was just legible on my retina iPhone 4S but still suffers from a poor choice of point size. The vertical strokes of the letters appear hair-thin, eyes of the ‘e’ and ‘a’ are too small and the text lacks the punch it would have were it a few sizes larger.

Broadsheet mobile appIt’s at this point that I’m beginning to call into question Broadsheet’s choice of Garamond as the ideal typeface for body text, even on retina displays. Sure, it gives an undeniably classic and sophisticated look, and it matches their printed design perfectly. But pure aesthetics shouldn’t come at the expense of actual readability. Garamond is well-known as one of the earliest print typefaces, and that might be the problem–this site feels like a print magazine that just hasn’t translated across to the digital media space.

On paper you control the environment–you choose the design, the stock and the ink. But in today’s post-print era of digital ubiquity, without adequate proofing on the many different screens out there, you should probably stick to reading typefaces designed for low-res displays that also look great in high res, such as Georgia.

Leave a Reply