designing for the new fold
DESCRIPTION
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!TRANSCRIPT
![Page 1: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/1.jpg)
Web Design Theory Sessions
Session 2
Designing for the New Fold: Web Design Post Monitorism
Presented by: Hashem E.Zahran.
![Page 2: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/2.jpg)
Session 2 Content
Designing for the New Fold
1The Death of the Fold
2Introduction:
The old Fold
3The Fold
in Action
4New Fold Problems
5New Fold
Design Strategies
6Conclusion
![Page 3: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/3.jpg)
The Death of the Fold
Browsing the World Wide Web is no longer a task confined to desktop computers.
1
![Page 4: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/4.jpg)
The
Dea
th o
f the
Fol
d is
at l
ast u
pon
usWhy?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.
![Page 5: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/5.jpg)
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.
![Page 6: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/6.jpg)
About the Fold
![Page 7: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/7.jpg)
Above the Fold
![Page 8: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/8.jpg)
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.
Phooey
![Page 9: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/9.jpg)
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.
Phooey
![Page 10: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/10.jpg)
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.
Phooey
![Page 11: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/11.jpg)
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.
Phooey
![Page 12: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/12.jpg)
3 The Fold in Action
The importance of that first impression is recognized
![Page 13: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/13.jpg)
Kaleidoscope
The beautifully crafted website for the Kaleidoscope app is an excellent example of designing with ‘the fold’ in mind.
![Page 14: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/14.jpg)
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
![Page 15: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/15.jpg)
The Problem withThe New Fold
quick peek at the browser resolution statistics
4
![Page 16: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/16.jpg)
Reso
lutio
n St
at
1280x80021%
1366x76816%
1440x90013%
1920x108012%
1680x105011%
1280x102410%
1024x768
6%
1600x900
6%
1920x12005%
1024x6002%
![Page 17: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/17.jpg)
5 Strategies for Designing for the New Fold
how on earth is it possible to know where the ‘fold’ is?
![Page 18: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/18.jpg)
A more sensible approach would be to design for general, ratio based folds that would take both landscape and
portrait orientated browsing into consideration…
is it possible to know where the ‘fold’ is?
![Page 19: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/19.jpg)
The Bigger Picture
“…In the study, they found that 76% of users scrolled and that a goodportion of them scrolled all the way to the bottom, despite the height
of the screen.”
![Page 20: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/20.jpg)
6 Conclusion
Final Statement
![Page 21: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/21.jpg)
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.
![Page 22: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/22.jpg)
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.
![Page 23: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/23.jpg)
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?
![Page 24: Designing for the New Fold](https://reader036.vdocuments.us/reader036/viewer/2022070302/54785764b4af9fa2108b4c43/html5/thumbnails/24.jpg)
? This is it… Any questions?
www.HashemZahran.com - www.eSpace.com.eg - Follow me: @antikano