In today’s (and tomorrow’s) device-rich environment we’re encouraged to optimise for smaller screens, and that’s good a thing. However, the 20-30 inches sitting right in front of us still has plenty of unlocked potential.
Responsive design has increased the occurrence of websites that really tickle my admiration-glands, and I’m sure I’m not alone. In the past months I’ve spent more time than I really should have resizing my browser window, watching content rearrange, beautifully scaling down to the smallest of resolutions, realising in the process how adaptable layouts surely are the only way forward.
It seems ages ago now, but when I first discovered the blog that goes to 11, I was in awe. It was so simple, so beautiful, so responsive. It was making so much sense of Ethan Marcotte’s visionary precursor to the responsive era, and it has been succeeded by a plethora of inspiring work.
Magazine principles on the web
One of my own favourites of late is The Great Discontent (TGD) designed by Ryan Essmaker, and I was surprised to see it fall short of Ethan’s recent top 20 list. You see, this site somewhat changed my perspective on responsive design and reaffirmed my belief that magazine design principles are an under-valued resource on the web.
Up until now, my resizing of the browser window was all about watching stuff shrink, going from “normal” to “medium” to “small”. Ryan, however, reminds us there’s magic to be found at the other end of the scale too, and adds “large” to the sliding scale.
TGD consists of a string of interviews of talented, creative people, each with bespoke imagery and title typography. As you’d expect, the site scales down beautifully to the smallest of devices, but it’s clearly designed with higher resolution (iPad and upwards) in mind. Not in an effort to fit more content in above the fold, but rather the opposite: each interview is headed by a huge image and bespoke typography that completely fills the screen (given a landscape viewport), even on my 21 inch iMac.
The resulting impact mimics that of a well designed magazine cover, where the only thing you’re given upfront is a visual teaser, urging you to turn the first page – in this case, scroll past the fold – and get stuck in.
The influence of print design doesn’t stop at the
cover fold either. Once past the opening image, the user is straight into a beautifully laid out article with a comfortable one-column layout, understated typography and inspiring use of pull quotes.
The main column is flanked by auxiliary information and images, serving as entry points for the casual scroller and as “landmarks” for the distracted reader by offering slight variation at inconsistent intervals. And when you’re done reading, the design allows for quick jumping between articles, just like turning the pages of a magazine.
Ryan truly embraces the reading experience of the web with the smart choice of a single column approach. He carries forward the spirit of magazine design – that of communicating content well – without falling into the trap of replicating print layouts. Echoed by many others, including Dan Croak’s article on The Lazy Man’s Responsive Design, this approach embodies a shift in global reading patterns. We’re no longer predominantly reading from page to page, we’re reading from top to bottom.
What about the fold?
TGD seems to laugh in the face of conventional wisdom about the fold. After all, Jakob Nielsen’s research of 2010 tells us that internet users allocate only 20% of their attention below the fold, and even though the vast majority of us has grown accustom to scrolling, a common principle has remained constant for years: “…the material that’s the most important for the users’ goals or your business goals should be above the fold”.
In the case of TGD, the obvious goal for the users is to read inspiring interviews, but when landing on a page there’s not even as much as an intro paragraph in sight. Apparently, this layout should never have been thought up, let alone designed and built, considering only 20% of the visitors will actually engage with the actual interview. Magazines rely on their covers’ impact to stand out in the shops, whereas people don’t browse the internet by choosing between 100-odd landing pages on a shelf. Perhaps the full-screen visual is a complete waste of resources, given people’s reluctancy to scroll?
I don’t think so. I read the interviews (ok, maybe not all of them – yet), and I’d argue I read them because of the layout, not despite it. We should consider the possibility that, even online, having an intriguing “cover” sparks more interest and curiosity than displaying he first half of the article, even if the latter would offer more actual information.
Looking at this particular article, for example, the photograph (of a ghostly woman lying on some stairs) alone leaves me wanting more. Sure, it could have been smaller, allowing for more text (perhaps an intro paragraph giving me a nugget of information), but then it might have lost it’s impact. It certainly makes me scroll even as it is.
A successful magazine cover will make you pick it up, pay for it and use both your hands to turn the pages, all obstacles that require more effort than simply scrolling a page. It makes me wonder whether conservative scrolling statistics are the result of uninspired users or of uninspired designers?