The Importance Of Keeping Ahead Of The Digital Curve: Above The Fold Web Design
What is it that makes some websites faster than others? We’ve all come across websites which seem to load almost instantly even though they’re full of media content, but we’ve also all landed on a website and been made to wait and wait until the images have loaded (usually after the text), and then wait for the web fonts and the stylesheets to kick in. So if all of these sites are equally large, why do some have a kick start and others don’t?
Above The Fold Web Design: First Impressions Count
For both website owners and Google, having a fast loading page time is essential. But there is more to consider than the overall speed. When visitors land on a site, the first thing they see is the “above the fold (ATF) content”. This is everything they see on their screen before they start scrolling down the page. This area of your site creates the first impression, and must contain all the relevant information for visitors to immediately know what your site is about. This is where above the fold web design comes in: websites need to be designed and coded so the ATF area loads faster than the rest of the website.
Optimize Your HTML
First of all, the HTML code of your website needs to be optimized to determine which elements of your website load first. For example, if your homepage consists of your original content (text), a logo (image) and a social media feed sidebar (widgets drawing from external sites), these three elements load at different speeds. The text loads quickest, the logo image comes second as its file size is bigger than the text, and finally up comes the social media sidebar as it relies on the response of external sites. An optimized example of HTML code would load the text first, the image second and the sidebar third. Your visitors can start reading your original content whilst they wait for the logo to load and then the sidebar.
Above The Fold Web Design In Action
So, the HTML of your entire site is now optimized to load the right components in the correct order. But this on its own is not enough. The HTML code which structures the physical layout of the page pulls on external CSS stylesheets – and often jQuery libraries – to add the visual styling of fonts, colors, text, etc and to make elements move, fade or toggle. But loading these external code sheets takes time. So, if your HTML requests the stylesheets for the whole website all at the same time, the entire website needs to load up the HTML first, then apply the styling, meaning that visitors will have to wait before they see a final version of the site.
Above the fold web design simply ensures that the ATF content area is separated from the rest of the website, and has its own styling CSS embedded in the HTML code instead of calling on the external stylesheets. This means that when the optimized HTML code of the ATF content loads, it loads the styling for this area simultaneously. In turn, the visitors will see a fully loaded ATF area before the HTML of the rest of the site even loads. Whilst the visitors are exploring this part of your site, the code has enough time to load the rest of the page and the CSS.
Checklist: How To Load Above The Fold Content First
- Prioritize your HTML code (ATF content first)
- Include any CSS styling within the ATF HTML
- Postpone any JavaScript from loading until the entire page has loaded
- If the ATF content needs to include a sidebar with social sharing/widgets, break the sidebar into above and below the fold elements and load the ATF part first with inline CSS.
- Make sure you only have one external CSS stylesheet associated with your website
- Don’t forget mobile and tablet versions of your website
Make sure you really plan your website and implement the above the fold web design ideas to get the best results. If you prepare this before you start building, you will create a delightful and fast website for all of your visitors.