A sequel to my The Myth of the Fold presentation. This one focuses on how to embrace scrolling and what lives off the viewport.

1. Thinking outside
THE FOLD

2. THE FOLD
THIS IS NOT
THAT KIND OF
PRESENTATION
2

3. THE FOLD
http://www.lickr.com/photos/gregbarnes/2837877242/
3

4. THE FOLD
http://www.lickr.com/photos/dkboss2/5639343760/
4

5. THE FOLD
5

6. THE FOLD
WHAT IS
THE FOLD?
6

7. Refers to the potions of a webpage
that can be visible without scrolling.
SOURCE: http://en.wikipedia.org/wiki/Above_the_fold
PHOTO: http://www.lickr.com/photos/dweinberger/563919

8. 430px
THE FOLD
Where is the fold?
That’s one of the problems about the fold ... where exactly is it?
600px
Due to the wide variances in screen resolutions, screen sizes and browser window sizes,
reaching a consensus on the “aveage” placement of the fold is problematic.
860px
The fold is not a single location, but a broadly dispersed distribution with three peaks
located at roughly 430, 600 and 860 pixels.
http://blog.clicktale.com/2007/10/05/clicktale‐scrolling‐research‐repot‐v20‐pat‐1‐visibility‐and‐scroll‐reach/
8

9. THE FOLD
“
We should stat thinking of
“the fold” as something other
than a hard line with an above
and below potion...
Christopher Fahey
Designer, Teacher and Co-Founder of Behavior, an inteaction design consultancy
9

10. 2002
2011
THE FOLD
Unfolding the Fold
:)
:(
55%
800x600
>1%
40%
1024x768
99%
SOURCE: http://www.w3schools.com/browsers/browsers_display.asp
10

11. the real problem: S
CROLLING
or is it?
http://www.leegte.org/work/scrollbar/index.html

12. THE FOLD
Unfolding the Fold
91% had a scrollbar
76% scrolled some
22% scrolled to bottom
http://blog.clicktale.com/2006/12/23/unfolding-the-fold/
12

13. THE FOLD
Unfolding the Fold
% of users that scrolled to bottom
60%
50%
40%
30%
20%
10%
0
500
2500
http://blog.clicktale.com/2006/12/23/unfolding-the-fold/
5000
px
7500
10,000
13

14. THE FOLD
“
The myth that users won’t
scroll to see anything below
the fold - is doing eveyone a
great dissevice, most of all
our users.
Milissa Tarquini
Director, User Inteface Design and Information Architecture at AOL
14

15. THE FOLD
RESPONDING TO
THE FOLD
15

16. THE FOLD
16

17. Should you ty to eliminate pages that scroll?
THE FOLD
Responding to the Fold
Should you ty to cam as much content as close to the
top of the page as possible?
Should you get rid of good content just to reduce the
height of a page?
Do we need to be worried about the fold?
No.
17

18. Should primay calls-to-action be close to the top of the
page and visually distinct?
THE FOLD
Responding to the Fold
Should page templates be laid out in such a way that gives
clues to the user that more content is available if scrolled?
Should websites exhibit a content stategy that calls for
concise content throughout the site?
YES.
18

19. THE FOLD
19

20. Thinking Outside The Fold
http://www.lickr.com/photos/thatist/2970171789/

21. THE FOLD
SOOOO ....
WHAT DO WE TELL
OUR CLIENTS?
21

22. THE FOLD
Thinking Outside The Fold
1 Make scrolling pat of the UX
2 Get creative, have fun
3 Embace the constaints
22

23. THE FOLD
Horizontal Scrolli
23

24. THE FOLD
24

25. THE FOLD
“
Users scroll if there are clues
to scroll and no design
barriers to scrolling.
Fiz Yazdi & Joe Leech
User Experience Consultants at CXPatners
http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
25

26. THE FOLD
scrolling
=
UX
26

27. THE FOLD
27

28. THE FOLD
28

29. THE FOLD
29

30. THE FOLD
“
Users are pefectly willing to
scroll ... if the page gives them
strong clues that scrolling will
help them find what they’re
looking for.
Jared Spool
CEO & Founding Principal of User Inteface Engineering
30

31. THE FOLD
SCROLLING CAN BE IS
FUN!
PHOTO: http://apple.com/magicmouse
31

32. THE FOLD
32

33. THE FOLD
33

34. THE FOLD
34

35. THE FOLD
Actual Size = 18,000 pixels
18,000 pixels ... about 20 feet tall!
35

36. THE FOLD
“
It’s not how an app looks, but
how it scroooooolls.
John Maeda
Gaphic designer, computer scientist, university professor and author
36

37. THE FOLD
embrace the
constraints
37

38. THE FOLD
http://cdn.shopify.com/s/files/1/0051/7692/products/aba-rwd-stack.jpg
38

39. THE FOLD
“
Ethan’s staightfoward approach to
designing for this complexity
represents a fundamental shift in how
we’ll build web sites for the decade to
come.
Jeffrey Veen
CEO & Founder of Typekit
39

40. THE FOLD
40

41. THE FOLD
41

42. THE FOLD
“
The control which designers know in
the print medium, and often desire in
the web medium, is simply a function
of the limitation of the printed page.
We should embace the fact that the
web doesn’t have the same
constaints, and design for this
lexibility. But first, we must “accept the
ebb and low of things.
John Allsop
A Dao of Web Design, A List Apat (April 7, 2000)
42

43. THE FOLD
Thinking Outside The Fold
1 Make scrolling pat of the UX
2 Get creative, have fun
3 Embace the constaints
43

44. THE FOLD
Questions?
Chuck Mallott
UX DESIGNER
TWITTER
@chuckmallott
EMAIL
cmallott@nerdey.com
44