Jump to Content

Objective HTML

Archives 04/2011

Scrolling on a web page is not a feature, it’s a requirement

There are too many times I have heard from a client, "Can you just decrease the font and take out some spacing to the page doesn't scroll?" Or even better, "My friend that is a graphic designer didn't like the design. He (or she) said the page shouldn't scroll." And best yet, "Can you make all the stuff on the page appear above the fold?" And my response is always the same, "WHAT!? What do you mean by fold?"

I simply don't understand why people expect all the content on a page to appear above the bottom of their screen, as if their screen's size and resolution is the same as everyone else. Of course that is the part they or their "graphics designer" friend failed to realize. (I have heard the "graphics designer" plea more than once.) It's 2011 and mainstream consumers have been familiar with the (PC) desktop paradigm for more than a decade, and a scroll wheel comes standard on almost every mouse. Most tracpads even support some sort of touch-to-scroll gesture. On top of that, we have an upsurge of mobile devices that revolve around touching and scrolling through pages of content on comparatively smaller screen.

I think it's a fair expectation to assume that people browsing the web understand the concept of scrolling. And even in the exceptionally rare case that a person doesn't know how to scroll actually managed to navigate to the page, the amount of users would be so rare that it wouldn't be worth talking about. Plus would a person so unfamiliar with the internet actually be using the internet to contact the business owner instead of using a phone? From my experience such people always go for the phone.

And despite all our rational and logical thinking, careful planning, and meticulous design, the client routinely wants us to rework the page so the content fits "above the their fold". They usually follow it by saying we should "dumb it down for the user", as if the correction solution for "dumbing it down for them" is making text smaller and reducing the white space that aids in legibility. First, quality design needs no explanation, thus any user can figure it our regardless of intelligence. And secondly (and most importantly), the content is the driving factor of the length of the page, not the size of the "stuff on the their page".

Screenshot of the homepage of allthingsd.com
  • Screenshot of the homepage of allthingsd.com
  • Screenshot of the top page of the article page
  • Screenshot of the second part of the article page
  • Screenshot of the third part of the article page
  • Screenshot of the bottom part of the article page

Admittedly, content can be arranged in a bad way that may cause scrolling to occur. An example of a terribly designed site that is more focussed on page views that actual content is allthingsd.com. The entire focus of the user is within the middle column that is 380px wide, which is entirely too narrow for the amount of content on each page. In my opinion, the whole thing (and every other standard newspaper webpage template) needs redesigned. Not because scrolling is bad (or good), but because the site is cluttered, overly busy, and hard to read. The two side columns serve very little purpose except for redirection. Plus, there is no need to see an about the author on every single page. Instead, provide a link to the author's profile page or blog. The only thing that would make this site worse is paginating the articles. Pagination is for reading books, and newspapers, not scrolls, and not certainly webpages that are built to scroll. Pagination only helps site owners and advertisers get more pages views and waste their users' time. There is no credible evidence that supports paginating news articles increases reading comprehension, and in fact I believe it does the opposite.

So what is an example of quality design? Fortunately it's getting harder to find sites that needlessly paginate and "avoid the fold". visitphilly.com is a gorgeous site that uses a nice full screen image to initiate warm and enticing feeling for the city. The logo and banner are overlaid and the image is certainly a main focal point, but not the main content. The drop downs are used very effectively and certainly serve more purpose than just "navigation". The navigation is driven from the content itself, not the other way around. The subpages are more focused towards the top, but almost all require some sort of scrolling to reveal the main content. Everything has a place and purpose. They implemented quality user direction and a nice degree of fluidity to the design. Designs like this are what the web is all about.

Another quality site from the same designers is happycoghosting.com. This site features a very fluid design that will change depending on the browser size and an excellent, straight to the point implementation. Again, it matters not that the page scrolls because the intent of the content is very clear and legible. There is no struggling to find the purpose of the site.

And one more quality site (amongst many) worth mentioning, is http://hicksdesign.co.uk. The layout is very flexible and fluid. The design is more than just novel and unique, it's very functional. These all have things that make a quality site, but one thing it's not is keeping the content above a fictional fold.

So to some things up, using the web without scrolling is like driving a car without turning. Sure some people are too afraid to make left turns, but we don't design our transportation system based on those few individuals.