This is the celebrated journal of Mr. Simon Collison A.K.A Colly

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.

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.

Responses

# Josh responded on 25th March 2005 with...

What do you use to take those A3 screenshots?  Is there some program for the Mac or do you just cut and paste several smaller screenshots in Photoshop?

# quis responded on 25th March 2005 with...

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.

# Schultzy responded on 25th March 2005 with...

I think you could have a line hilighting where roughly the fold would go.

Then you could explain to the client above the line is what they would see without scrolling.

# Phil Sherry responded on 25th March 2005 with...

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.  ;)

# cboone responded on 25th March 2005 with...

There’s an excellent little app for OS X called Paparazzi that is basically a Cocoa wrapper for WebKit2PNG—just give it a URL, width, and min-height and you get a PNG back.

It’s by Johan Sorenson, now increasingly know for his Rails skills.

I find it invaluable.

# Simon Collison responded on 25th March 2005 with...

Schultzy: I like the idea you suggest - the impression of a fold in the screenshot would at least help them imagine the site as though framed by the browser. Good one.

I’d be interested in hearing about any more clean methods for grabbing full screenshots. I know some Safari plugins allow it. I have to admit that I’ve been collaging my images in Photoshop. Tut-tut.

# Simon Collison responded on 25th March 2005 with...

Cboone: I just downloaded Paparazzi. Wow! That is exactly what I’ve been looking for. Excellent tip-off - thanks man!

# cboone responded on 25th March 2005 with...

Simon: Enjoy…

# Sharif responded on 25th March 2005 with...

Phil, those guidelines are pretty thorough! But, how did Channel 4 convince Jakob Nielsen to write them? ;-)

# Hadley responded on 26th March 2005 with...

You could, of course, simply fold the paper printout!

# Mark Boulton responded on 26th March 2005 with...

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.

# Scott responded on 26th March 2005 with...

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.

# Schultzy responded on 26th March 2005 with...

Rethinking my idea you could have different color lines where different resolutions come up to and it would give a rough idea to what the site will look like.

Also why do people not cater for 600X800 still? Am I just sad?

# Simon Collison responded on 30th March 2005 with...

Good stuff. I like Schultzy’s idea of line indicators.

I’m going to create a photoshop layer file with markers for screen resolutions that I can scale to suit a particular screengrab. When it’s done I’ll post it on the site.

# Schultzy responded on 31st March 2005 with...

Cheers

And super cheers for the Favicon ;)

# Steve Keyworth responded on 5th April 2005 with...

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

To prospective clients Simon? If it wins the work…

# Max responded on 20th April 2005 with...

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…

A must-have for web developers.

# Charles Starrett responded on 23rd April 2005 with...

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.

Prev 402 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

There are 18 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.