Web outside the box: The client

25th March 2005

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.

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.

There’s a little shell script for Mac called webkit2png which uses the Safari rendering engine to spit out a png of a page. Unfortunately the creator’s site seems to have been lost, but if you want a copy head over to my site and email me.

A lot of the work I do at my day job is for Channel 4. We have to use certain guidelines, such as these.

They don’t care about web standards. They don’t care about any other browser than Internet Exploder. They won’t allow PNG’s on their web servers. They certainly don’t care about Mac users. I could say so much more, but I like my job, and I’d hate to lose it. ;)

Interesting post Colly. I’ve got a bit of a problem with printouts as, like you say, you’re not showing the design as it would be viewed - either in the medium, or the way a user would interact with the design. I try, where I can, to present design digitally and then to forward on jpegs, by email, to the client afterwards.

Whenever i’ve used printouts I always have the problem of colour. How many times have you said - “Well, the colour may be a little different on screen”?

And the whole fold thing, well that’s a whole other arguement. There’s plenty of research to suggest the fold doesn’t matter for the user. Of course it matters to the client who may have read somewhere about this all important “fold”. It’s just up to us to educate them that users scroll and the notion of prime real estate isn’t as important as it once was.

Why not use several screen grabs in a little presentational folder, or paper clipped (tromboned?) together? You could present a full browser grab, perhaps even at multiple resolutions, in addition to the top-to-toe version.

“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?”

Dunno about other platforms, but for MacOS X there’s xScope (got it from Iconfactory) which has a frame that can scale to different screen resolutions, but also different browsers on different platforms (so you can see the part that actually is “web area”, after all the toolbars and whatnot have been taken off). It also has your regular screen rulers, magnifying glass, color picker…

When I was a kid, I made a scrolling comic strip display using a shoebox, tinkertoys as reels, and a long, taped strip of paper. The ideal way to look at a design printout would be with a physical scrolling box like that that, or using a frame which can be repositioned over the paper. Even a printed or real “fold” in the paper ignores the fact that a webpage is not a newspaper—the onscreen “fold” can be just about anywhere.

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.