“Above the Fold” and other terms account executives still use to annoy designers

For the past decade or so, I’ve revised content wireframes for account executives, clients and other people who use terms like, “masthead,” “whitespace,” “leading,” and even the contemptuous “fold.” These terms are pulled out of the annals of print design. They’re dusted off, and applied to the web without any consideration for the medium of web design.

Of course, change takes time. Changes to language can take eras. And it’s tough enough for professional designers to keep up with such a relatively new and malleable medium, much less the terms and definitions describing it.

With it’s centuries-old rich history, it seems only natural to recycle from graphic design. Isn’t it our duty, as designers, to use the language of graphic design to help shape our industry? But before we can start feeling really indebted to the language of print design, we need to acknowledge something a little deeper than the fold: the canvas.

The canvas, even a blank one, constitues an area or the boundary of an artists work. Whether it be fabric, paper or the side of a building, a painter is going to make a conscious creative choice before the first brush stroke or spray paint can is shaken. This choice is very powerful and will affect the boundary of the work.

Over the years, we have relied on an of ever-evolving set of best-practices to mimic this act. Personally, I start by creating my “canvas” in Fireworks, a blank document with a fixed width and height. There’s a natural breakdown in translation to the actual canvas: the browser window, and all of it’s platform limitations and version imperfections. After all, once they’re launched, web designs are at the mercy of the people using them—to their font settings, the color and resolution of their display, the dimensions of their browser window, and even the very browser technology they use.

So, one answer is to set your type in pixels, give your design fixed dimensions and pray for our designs look decent on both a horizontally-oriented desktop display and degrade gracefully to a vertically-oriented iPhone display.

The malleability of the medium is probably the best (and worst thing about the web. It easily defies constraint. The planning we’ve done for a canvas with fixed  dimensions is no different: it’s easily broken. If a browser’s width falls even one pixel below the established minimum, a visitor will find themselves contending with a horizontal scrollbar and clipped content. The placement of critical links, content and other important elements can become part of an extremely fragile hierarchy, clipped by a user’s viewport that obey’s the user’s preferences, not ours.

Transition has been the name of our game since the beginning of the web. But now, we’re faced with scenarios where browsers are becoming available on a variety of platforms outside of desktop computing—and these platforms that are growing smaller and larger at the same time. As small screen devices are expected to become the dominant way to access the internet in the coming years, modern game consoles have made a widescreen, television-centric web more accessible. Don’t forget about the tablets that have made web access neither fully “mobile” nor “desktop” but somewhere in between.

Since we’re designing for more resolutions than ever before, the “fold” has disappeared. So, when your AE or client mentions it, be a smart-ass and ask them to tell you where it is on their notebook or their iPhone. And then have them point it out on your iPad and your new 27″ Thunderbolt display (if you don’t have one, tell them to buy you one so that you can fully deploy the “fold” concept into all of your designs).

The point is, while we hate horizontal scrollbars because they’re annoying, the vertical scroll is probably the most common user activities one takes while computing—imagine not being able to use this feature while writing a long-winded diatribe on a subject like web design?

There is an astonishing amount of disbelief that the users of web pages have learned to scroll and that they do so regularly. Holding on to this disbelief – this myth that users won’t scroll to see anything below the fold – is doing everyone a great disservice, most of all our users.

So the next time you get completely annoyed with an uninformed AE or client tossing around these terms, send them to bed with your knowledge after reading more about responsive web design.

Nov 27, 2011 | Categories:Blog | Tags: design, responsive, web | Leave A Comment »