Designing for the New Fold
•Download as PPTX, PDF•
8 likes•1,052 views
Designing for the ‘fold’ has long been a priority for many Web Designers, but with so many devices capable of displaying your website, how on earth do you know where it is? Should we be worried? This article asks how important the ‘fold’ actually is, the variables at play, changing browsing habits and what you can do about it. The Death of the Fold is upon us, at last!
Recommended
Recommended
More Related Content
What's hot
What's hot (13)
Similar to Designing for the New Fold
Similar to Designing for the New Fold (20)
Recently uploaded
Recently uploaded (20)
Designing for the New Fold
- 1. Web Design Theory Sessions Session 2Designing for the New Fold: Web Design Post Monitorism Presented by: HashemE.Zahran.
- 2. Session 2Content 1 4 3 6 2 5 New Fold Design Strategies The Death of the Fold New Fold Problems The Fold in Action Introduction: The old Fold Conclusion Designing for the New Fold
- 3. The Death of the Fold 1 Browsing the World Wide Web is no longer a task confined to desktop computers.
- 4. Why? Because the traditional “screen” that people view the web through has undergone an explosion of variety… we can no longer expect web-surfers to be on something close to a 19″ monitor with a resolution somewhere between 1024×768 and 1280×700. Screens nowadays come in all shapes and sizes, from iPhones (and smaller phones) to 60″ HDTVs. The Death of the Fold is at last upon us
- 5. 2 Introduction: The old Fold If you have had any graphic design education, you will likely be familiar with the term ‘above the fold’. If not, let us take a brief moment to explain.
- 8. Phooey Now, at this point some of you may be thinking, or even shouting (given the amount of debate this subject seems to cause) that the ‘fold’ is irrelevant and any discussion of it should be confined to the history books.
- 9. Phooey The notion that a web designer is restrained to a small portion at the top-part of the screen is absurd. We would like to believe that all web users scroll and that we have the freedom to express ourselves and create a design in as much space as it takes.
- 10. Phooey Undoubtedly there has been many an argument between a web designer and their client as to the importance of the ‘fold’ and this may have contributed to the somewhat bad reputation it has.
- 11. Phooey On the other hand, to disregard the idea of the ‘fold’ entirely would be a mistake, and you would miss out on a potentially powerful design technique as we will see below.
- 12. 3 The Fold in Action The importance of that first impression is recognized
- 13. Kaleidoscope The beautifully crafted website for the Kaleidoscope app is an excellent example of designing with ‘the fold’ in mind.
- 14. It will always be second nature to include the key messages and call-to-action material near the top of a site design… but dogmatically trying to squeeze content above the fold is no longer a strategy that should chain down your designs. Science of Web Design
- 15. The Problem withThe New Fold 4 quick peek at the browser resolution statistics
- 16. Resolution Stat
- 17. 5 Strategies for Designing for the New Fold how on earth is it possible to know where the ‘fold’ is?
- 18. is it possible to know where the ‘fold’ is? A more sensible approach would be to design for general, ratio based folds that would take both landscape and portrait orientated browsing into consideration…
- 19. The Bigger Picture “…In the study, they found that 76% of users scrolled and that a good portion of them scrolled all the way to the bottom, despite the height of the screen.”
- 20. 6 Conclusion Final Statement
- 21. The traditional concept of designing for the ‘fold’ appears to be somewhat outdated when it comes to modern web design. We have seen that a combination of variables and a change in the browsing methods of many people means that a fixed position of the ‘fold’ line cannot safely be established. Web users are also very much prepared to scroll; especially with multi-touch devices such as the IPad that make the task very intuitive.
- 22. However it does not mean that the ‘fold’ should be disregarded completely. The ‘fold’ can still be an effective element in any design. There can be no doubt that first impressions do indeed count in web design and this space can be used to not only capture your audience but also lure them further down the page. Reserve this area for your most essential information while reassuring your clients that visitors will still see that paragraph on their history further down the page.
- 23. With no signs that mobile browsing is slowing, an argument can also be made for designing for a second ‘fold’ line for those browsing using a portrait-oriented device. It should not be detrimental to your design in any way and will only give those using such devices an added bonus. So, What do you guys think? Do you still attempt to design for the fold? Is it a case that we designers are already aware of such changes and is it the clients that we need to educate?
- 24. ? This is it…Any questions? www.HashemZahran.com - www.eSpace.com.eg - Follow me: @antikano
Editor's Notes
- Designing for the ‘fold’ has long been a priority for many Web Designers, but with so many devices capable of displaying your website, how on earth do you know where it is? Should we be worried? This article asks how important the ‘fold’ actually is, the variables at play, changing browsing habits and what you can do about it. The Death of the Fold is upon us, at last!
- Topics to be covered in this session, Designing for the New fold & Web Design post Monitorism
- Designing for the ‘fold’ has long been a priority for many Web Designers, but with so many devices capable of displaying your website, how on earth do you know where it is? Should we be worried?
- Browsing the World Wide Web is no longer a task confined to desktop computers. Mobile browsing seems to be increasing day by day and many more devices such as Internet-ready televisions are becoming readily available.It’s not just resolution that can vary wildly though; the very aspect ratio of a screen (even on the same device like the iPhone) can change with the flick of the wrist. Sure, web designers will always be advised to keep the most important messages of a site near the top, but with so many new ways for web-surfers to view the web, there’s no longer a defined height for where content must be above.
- If you have had any graphic design education, you will likely be familiar with the term ‘above the fold’. If not, let us take a brief moment to explain.
- The term was first used in reference to traditional media, newspapers to be precise. The thinking is that newspapers are often delivered or displayed folded up and the area ‘above the fold’ will be the first that the reader sees and it is therefore a prominent and important location. Eye-catching headlines and striking imagery are often displayed to attract the reader’s attention.The phrase was naturally transferred to the field of Web Design when it became popular in the last 90′s. It is more or less the same concept, except the area above the fold is instead the area that the user can immediately see without scrolling (not as catchy, right?). This area is the ideal area to place bold introductions, essential information, enticing imagery and call to action elements. It is also the preferred space for any advertisements.
- Everything below 600 pixels was irrelevant, second-tier content… not worth the effort for a dignified web designer to concern themselves with.in the first five seconds of visiting. Usability expert Jakob Nielsen has also suggested that users spend up to 80% of their time viewing information above the fold.The importance of the area above the fold seems to be supported by the ‘five second rule’ that is commonly quoted within Web Design; which states users pass judgment on a site withThe importance of the “fold” over the past decade can not be overly emphasized in it’s historical context… Hotly contested debates were held in many design-studios and marketing agencies about where, precisely, the fold was. Large amounts of money were spent on market data to predict the optimal placement of ads, and entire designs were thrown out the window because they didn’t maximize the use of the “above the fold” space. The almighty fold, at the height of its importance, was defined as one of three horizontal lines at 570, 590 and 600 pixels.
- Now, at this point some of you may be thinking, or even shouting (given the amount of debate this subject seems to cause) that the ‘fold’ is irrelevant and any discussion of it should be confined to the history books.
- The notion that a web designer is restrained to a small portion at the top-part of the screen is absurd. We would like to believe that all web users scroll and that we have the freedom to express ourselves and create a design in as much space as it takes. Some have even got pretty creative in demonstrating that people are willing to scroll.
- Undoubtedly there has been many an argument between a web designer and their client as to the importance of the ‘fold’ and this may have contributed to the somewhat bad reputation it has.A client, overestimating the importance of the fold, may request everything and the kitchen sink to be squeezed and crammed into that relatively small space and the web designer will be left frustrated that they cannot demonstrate their skill for position, alignment and subtle use of white space.
- The key to this issue, as with many other design aspects, is achieving a balance. Obviously, confining yourself to a small part of the screen would limit your creativity and design options. On the other hand, to disregard the idea of the ‘fold’ entirely would be a mistake, and you would miss out on a potentially powerful design technique as we will see below.
- Understanding that visual hierarchy is important is all fine and well, but how does a designer actually create it? The “tools” that we’ll look at are as simple as a carpenter’s toolset – hammer, nail, saw, etc – It’s what you do with them is what counts!
- The large title, an introductory paragraph, an eye-catching image and call to action elements are all instantly visible and available to the user. Notice how supplementary information under the heading ‘Learn more’ falls beneath the cut-off point. The ‘fold’ has clearly been considered in the design of this website, yet scrolling down will reveal a vast amount of information and many more detailed design elements. It is apparent that the designers of the website still expect users to scroll.
- You will find similar design patterns implemented across many large web sites. The importance of that first impression is recognized, yet a much larger area is fully utilized to tell a story and communicate the information they need to. The area ‘above the fold’ is often used to lead and guide to the user further down the page and to the areas the designer wants the user to see. It is indeed an important skill to have, to be able to grab a user’s attention, yet keep them intrigued enough to remain on the site and actually seek out new information and content.If you visit the Kaleidoscope website for yourself however, you will more than likely be presented will a somewhat different view. You may be able to see more or less of the website – and here is the problem that faces every web designer. How can you design for the fold if you don’t know where it is for any particular visitor? There are many different factors that combine to determine the physical size of the area ‘above the fold’.
- Web Designers are well used to designing with browsers in constant consideration. The many quirks and inconsistencies have frustrated us for years and they also play a role in this conundrum. Each individual browser will take up a different proportion of the screen depending on the size of the browser U.I and any additional toolbars. The trend with modern browsers does seem to be positive however as they appear to be occupying less space than previously. The developers of Google’s Chrome, Safari and Internet Explorer 9 have realised that there is a better browsing experience when there is little to distract users from the website itself.
- Today, there is also such a multitude of monitor size and screen resolution combinations that it proves almost impossible for a ‘one-size fits all’ web design. Many years ago, it was established that 1024×768 was the most common screen resolution and this appears to be what most designers still design for. The resolution statistics from ZaHitch Blogs alone demonstrate the scale of the problem for designers.Let’s take a quick peek at the browser resolution statistics for the ZaHitch Blogssite for a quick case study:
- So with all of these variables, how on earth is it possible to know where the ‘fold’ is?
- The truth is you can’t. With so many variables in play it is almost impossible to know exactly where the fold line will be. Fast-forward just one or two years and we’re likely to see even more changes to the screen environment. This all just means that the previous advice to design within the first 600px cannot be safely relied upon anymore. It would appear that striving for pixel perfection will only leave you frustrated.
- many research studies have been conducted that debunk the importance of the fold, even back when it did exist. The conclusions: even when you do use a fixed monitor size (ie: 1024 x 768), people surfing the web not only glance below the fold… they often spend most of their time there!
- To conclude, I’d like to end with a very simple exercise. As the example, we’ll use a website that you frequent, or a project that you’ve worked on recently; The exercise goes like this:
- The traditional concept of designing for the ‘fold’ appears to be somewhat outdated when it comes to modern web design. We have seen that a combination of variables and a change in the browsing methods of many people means that a fixed position of the ‘fold’ line cannot safely be established. Web users are also very much prepared to scroll; especially with multi-touch devices such as the IPad that make the task very intuitive.
- However it does not mean that the ‘fold’ should be disregarded completely. The ‘fold’ can still be an effective element in any design. There can be no doubt that first impressions do indeed count in web design and this space can be used to not only capture your audience but also lure them further down the page. Reserve this area for your most essential information while reassuring your clients that visitors will still see that paragraph on their history further down the page.
- With no signs that mobile browsing is slowing, an argument can also be made for designing for a second ‘fold’ line for those browsing using a portrait-oriented device. It should not be detrimental to your design in any way and will only give those using such devices an added bonus.
- If you have any questions feel free to contact me any time. Or Follow me on Twitter @antikano