The document discusses planning adaptive interfaces for different screen sizes and browsers. It suggests using progressive enhancement and graceful degradation to create interfaces that work across devices. Specific techniques discussed include lazy loading images, creating tabbed interfaces, and adding ARIA roles for accessibility. The document provides examples of how to build interfaces like carousels, galleries, tables and more using these principles.

1. PLANNING
ADAPTIVEINTERFACES
Aaron Gustafson
@aarongustafson
slideshare.net/AaronGustafson

2. © Brad Frost

3. Just four years ago the majority of our
visitors saw our website in Internet
Explorer on a Windows computer on a
minimum 1,024 pixel wide screen.
Times have really changed.
“
Jason Samuels
IT Manager,
National Council on Family Relations
Source

4. Windows users used to comprise
93.5% of our web visits. Now that
percentage is 72.4%. Visitors using a
Mac have more than tripled.“

5. The percentage visiting from a mobile
device or tablet … was just
0.1% in 2008. It has since grown
exponentially,
200-400% per year,
to 6.2% today.
“

6. Four years ago 75.5% of our web
visitors used Internet Explorer. That
number has fallen to 37%. Firefox now
comprises 25.5%, Safari 19.5%, and
Chrome 15.3%.
“

7. In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2012 we detected
“ 830

8. © Brad Frost

9. Perception

10. Perception

11. Perception

12. Perception

13. There is no WebKit
on Mobile
— Peter-Paul Koch“

14. WebKit vs. Acid3
http://www.quirksmode.org/webkit_mobile.html

15. Surely there’s
platform
consistency!?!
— Any sane individual
“

16. There is no Android
— Stephanie Rieger
“

17. http://yfrog.com/z/ob5kndj

18. But Android
is NOT unique
in this

19. The culprits?
SCREEN SIZE

20. The culprits?
EMBEDDED VIEWS

21. The culprits?
BROWSER CHROME

22. The culprits?
ZOOM LEVEL

23. The culprits?
ZOOM LEVEL
(Ok, this one’s on Android)

24. 2009 2010 2011 2012
6.8 Billion
2009
2010
2011
http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers
2012

25. Smartphone sales accounted for
nearly 85% of all mobile
phone sales in the US in Q1 2013.“ http://www.chetansharma.com/usmarketupdateq12013.htm

26. Smartphones have reached
50% penetration in the US…
“ http://www.chetansharma.com/usmarketupdateq12013.htm

27. …but that’s concentrated in
30% of households
“ http://www.chetansharma.com/usmarketupdateq12013.htm

28. Over 80%
of these are
FEATURE PHONES,
not smartphones
http://developinthecloud.drdobbs.com/author.asp?doc_id=253055&section_id=2280

29. especially in
DEVELOPING
COUNTRIES

30. Internet in Kenya
MOBILE = 90%
http://www.cck.go.ke/resc/downloads/SECTOR_STATISTICS_REPORT_Q4_11-12.pdf

31. The reality

34. “The commoditization of smartphone
hardware is just the beginning … of a
huge new wave of cheap devices
about to invade our lives—a zombie
apocalypse of electronics, if you will.
— Scott Jenson

35. © Brad Frost

36. © Brad Frost

37. We DON’T know

39. Even when
we think
we know,
WE ARE
PROBABLY
WRONG

40. So how
do we COPE?

41. Progressive
Enhancement

42. Technological
restrictions

43. BASIC ADVANCED
UserExperience
Browser Capabilities

44. BASIC ADVANCED
UserExperience
Browser Capabilities
Content
Semantics
Design
Interactivity
Accessibility

45. BASIC ADVANCED
UserExperience
Browser Capabilities
Text & HTTP
HTML
CSS
JavaScript
ARIA

46. HTML

47. HTML
HTML5
Microformats
HTML4

48. I like an escalator because
an escalator can never break,
it can only become stairs.
— Mitch Hedberg

50. Graceful
Degradation

51. Modern
Browsers
Older Browsers

52. Modern
Browsers
Older Browsers

53. a dynamic web page can
never break, it can only
become a web page.

57. ๏Bugs
๏Browser Add-ons
๏Overzealous Firewalls
๏Underpowered devices
๏Page is still loading

58. And then
there’s speed

59. 2%

60. Graceful Degradation Progressive
Enhancement

61. Content

64. Graceful Degradation Progressive
Enhancement

65. on Progressive
Enhancement
Responsive
Web Design
Mobile
First

66. PLANNING ADAPTIVE INTERFACES
Complex interfaces

67. PLANNING ADAPTIVE INTERFACES
Complex interfaces

68. PLANNING ADAPTIVE INTERFACES
There is no image…
<p class="entry-image"
data-image-src="/alztheme/images/news/sample.jpg"></p>

69. PLANNING ADAPTIVE INTERFACES
Until there is
<p class="entry-image"
data-image-src="/alztheme/images/news/sample.jpg"
data-has-image="true">
<img alt="" src="/alztheme/images/news/sample.jpg" alt=””>
</p>

70. PLANNING ADAPTIVE INTERFACES
Adaptive widget logic
Page
JS?
No
Yes
Yes
No
Lazy load the
images

71. PLANNING ADAPTIVE INTERFACES
Adaptive widget logic
Page
JS?
No
Yes
Yes
No
LIVE
Lazy load the
images
Hide the
images (if
loaded)

72. PLANNING ADAPTIVE INTERFACES
Complex interfaces

73. PLANNING ADAPTIVE INTERFACES
Complex interfaces

74. PLANNING ADAPTIVE INTERFACES
No need to link
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt="">
<figcaption>
<h6>Retreats 4 Geeks</h6>
<p>We built this site for our intimate retreat series.</p>
</figcaption>
</figure>

75. PLANNING ADAPTIVE INTERFACES
Adaptive widget logic
Page
JS?
No
Yes
Yes
No
Create
the link &
make image
clickable

76. PLANNING ADAPTIVE INTERFACES
Complex interfaces

77. PLANNING ADAPTIVE INTERFACES
Make the connection
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt=""
class="enlargable">
<p class="enlarge"><a href="#enlarge">Click to Enlarge</a></p>
<figcaption>
<h6>Retreats 4 Geeks</h6>
<p>We built this site for our intimate retreat series.</p>
</figcaption>
</figure>

78. PLANNING ADAPTIVE INTERFACES
Complex interfaces

79. PLANNING ADAPTIVE INTERFACES
Complex interfaces

80. PLANNING ADAPTIVE INTERFACES
Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">
<div class="section">
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</div>
<!-- ... -->
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
</div>

81. PLANNING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li> cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>

82. PLANNING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li> cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>

83. PLANNING ADAPTIVE INTERFACES
No JS, basic CSS

84. PLANNING ADAPTIVE INTERFACES
Widget logic
Page
JS?
NoYes
Split
the content &
make some
tabs

85. PLANNING ADAPTIVE INTERFACES
On DOM ready
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">
<section>
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</section>
<!-- ... -->
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
</div>

86. PLANNING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface" data-tab-threshold="800">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li> cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>

87. PLANNING ADAPTIVE INTERFACES
Adaptive widget logic
Page
JS?
No
Yes
Yes
No
Split
the content &
make some
tabs

88. PLANNING ADAPTIVE INTERFACES
Adaptive widget logic
Page
JS?
No
Yes
Yes
No
LIVE
Split
the content &
make some
tabs
Untab (if
tabbed)

89. PLANNING ADAPTIVE INTERFACES
role="tablist"
84
Adding ARIA

90. PLANNING ADAPTIVE INTERFACES
role="tab"
aria-selected="true"
aria-controls="folder-1"
Adding ARIA

91. PLANNING ADAPTIVE INTERFACES
role="tab"
aria-selected="false"
aria-controls="folder-4"
Adding ARIA

92. PLANNING ADAPTIVE INTERFACES
role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"
Adding ARIA

93. PLANNING ADAPTIVE INTERFACES
role="application"
aria-activedescendant="folder-1"
Adding ARIA

94. PLANNING ADAPTIVE INTERFACES
Result!

95. http://is.gd/lazyloading_demo

96. Now it’s time
for YOU
to do
some work

97. PLANNING ADAPTIVE INTERFACES
Interfaces
๏ Carousel
๏ Video Gallery
๏ Tab Interface v2
๏ Data Tables
๏ Scorecard
92
๏ Complex Navigation
๏ Timeline
๏ Modal Dialogs
๏ Accordion
๏ Shopping Cart

98. PLANNING ADAPTIVE INTERFACES
Carousel

99. PLANNING ADAPTIVE INTERFACES
Video Gallery

100. PLANNING ADAPTIVE INTERFACES
Tabbed Interface

101. PLANNING ADAPTIVE INTERFACES
Data Tables

102. PLANNING ADAPTIVE INTERFACES
Scorecard

103. PLANNING ADAPTIVE INTERFACES
Complex Navigation

104. PLANNING ADAPTIVE INTERFACES
Timeline

105. PLANNING ADAPTIVE INTERFACES
Modal Dialogs

106. PLANNING ADAPTIVE INTERFACES
Accordion

107. PLANNING ADAPTIVE INTERFACES
Shopping Cart