Above the fold

Last updated
Headline from December 7, 1941 above the fold Honolulu Star-Bulletin December 7th 1941.jpg
Headline from December 7, 1941 above the fold

Above the fold is the upper half of the front page of a newspaper or tabloid where an important news story or photograph is often located. Papers are often displayed to customers folded so that only the top half of the front page is visible. Thus, an item that is "above the fold" may be one that the editors feel will entice people to buy the paper. Alternatively, it reflects a decision, on the part of the editors, that the article is one of the day's most important. By extension, the space above the fold is also preferred by advertisers, since it is the most prominent and visible even when the newspaper is on stands.

Contents

The term can be used more generally to refer to anything that is prominently displayed or of highest priority. Above the fold is sometimes used in web development to refer the portions of a webpage that are visible without further scrolling or clicking. In contrast, portions available via clickthrough are sometimes described as "after the jump".

In web design

Above the fold is also used in website design (along with "above the scroll") to refer to the portion of the webpage that is visible without scrolling. [1] As screen sizes vary drastically [2] there is no set definition for the number of pixels that define the fold. This is because different screen resolutions will show different portions of the website without scrolling. Further complicating matters, many websites adjust their layout based on the size of the browser window, such that the fold is not a static feature of the page.

A 2006 study by Jakob Nielsen found that 77% of visitors to a website do not scroll, [3] and therefore only see the portion of the website that is above the fold. In a more recent article by Amy Schade [4] and NNgroup it is stated that there is an 84% average difference in how users treat the content above and below the fold, there is a big dropoff in attention below the fold. Most web design advice available today encourages designers to place important information at the top of the website, but also to prioritize usability and design. [5] [6] [7]

Nevertheless, many web advertising companies require ads be placed above the fold. Marketing research done by Google shows that the viewability of adverts is affected by its position in relation to the fold as there is a significant drop-off below the fold. [8] Each company tends to use their own definition of the fold. The BlogHer advertising network, for example, defines the fold as the top 768 pixels of the page. [9] The FoodieBlogRoll advertising network defines the fold as the top 1000 pixels. [10]

Other variants

Newspaper stories that appear below the fold are said to be located "under the fold." [11]

Internet search query results appear much in the same way. Many web site optimization efforts may be exerted in an attempt to gain the highest "search indexing" or "ranking" placement (as close to first place as possible) for directed term(s) or phrase(s). Using natural or "organic" web site optimization practices has been the standard operating procedure for attaining higher indexing with the end result being the web site appearing in the view area or "above the fold" of the search results pages and especially the first page.

The term is infrequently used in reference to resume and CV (curriculum vitae) layout, where the most crucial and relevant (to the job sought) information must be in the top third, alternately called the "hot zone", to catch the attention of the reader. [12] Since most applicants file credentials electronically, and applications are no longer folded in thirds to fit in an envelope, the advice remains, even though the means of distribution has changed.

Below the fold

"Below the fold" refers to the parts of a newspaper or tabloid that are not on the first half of the first page, and are therefore less prominent. It can also refer to the part of a webpage that do not show until one scrolls down.

When Apple was ordered to display acknowledgements that Samsung did not infringe their designs, complaints surfaced because JavaScript code on its UK webpage kept the acknowledgement hidden "below the fold". [13]

Related Research Articles

<span class="mw-page-title-main">Home page</span> Main page of a website

A home page is the main web page of a website. The term may also refer to the start page shown in a web browser when the application first opens. Usually, the home page is located at the root of the website's domain or subdomain. For example, if the domain is example.com, the home page is likely located at www.example.com/.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

<span class="mw-page-title-main">Scrollbar</span> Graphical user interface element

A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction on a computer display, window, or viewport so that all of the content can be viewed, even if only a fraction of the content can be seen on a device's screen at one time. It offers a solution to the problem of navigation to a known or unknown location within a two-dimensional information space. It was also known as a handle in the very first GUIs. They are present in a wide range of electronic devices including computers, graphing calculators, mobile phones, and portable media players. The user interacts with the scrollbar elements using some method of direct action, the scrollbar translates that action into scrolling commands, and the user receives feedback through a visual updating of both the scrollbar elements and the scrolled content.

<span class="mw-page-title-main">Jakob Nielsen (usability consultant)</span> American computer scientist and usability professional (born 1957)

Jakob Nielsen is a Danish web usability consultant, human–computer interaction researcher, and co-founder of Nielsen Norman Group. He was named the “guru of Web page usability” in 1998 by The New York Times and the “king of usability” by Internet Magazine.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

Overscan is a behaviour in certain television sets in which part of the input picture is cut off by the visible bounds of the screen. It exists because cathode-ray tube (CRT) television sets from the 1930s to the early 2000s were highly variable in how the video image was positioned within the borders of the screen. It then became common practice to have video signals with black edges around the picture, which the television was meant to discard in this way.

In human–computer interaction, a cursor is an indicator used to show the current position on a computer monitor or other display device that will respond to input.

Tableless web design is a web design method that avoids the use of HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.

<span class="mw-page-title-main">Font hinting</span> Technique for improving font rendering

Font hinting is the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At low screen resolutions, hinting is critical for producing clear, legible text. It can be accompanied by antialiasing and subpixel rendering for further clarity.

User experience design defines the experience a user would go through when interacting with a company, its services, and its products. User experience design is a user centered design approach because it considers the user's experience when using a product or platform. Research, data analysis, and test results drive design decisions in UX design rather than aesthetic preferences and opinions. Unlike user interface design, which focuses solely on the design of a computer interface, UX design encompasses all aspects of a user's perceived experience with a product or website, such as its usability, usefulness, desirability, brand perception, and overall performance. UX design is also an element of the customer experience (CX), and encompasses all aspects and stages of a customer's experience and interaction with a company.

<span class="mw-page-title-main">Thumbnail</span> Reduced-size versions of images or videos

Thumbnails are reduced-size versions of pictures or videos, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words. In the age of digital images, visual search engines and image-organizing programs normally use thumbnails, as do most modern operating systems or desktop environments, such as Microsoft Windows, macOS, KDE (Linux) and GNOME (Linux). On web pages, they also avoid the need to download larger files unnecessarily.

<span class="mw-page-title-main">Mystery meat navigation</span> Concept in software development

Mystery meat navigation is a form of web navigation user interface whereby the target of each link is not visible until the user points their cursor at it. Such interfaces lack a user-centered design, emphasizing aesthetic appearance, white space, and the concealment of information over practicality and functionality. The term was coined in 1998 by Vincent Flanders, author of the book and accompanying website Web Pages That Suck.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

In the online advertising industry, a viewable impression is a measure of whether a given advert was actually seen by a human being, as opposed to being out of view or served as the result of automated activity. The viewable impression guidelines are administered by the Media Rating Council and require that a minimum of 50% of the pixels in the advertisement were in an in-focus tab on the viewable space of the browser page for at least one continuous second.

<span class="mw-page-title-main">Web navigation</span> Following hyperlinks on the World Wide Web

Web navigation refers to the process of navigating a network of information resources in the World Wide Web, which is organized as hypertext or hypermedia. The user interface that is used to do so is called a web browser.

Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser. Web performance optimization (WPO), or website optimization is the field of knowledge about increasing web performance.

<span class="mw-page-title-main">Responsive web design</span> Approach to web design for making web pages render well on a variety of devices

Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.

Flat design is a minimalist design language or design style commonly used in graphical user interfaces (GUI), and also in graphical materials such as posters, arts, guide documents and publishing products.

Google PageSpeed is a family of tools by Google, Inc. designed to help optimize website performance. It was introduced at Developer Conference in 2010. There are four main components of PageSpeed family tools: PageSpeed Module, consisting of mod PageSpeed for the Apache HTTP Server and ngx PageSpeed for the Nginx, PageSpeed Insights, PageSpeed Service, and PageSpeed Chrome DevTools extension. These components aim to identify and automatically correct deviations from Google's Web Performance Best Practices.

<span class="mw-page-title-main">Hamburger button</span> User interface element

The hamburger button, so named for its unintentional resemblance to a hamburger, is a button typically placed in a top corner of a graphical user interface. Its function is to toggle a menu or navigation bar between being collapsed behind the button or displayed on the screen. The icon which is associated with this widget, consisting of three horizontal bars, is also known as the collapsed menu icon.

References

  1. Fadeyev, Dmitry (2009-09-24). "10 Useful Usability Findings and Guidelines | Smashing UX Design". Uxdesign.smashingmagazine.com. Archived from the original on 2013-12-05. Retrieved 2013-12-05.
  2. "Browser Display Statistics". W3schools.com. Retrieved 2013-12-05.
  3. Fadeyev, Dmitry (2009-09-24). "10 Useful Usability Findings and Guidelines | Smashing UX Design". Uxdesign.smashingmagazine.com. Retrieved 2013-12-05.
  4. Schade, Amy (2015-02-01). "The Fold Manifesto: Why the Page Fold Still Matters". NNgroup. Retrieved 2016-11-13.
  5. "Life Below 600px | Paddy Donnelly". Iampaddy.com. Retrieved 2013-12-05.
  6. Milissa Tarquini (2007-07-24). "Blasting the Myth of the Fold « Boxes and Arrows". Boxesandarrows.com. Retrieved 2013-12-05.
  7. Fadeyev, Dmitry (2009-09-24). "10 Useful Usability Findings and Guidelines | Smashing UX Design". Uxdesign.smashingmagazine.com. Archived from the original on 2013-12-05. Retrieved 2013-12-05.
  8. "The importance of being seen" (PDF). Google. 2014. Retrieved 2016-11-13.
  9. Humaciu, Audrey. "Publishing Network Member Guide". BlogHer. Archived from the original on 2013-12-08. Retrieved 2013-12-05.
  10. "FAQ". Foodie Blogroll. 2010-12-17. Archived from the original on 2013-12-11. Retrieved 2013-12-05.
  11. "Is above the fold design still relevant in 2016". discoverydesign.co.uk. Retrieved 2016-06-22.
  12. Fennell, Andrew (2017-05-26). "This Is The Part Of Your Resume That Recruiters Look At First". Fast Company. Retrieved 2020-03-15.
  13. Arthur, Charles (2012-11-09). "Apple accused of dragging feet over Samsung court order". The Guardian. London.