Designing A Website Above The Fold

Designing a website ABOVE THE FOLD ABOVE THE FOLD - THE PART OF THE PAGE WHICH IS VISIBLE WITHOUT HAVING TO SCROLL DOWN. THE CONCEPT ORIGINALLY CAME FROM NEWSPAPERS, ANYTHING ON THE UPPER HALF OF THE FRONT PAGE WAS CONSIDERED 'ABOVE THE FOLD'. THE WORDS 'ABOVE THE FOLD' IS A TERM THAT HAS RAISED A LOT OF QUESTIONS WITH DESIGNERS IN THE PAST. THE MAIN TOPIC OF CONVERSATION IS WHAT SHOULD BE KEPT ABOVE THE FOLD AND WHAT SHOULD BE KEPT BELOW. WITH THE RISE OF MOBILE INTERNET BROWSING, TABLET USAGE AND EVOLUTION OF COMPUTER SCREEN SIZES, THE ROLE OF THE FOLD IS FOREVER-CHANGING. THEREFORE, IT'S NOT A RULE THAT SHOULD BE LIVED BY BUT RATHER SOMETHING TO CONSIDER. SCREEN RESOLUTION THESE DAYS, MOST PEOPLE USE SCREEN SIZES LARGER THAN 1024 X 768. HERE'S HOW IT HAS CHANGED OVER THE LAST 5 YEARS. AS THE SCREEN SIZE INCREASES, MORE INFORMATION CAN BE INCLUDED 'ABOVE THE FOLD'.THEREFORE, THE FOLD BECOMES UNDEFINABLE. HIGHER 1024X768 800X600 2008 2009 2010 2011 2012 6% 8% 48% 38% 3% 4% 36% 57% 3% 1% 20% 76% 1% 14% 85% 1% 1% 13% 85% SCROLLING DESIGN TIPS IT'S REALLY USEFUL TO BEAR THE STATISTICS IN MIND TO ACT AS A ROUGH GUIDE. THEY CLEARLY DEMONSTRATE THAT THE FOLD IS A LOT LESS RELEVANT THESE DAYS AND THAT IT IS ACTUALLY QUITE DIFFICULT TO DEFINE. BEING AWARE THAT THERE IS A FOLD BUT NOT DICTATING YOUR WEB DESIGN TO IT WILL PRODUCE THE BEST RESULTS. DON'T TRY TO CRAM EVERYTHING IN AT THE TOP OF THE PAGE - SPREAD YOUR CONTENT OUT AND DIVIDE INTO DIGESTIBLE CHUNKS. INCLUDE A CLEAR HEADING AND DESCRIPTION OF WHAT YOUR WEBSITE OFFERS YOUR VISITOR AT THE VERY TOP. 23% 23% OF VISITORS SCROLL ON THEIR FIRST VISIT TO A WEBSITE. HOWEVER, IF YOU HAVE A WELL DESIGNED WEBSITE THEN VISITORS ARE MORE THAN WILLING TO SCROLL. • MAKE SURE YOU HAVE A CLEAR NAVIGATION SYSTEM IN PLACE DIRECTING YOUR VISITOR TO USEFUL PAGES AND AREAS THAT THEY ARE LOOKING FOR. YOUR COPY SHOULD BE ENGAGING AND LEAD SOMEWHERE. THIS WILL ENCOURAGE YOUR VISITOR TO CARRY ON READING AND SCROLL DOWN THE PAGE. IN OUR STUDY, USER VIEWING TIME WAS DISTRIBUTED AS FOLLOWS: BELOW INCLUDE USEFUL INFORMATION BELOW THE FOLD AS WELL. YOU NEED TO SPREAD YOUR INFORMATION OUT SO HAVE THINGS SUCH AS CONTACT INFORMATION AT THE BOTTOM. ABOVE • TEST YOUR WEBSITE ACROSS DIFFERENT BROWSERS AND DEVICES TO MAKE SURE YOU ARE MAKING THE MOST OF YOUR FOLD. 39.3% 35.2% BROWSERS USED IN 2012 PREVIOUSLY IN WEB DESIGN THE FOLD WAS BASED ON THE MOST COMMON BROWSER SIZES. STUDIES HAVE SHOWN THAT FIREFOX, CHROME AND INTERNET EXPLORER ARE THE MOST POPULAR BROWSERS THAT ARE USED. HOWEVER, THIS ALSO DEMONSTRATES THAT THERE IS NOT NECESSARILY A SET BROWSER WHICH MAKES THE FOLD LESS RELEVANT. 18.1% 4.3% 2.2% INTERNET FIREFOX CHROME SAFARI OPERA EXPLORER Sources: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3schools.com/browsers/browsers_os.asp http://www.useit.com/alertbox/scrolling-attention.html f Basekit E @basekit Basekit www basekit.com BK basekit