Understanding Scroll Design Concepts

Posted on October 29, 2012 by

In the web design community, there’s an ever-growing argument that it is necessary to design for the scroll. Proponents argue that it is necessary to produce stellar design concepts for the part of the website visitors first see. However, these approaches are affected greatly by changes in technology. For example, where the scroll lands is current determined by the size and the resolution of the monitor.

Actually it was the print design that first coined the term “above the fold”. The concept is widely employed by newspapers and today it is still the basis of the theory that buyers of newspaper are influenced by the headline. Newspapers put important text and photographs, at the top-half of the layout which is visible when newspapers are fold. The concept also works well on web design as designers always put most interesting and attractive stuff just under the header, which readers can see without using the mouse. But getting the right content above the scroll is increasingly trickier than ever. Not only users use varying screen resolutions and sizes, they also use different devices. A smartphone with 2.8” screen render web layouts very differently compared to a 21” wide-screen HD computer monitor. Many web designers currently implementing “above the scroll” concept use about 500 pixels of the uppermost part of the layout. Based on Google Labs’ statistics, without scrolling, 90 percent of Internet users can see up to 500 pixels of uppermost part of the layout, 60 percent for 600 pixels and only 30 percent for 700 pixels.

Above the scroll design
Since early days of the Internet, web designers have been building layouts using ‘above the scroll’ concept. In 1990’s, many webpages fit precisely on the screen and users were not used to scrolling. This approach helped them to get essential information without moving the mouse cursor too much. But this isn’t the case anymore. Above the scroll approach has been adapted to very long webpages and today the uppermost part of the layout acts more like a book cover. The first impression designers leaves on users help them decide whether they want to stay or move on. The message you convey and the visuals you present are important. Creating a highly effective above-the-scroll design is actually an art. Web designers must be conscious of trying to do too much or overcrowding the limited space. Web designers should keep the uppermost part of the layout simple and seek to include important elements such as website or company logo, branding details, navigational interface and introduction text.

Design for the Scroll
Many web designers are creating visuals and layout for the scroll. Using vertical space to create different shapes of visuals can open up many new possibilities. Design for the scroll is essentially an extension of the ‘above the scroll’ approach. After you make users stop on the uppermost part of your layout, you need to encourage them to scroll until the bottom of the page. Design for the scroll can only work on a successful first-impression web design with clean and sharp layout. This is definitely a better path to choose than sticking only with the above the scroll approach as users shouldn’t stop only at the first 500 pixels of the layout. After capturing users’ attention, web designers should continue with thematic and interesting elements down the scroll. Always use consistent fonts and color schemes. Follow up with strong text and sharp images.

If your webpage is particularly deep, anchor important elements at various positions of the webpage; so it would be easier for users to get around the website. It is also helpful to incorporate links and buttons that pop users back to the top of the webpage or to previous elements.

Latest developments
Tablets, smartphones and other mobile devices are making two concepts mentioned above look murkier. From smartphones to tablets to laptops to desktops to smart TVs, people are getting used to devices with varying screen sizes. Variance in screen size, resolution and device make the proper location of the scroll a bit unclear. The essential concept for any web design project is always usability. To deal with this complicated issue, web designers can keep functional buttons at the top of the layout so they’re always accessible to users waiting for the entire webpage to load completely. If possible, test your layout on as many devices as possible. Members of your design team should have a wide range of devices, allowing you to check usability better. Keep up with changing technology and trends, because the landscape and the look of web design industry change continuously.

Above the scroll design is an old concept and many may argue that it is outdated. Nevertheless, this is still a valid concept in web design. Properly used, this approach can engage your users and get first-time visitors interested in your website. Design for the scroll is an extension of the above the scroll concept and it can keep you users glued to the webpage. Content should drive the webpage presentation and by properly using a couple of scroll design concepts mentioned in this article, you can establish a visually appealing, readable and clean layout.

Author :

  • Adam Scott