25th March, 2005

Web outside the box: The client

The web works “above the fold”, and always will until we have six-feet high monitors. So why continue to present web designs as top-to-toe screen grabs that have no correlation to the browsing experience?

In the first part of my top-to-toe versus “above the fold” rant, I’m thinking about how we present our web designs to prospective or current clients, and what our responsibilities as web designers are in such situations.

full screengrab

Recently, I’ve taken to carrying A3 printouts of selected Agenzia-built websites with me when on the road or meeting prospective new clients. Each printout displays an often scaled-to-fit view of an entire home page, regardless of how long it might be. I’ve found that having a hard-copy, header-to-footer overview of a design is a very easy way to explain the intentions of a particular build to a prospective client, and let them think outside of the browser frame.

This got me thinking. In that situation, am I not showcasing the web designs as though they are print work? Or rather, is it misleading the prospective client into thinking from a print point of view, and offering them something they could never see on screen?

Above the fold

My point? Well, web designs work “above the fold”. The browser window is a viewing frame that might be any size, depending on screen size and display resolution, but nevertheless is a focused window that rarely allows all users to see a design from top to toe. An example of this in print might be a broadsheet newspaper, where due to page size and newsstand restrictions, we might purchase the paper based on what we see above the fold.

For the most part however, print work is top-to-toe. Showcase a print job, and you first show the complete cover, or the whole poster/flyer/package etc. If a brochure or book, this may be backed up with page shots, but it’s the whole cover that carries the impact, and it’s the whole cover the prospective client will remember.

Who are we fooling?

Think about how many web design books display sites as full grabs with decreased legibility, in order to let us see the whole design. Look at all the portfolio sites that do the same thing. Think of me meeting a new client with my roll of full homepage designs. When is it right to display sites in this way, and when is it wrong?

When we boil it down, aren’t we just fooling ourselves as designers? I admit that I find an A3 printout of a completed web page considerably prettier than the limited view forced by the boundary of the browser window. I enjoy looking at the relationship between the header and the footer, and the “completeness” it portrays. Yet, if I dwell on this viewpoint, I lose sight of the actual browsing experience, and distance myself from that which I am building for the web user.

There is no true point of reference

The web browser is a sliding frame, and it is impossible to design for a specific “above the fold” size. Forget 800 x 600. Maybe the low-res user is using their browser at full-width, but rarely is the height 600 pixels, what with Google toolbars, application docks, and the general quirks of different operating systems. All we can guestimate is that all users will share the experience of first viewing at least 500 pixels of the top of our designs.

Were all screens the same size, and all browser windows not resizable, we might be in a better position to establish a set viewing size, but this will never happen. I’m not suggesting such a thing would be positive either, and with all responsible web designers thinking ahead to whatever technology we’ll be viewing interactive media on in the future, our focus will turn increasingly toward serving up different stylesheets for different media. Web designers should never assume that the end user sees exactly what they see on their 20 inch iMac screen, though all of us should aim to serve content that can find it’s own level on any platform.

So how do we present our work offline?

This brings me back to how we present our case studies and folios without access to a web connection, be it in a face to face meeting in a coffee shop, as part of a presentation, or in print. If we’re championing web standards verbally, or on our blogs and business sites, we have a commitment to also be honest with prospective clients. At all times, we should try to be upfront about how their customers will see their website.

I’m suggesting that the full top-to-toe screengrab has no place in client meetings, public presentations and anywhere it might mislead someone who will take that image with them to their web browser.

The full top-to-toe screengrab is a useful tool for the web designer, and for explaining one’s processes to one’s contemporaries, be it through coffee-table web design showcase books, or presentations to other designers. I’ll certainly continue to use my A3 printouts to scribble on and reposition elements with my pencil leading up to a finished design, and I’ll talk more about that in part two.

Prospective and existing clients should be aware of how the end user might see their site, and to present a top-to-toe screengrab is to mislead them. I now think it more appropriate to present to them screenshots where they can’t see the footer, a full article or complete list of latest news items. If necessary, “below the fold” details will be presented as a second screengrab, thus emulating the limited view of a web browser.

Don’t compromise page focus for aesthetic prettiness

It isn’t always possible to let clients see their website being built in an online staging area. What if they still surf with IE5 on a Mac running OS9, and you develop with Firefox prior to final cross-browser tweaking. In such situations the screenshot is invaluable, be it a Basecamp download or physical printout. I believe it inappropriate to string them along with PDFs or printouts of a complete homepage. Working to such a model may mean the designer loses sight of where the page focus really is, and places too much emphasis on prettiness and aesthetic balance over usability and sensible site structure.

This whole exploratory rant may seem rather inconsequential to you. Is this topic really that important? Well, at a time when I’m trying to evaluate how clients view the way we work, and how they evaluate our work based on the feedback they receive after a site launch, I do consider such things important.

And there’s more…

In part two of this rant, I’ll be looking at how the top-to-toe screengrab can be a vital tool during development, without losing sight of browser focus, or misleading anyone outside of the office.

Prev / Next


If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.