Where is the fold?

January 28, 2010

In my previous article we wrote about what ‘above the fold’ means, when to care about it, principles for web design and collected expert opinion.

What I’d like to answer now is:

  • Where is the fold? Are there any standards? What is generally agreed by designers and experts?
  • Where is the fold according to advertisers and other clients? Which browser types and versions and resolutions do they generally consider?

Where is the fold

The fold for 1024×768 desktop resolutions is on average 578 pixels down from the top of a webpage. *

This is based on my research and average figures taken from various sources (industry experts, ‘best practice’ blogs, etc).

How wide should your site be? In terms of width (pixels across to prevent horizontal scrollbar) for PC only: 1004 pixels across. (Mac= 972) Anything to the right of 1004 pixels across the webpage is much less likely to be seen by the 1024×768 audience.

* note that 578 is probably a generous figure. I would argue that 285 is worst-case but common case scenario, giving a ‘safe’ or secondary fold at 768-285=483 pixels. Averaging 578 and 483 gives you 530.

** This is average. For any person the fold can be anywhere between 285 and 714, but those are min/max extremes and rare. If you consider the fold to be somewhere in the 483 – 600 region,  or about 70 pixels above and below 550  would be good design practice.

What other experts say

If there is a fold…it’s at:

Anne Holland: 1024×768   15″ : 980 x 520

Jungle Minds: 714 pixels van de bovenrand (768 pixels minus 2 x 27 pixels voor de balken)

What the stats say

At a popular PL telco site,  7.6% (half a million users) had a browser height of 500 to 549.  (Measured with SiteCatalyst for the 6-month period Aug 2010 – Feb 2011)

Fold trends

Screen resolutions on desktops are getting higher, but increasing popularity of mobiles and  iPad. If you have a mobile equivalent site (designed especially for mobile), you have the challenge that your (responsive/mobile) site is going to viewed by a wide range of viewport resolutions.

So don’t worry about it too much. If you want certain things to be exactly scaled to the first pagelength, and show nothing more nothing less, then use coding techniques.

It is rare that users don’t scroll anymore, especially on mobiles. However, there is the odd case where it could represent an issue on your site, for example see image here

The lowest resolution to take into account is the iPhone 3 and iPhone 4  (both effectively use 320×480). The fold (if using the Safari browser) is around 480 minus  status bar (20px) minus bottom toolbar  (44px @ iPhone4) minus 44px top navigation browser bar. In this worst-case primary fold scenario this gives a primary fold at 372 px. Other sources say: 360px, 416px, … , so in the range 360 – 416.

This assumes there is a significant proportion of user that still have an iPhone 3 or phone with a similar or lower resolution. New iOS versions may have different toolbar and statusbar heights. See the differences example here. Always check your own site stats (Google Analytics > Resolution)


Screen dimensions of popular mobiles/tablets/monitors: http://screensiz.es/

Browser screen resizers: http://creatiface.com/tools/responsive-design-test

Chrome plug-in https://chrome.google.com/webstore/detail/dimensions-toolkit/oajdmmikmphdckpkjgkdofoegppahcak


Articles discussing the ‘new’ fold considering tablet/mobile

https://storify.com/xiwcx/there-is-no-fold-1  TIP  (to read)





Where to get device/browser/iOS stats:



There’s so much to take into account (landscape/portrait, 1000 devices, 100 browsers, status bar heights, virtual keyboards)..it could be solved programmatically (viewport.innerWidth etc), but it’s more pragmatic to design for the minimal (landscape) viewport (with standard keyboard). It’s especially a challenge when wanting to force auto-complete from a user  (hint)



iPad usable screen size


Why there is no such thing as ‘one fold to rule them all’

Typically, browser versions and types will be any that the client take into account are aware or that we have specified as compatible with the particular portal. To be more precise you should consider your audience’s resolution, platform, browser and browser version. I’ve regarded only the popular 1024×768 resolution in the most popular browsers using figures from consulted sources mentioned in the Side Notes below.

Determining the fold for your website and audience

  • Profile your (most important) users to get a clearer picture (latest browser/resolution stats). If you have no access to stats for your own site, then use those of popular sites that your users are likely to use.
  • Browser is not always maximized: only 50.4% of users maximise their browser windows so actual browser viewport is often smaller. (source missing). Put another way, screen resolution is not browser resolution and the two often differ [5]. In a more recent survey on our sites it was about 80%.
  • 800×600 is used on average by 8% of my users. You could argue that users with lower resolutions are more used to scrolling, and might even scroll more often (and faster?).
  • Height is the trickiest, because some (novice) users have many and/or tall browser toolbars installed. In extreme cases toolbars might be eating away 250px giving a fold of about 530px. Considering default browser settings + one average toolbar = ~170px?
  • The horizontal fold/scrollbar is equally important.
  • One source claims that 95% of above the fold screen estate should be targeted to the most common users. Debatable.
  • Rule of thumb? Two-thirds down the screen?

Side notes

In answering this I have consulted various sources and articles. Research gets out-dated. Proper research should keep track of the source credibility, date of article, audience and – above all – resolutions and browser versions.

In this article:

  • Last updated in 2008. On 9 April 2008, my visitors mostly used Firefox, MSIE6, MSIE7, and Opera 9.x.   Mac users account for 4% and 800×600 users for 6%.
  • Only 1024×768 resolution considered (still the most popular resolution for most websites ).
  • Sources that also consider Firefox or Chrome have not been consulted yet. Generally the fold of these browsers is about 100 pixels off from the Internet Explorer fold.
  • The date of any source or consulted article should be considered, as the new IE7+ browsers have a different fold due to introduction of tabbed browsing (which some users have turned off). Chrome is especially minimal hence the fold figure for this browser may be increased as mentioned above.



http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm (…”Less content above the fold may encourage more exploration below the fold”)



[5] http://css-tricks.com/9778-screen-resolution-notequalto-browser-window/

[add table: site/source, resolution, fold, browsers]

Calculate the fold

How is the fold calculated? In a 1024×768 resolution, the screen is 768 pixels tall. On an average browser about 190 pixels are devoted to toolbars and other non-webpage elements (browser user interface elements and settings + extra toolbars from browser plug-ins). This gives 768 minus 190 = about 570 pixels

To get an estimate of where the fold could be on your site, check out http://www.foldtester.com/
Cautions with foldtester.com:

  • It’s using global internet stats  (that is, the world-wide average). This doesn’t mean the percentages you are seeing reflect reality.
  • The trend is more and more people are using desktop/TV sizes that are getting bigger, but mobile browsing is also increasingly popular.
  • In fact, your audience might on average NOT have the internet average in terms of screen resolution, browser used, etc
  • For example there might be many people viewing your site on  iPads .
  • The site says it used “internet average”. This means low resolution (like mobiles) to high-resolution (like wide-screen TV’s)
  • Importance of the fold depends on your site stats, web skills of your audience  and the presence of ‘scroll-stopper’ elements
  • As this site demostrates, on any site the fold is not on one location but

[add table: browser, how much to substract for each user type (average user, high-resolution user, old PC user) to calculate your fold for any resolution]

Further reading

http://weenudge.com/thefold/  also check the links in the right-column

E-commerce research resources

January 25, 2010

The following are valuable resources of:

  • Expert usability review/evaluations
  • Best practice guidelines from reliable sources
  • Applicable research reports (read this caution about applicability of usability research – in Dutch)
  • Multivariate A/B-tesing, plus dedicated and reknown books
  • Conversion stats of old versus new designs (normalised)
  • Research papers

Case studies and expert opinion

http://www.clickz.com TIP recommended by 3 experts (also good for stats)
–    http://www.clickz.com/showPage.html?page=3622853
– http://www.clickz.com/showPage.html?page=3622794
The first two pages provide some interesting background assumptions
Effective Cross-Selling
@ http://www.clickz.com/showPage.html?page=3610171
Learning from best practice of different industries
@ http://www.clickz.com/showPage.html?page=3616881

http://www.marketingsherpa.com/library.html (better for articles and case studies, registration needed for some)
http://www.marketingexperiments.com/improving-website-conversion/ (free)

http://www.iconocast.com/ – it’s hard to believe looking at the design, but this large Health and Science articles archive also includes translated newspaper articles, is popular and much cited. Use their search engine ; (links to more resources)
E-commerce section in NYtimes (updated every Monday)


Not e-commerce specific


Popular research companies & reports

Econsultancy ++

http://baymard.com +      ($150)  (mobile report = $300)    (also many free articles)

Nielsen Norman ($999)



Popular blogs

http://www.getelastic.com (e-commerce blog with articles on e.g. product comparison design, conversion) [Tip+++]

Design patterns

More Pattern libraries

E-commerce (CMS) package vendors
Mambofive and Intershop are popular e-commerce packages.  Bol.com use InterShop. Also: ZenCart, Magento cart

Academic publications

http://tc.eserver.org/dir/Design/Web-Design/E-Commerce  [TIP! ]   (papers,blog entries)
Journal of Electronic Commerce, Journal of Interactive Marketing

Research bureaus

Forrester research (a lot of focus on quantitive, mainly US research)
JupiterResearch (now merged with Forrester) (focus on eCommerce research resports; see below) [TIP! ]
http://www.e-consultancy.com/research/ ($299 for single-licence subscription) TIP!
37signals.com reports
http://www.adaptivepath.com/publications/ (Reports incl. registration&login, but no directly related to e-commerce)
http://www.deyalexander.com/resources/uxd/e-commerce.html (links to good articles on the subject)  – TIPErnst&Young
Baker & McKenzie  (focus too much on legal issues)
Netherlands: 2C/Mediametrix, Jungle Minds

Articles and white papers

White papers which have been praised by experts or are frequently mentioned. (ToDOo: distribute among (new) blog posts)

From Jared Spool (UIE.com) :
Product presentation pages design @
Where e-commerce sites can fail @

How to stop shopping cart abandonment @

Also popular:

More articles:

Google it!

Expert opinion and good articles (weblogs, essays)

http://www.grokdotcom.com/2008/01/28/semmy-awards/   (links to a few good articles)  Tip+

Web Usability Illustrated: Breathing Easier With Your Usable e-Commerce Site

E-commerce: 6 of the Most Successful Internet Business Models (article)

E-commerce and Usability


More articles (and the list goes on…)

http://usableweb.com/topics/000481-0-0.html (with focus on usability)
http://www.guuui.com/browse.php?cid=177  (links repository to articles, incl. e-commerce search)
http://libraries.mit.edu/guides/subjects/ecommerce/   (from MIT ; links to sources of news, research publications)
http://techrepublic.com.com/  (targetted at IT managers, search for e-commerce)

Research/credibility tools

http://citeseerx.ist.psu.edu/viewdoc/summary?doi= (cross-reference tool to check how many times a certain publication has been cited)

Conversion optimisation tips & best practice guidelines


Product comparison

January 19, 2010

What is best practice for presenting products: list view, grids, tables .. ?

Product list view

Check out any e-commerce with faceted navigation for View by List or Rows.

Product Grids (blocks, tiles)

For inspiration on Grid, Block or Boxes view, check out: Amazon, Nordstrom, LandsEnd, Magento e-commerce platform and many others


Code (inspiration)


Product comparison tables or product matrix

Select and compare

Articles, research


Research: Product Comparison and Pricing Tables  (Nick Finck)

Producten vergelijken is moeilijk

Galleries, patterns, examples

http://www.welie.com/patterns/showPattern.php?patternID=comparison [done]
70+ examples (gallery)




25 clear and beautiful


Innovation and novelty

Steps of interaction design and UX

January 19, 2010

* denotes required steps. Other step are often skipped or optional.

Definition and requirements

Define the website goals and project scope. It is not always the ID-ers job to come up with requirements, but they are often refined when gathering inspiration [link to private post] and during design.

  • Define the vision
  • Define the challenges/problems
  • SWOT analysis

Define the target audience

  • persona’s
  • contextual scenario’s

Business and user goals

  • interview and observe users
  • talk to product managers and marketing department
  • study competitors

Technological constraints

  • available programmers and their proficiency (skills and knowledge)
  • compatibility  (screen resolution, bandwidth)
  • supported functions (existing reusable components
  • innovation constraints (culture)

Application/website constraints (re-usable templates, fixed navigation elements) – these become your design constraints. Agree on which page templates (columns), high-level that you will base your designs on (rules/principles/constraints/scope).

Also consider deadline, time-to-market (feature cost-benefit).

Gather facts and goals about the website. Question to ask your client before any user research (and design project)

0. Strategy and concept

There are 3 levels within interaction design: [The in-mates are running the asylum, Alan Cooper]
1. Concept design
2. Behavioural design
3. Interface design

A good over of the overall levels outside interaction design, see JJG’s elements of user experience. (img)

1. High-level overview (structure and flow)

First, start with content:

  • Which pages should there be?
  • On each page, which content should belong there? User flow.

Don’t be afraid to divert from the page and boxes model. For example, a one-page navigation/experience could be worth exploring.

List the high-level view, graphically or textually. With the birds-eye view, prioritise each element so you know which one needs most emphasis. Use the

Tools for brainstorming and sketching

Tools: Pen and paper, beer & back of a napkin 😉 , walk/shower/jog, whiteboards, brown paper, mindmapping tools, comics and storyboards, different visual views (Adaptive path), stories & scenarios, proto-personas
Online collaborative whiteboards: see other post

Tools for structuring

Sitemaps and diagrams,  Flowcharts,  notepad/Excel (indented), mindmaps, rough sketch (blocks) ,post-its
Online: http://boardthing.com/  Trello.com

Page layout options

Layout options means exploring: Lightboxes, tabs, filters, columns, carrousels, rollover tooltips, accordions, grids, (mega) dropd-downs, etc

2. Coarse design

After agreeing on the high-level principles with your client, now it’s time to dive into more detail, explore the design space.

Work by iterative design

Get inspiration, note/collect good examples and research best practice and patterns, Google images  (e.g. “toggle UI”), high-level blocks, design, get feedback, design, ask bypassers, discuss, design, get feedback.

Wireframing and prototyping
Tools: prototyping tools are (from easy to use to more expert knowledge required): Balsamiq, Omnigraffle, Visio, Axure, Fireworks, DHTML, Flash, Visual Studio
Wireframing                   Interactive prototypes

Axure                   Y                                                   Y

Links to other pages with overview of ID tools.


The earlier the better. Paper prototyping or clickable prototypes.

3. Detail design

Support the visual designer and overview usability. When to do graphical design? Agile vs waterfall.


Tools: Excel, Word
Methods: Use cases
Also known as:

Define all use cases and defaults. Be sure, in later stages, to include edge-cases (randgevallen).

4. QA and functional testing

Visual design comes at play after, but often at parallel with, interaction design.

Testing. Though not always an interaction designer’s job, testing the builds and implementations for bugs, functional malfunctions and interaction design.


Remember to always…

  • Iterate

Exploring design space

1. Invetorise the known, cluster the known, prioritise (order)
2. Explore UI possibilities using the patterns at hand (patterns: accordion, tabs, show more links, anchors, etc)
3. Check if it’s scalable (future-proof) and check for edge cases (amounts, visual limits)
4. Check other constraints, boundaries, limitations. Min/max and average in terms of data, content, image dimensions, labels
5. Simplify the UI @ http://www.quora.com/Product-Design-software/What-is-the-best-process-for-simplifying-a-user-interface-and-experience?hover=2

This is not linear! Do a bit on every step.

UX team of one

As a UX team of one I experienced good results following these steps (iteratively!):
– Vision statements (write down assumptions derived from business needs, and stakeholder quotes)
– Brainstorm your proto-persona (get at least 3) or at least a basic list of user needs (assumed)
– Competitive research (evaluate direct competitors, pros and cons of their interface. what do their users say/need on forum)
– Inspiration research (get a feel for potential solutions by checking how do others solve this problem)
– Features (A list of potential requirements structured Excel columns or Word indents is often good enough.)
– Sketches (screens and elements in their alternative 6-up approaches, patterns, format variants). Going back and forth from competitors screenshots to your sketches.
– Flows and storyboards  (walk through the possible experience as a user)
– Sitemap, use flow  (get down what you know)
– Design principles  (these act as guidelines and constraints, and as input to features/roadmap)

Only after this get into detail design, unless failing fast is an option.

Remember to contribute to team roadmap, critisize features value, offer technical solutions potentials (even at technology level, like scripts, APIs, or data sources), visualise the process & experience for them.

– User Stories  (Agile)

Annotations on your sketches, wireframes and competitive/inspiration evaluations can drive the features/stories/requirements/roadmap.



http://uxbasis.hellogroup.com/ (start at Structure)

See also my posts about basic, laws and principles of effective interaction design for the web.

http://www.slideshare.net/pboersma/influences-on-ux-amsterdam-ux-cocktail-hour  Process, method toolbox and internal influences/roles

Methods and toolkit, toolbox:

http://project.cmd.hro.nl/cmi/hci/toolkit/index2.php   (extended)

http://www.allaboutux.org/all-methods  (UX evaluation methods)


Keyword: UCD process, user-centered design process, workflow, design work-flow, agency work flow

How important is performance for conversion

January 8, 2010

Does performance matter? The UX principle is under 10 seconds.

Above that is supposed to be psychologically intolerable: users get impatient, dissatisfied or worse: they leave.But what about narrowband users, those who are not on broadband but are using dial-up or mobile phones? Aren’t they used to waiting anyway? In which cases may the 10-second rule be broken?

Long waiting times affect customer satisfaction and conversion: customers lose their patience, misinterpret long waiting times as bad service and quick browsing or ordering becomes near to impossible.
On sales and e-commerce sites, users trying to order will call instead or churn to competitors.

Note as mobile speeds are ever increasing (4G), performance may become less of an issue, and websites could trend more towards ‘big design’ with large images, many embedded fonts and videos, etc.

In this series of articles will research and discuss:

When is performance critical for success and conversion?

(evaluating your audience, their system configuration, goals and shopping behaviour in relation to your business)

How to measure performance of your site?

(Pingdom (not free anymore), Google PageSpeed, YSlow, Google Chrome, Firebug, Online speed performance services)

How to improve performance of your website or pages

(YSlow, simplicity is better: less is more

https://speakerdeck.com/lara/design-for-performance   TIP

How does mobile strategy affect speed performance?

Source: BI intelligence


With Bing  ‘”User engagement dropped significantly even with only a 1 second delay. A 2 second delay doubled all the bad metrics.” (by LukeW)

More sources/research @ 


Worth a read


Read but didn’t like:  http://www.elasticpath.com/webinars/performance/ Every second counts: how website performance impacts shopper behaviour  by Elastic Path

Conversion and optimization: case studies

January 5, 2010

Convince your boss with results from actual A/B split and MVT tests.

How to find real-life examples of A/B tests.

Top 5 most frequent A/B tested sites

Amazon      ++  (according to source 1 @ 11:30, everything is analytics based, e.g. search bar size)

Sears, Disney, Skype, Monster, Amazon.com, H&R block, T-Mobile, IBM, Citi, MS Live Search Maps, esurance, Disney  (here)

No. 2 online retailer Office Depot   (Forrester 2006)

Check out the clients/references/testimonials of big players on the testing market.


On the other scale, compared to Amazon e.g. eBay (great filtering, but too many links on category pages, also poor product page) overdose the “listening to the user” research (source @ 19mins). The best is mid-way.

Real-life conversion case studies

http://visualwebsiteoptimizer.com/ideafox.php (search engine that searches http://www.avangate.com/clients/case-studies/ , and many more…) TIP
[my Rollyo/GSE search engine here]
http://visualwebsiteoptimizer.com/split-testing-blog/how-replacedirect-used-ab-testing-to-reduce-cart-abandonment-by-25/  Most important, they added a product overview and removed redundancy
http://www.youshouldtestthat.com/ http://www.pitstopmedia.com/sem/
Google: (keywords, e.g. navigation removed check-out) (case OR) found OR results converted OR conversion OR optimized OR optimization (OR “A/B” OR MVT)

Optimization resources

(websites and blogs dedicated to testing and optimization):

  1. http://www.elasticpath.com/
  2. www.getelastic.com
  3. http://www.paulrouke.co.uk/
  4. http://www.marketingexperiments.com/blog/category/research-topics/landing-page-optimization-research-topics  (Marketing Experiments blog, a bit harder to find actual results) +
  5. http://www.grokdotcom.com/ +-
  6. http://www.widerfunnel.com
  7. testingblog.widemile.com/
  8. http://www.marketingsherpa.com/ have some of the best marketing data
  9. http://websiteoptimizer.blogspot.com/
  10. http://www.uxbooth.com/ +
  11. http://www.conversationrate.com/
  12. unbounce.com  (NV)
  13. http://blog.clicktale.com/
  14. http://conversionxl.com/

More @ http://www.seoptimise.com/blog/2010/07/30-multivariate-ab-split-testing-tools-tutorials-resources.html (see ‘Case studies’)

Directory of more web resources


Secondary resources

…but still worth checking now and again


Best practices

http://econsultancy.com/uk/blog/tags/design ++
– http://econsultancy.com/nl/blog/63462-ecommerce-product-pages-where-to-place-30-elements-and-why


Surprising results



http://www.amazon.com/Landing-Page-Optimization-Definitive-Conversions/dp/0470174625/ref=pd_sim_b_7 (more about measuring and theory, rather than hands-on practical case studies)