A talk I gave in november 2011 for our internal Web Developer Network at EVRY. Inspirational slides, tweets and flickr photos are credited with links to the sources. Thanks!

1. Jonas Päckos
Mobile @pekkos
experiences

2. This is not
the Web
Slide Credit: http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

3. Web This is the Web
Web
Web
Web Web
Web
Web
Web
Text
Web
Web
Web Web

4. Smart Phones pass
PC vs. Smartphone Shipments
PC Sales Smartphones passed PC shipments in Q42010
700
Global Shipments in MM
SMARTPHONES
600
500 PCS
400
Q42010 2012E
300
200
100
0
2005 2006 2007 2008 2009 2010E 2011E 2012E 2013E
Source: http://www.smartonline.com/smarton-products/smarton-mobile/smartphones-pass-pc-
Source: http://bit.ly/gIqKm9
Source: http://bit.ly/g5ktGq 10
sales-for-the-first-time-in-history/
Slide Credit: http://www.lukew.com/dmwe.pdf

6. Thank You, Steve

7. the smartphone
era begins...
original
the iPhone
2007
Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

8. brings touch, gestures
and the real web...
web
touch
iPhone 3G
iPhone
2007 2008
Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

9. native apps and
the rise of Android...
android
apps
iPhone 3GS
iPhone 3G
2007 2008 2009
Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

10. whither feature phones,
and the further rise of Android...
htc
g-five
samsung
web os
iPhone 4
iPhone 3G 3GS
2007 2008 2009 2010
Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

11. blackberry
kindle
devices go mainstream
nook with great expectations...
htc
LG
samsung
motorola
iPhone 5...
3G 3GS 4
2008 2009 2010 2011
Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

12. the bleeding edge...
+ 'ish via China
opportunity
Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

13. On the go
Limited bandwidth
One-thumbed and one-eyed
Photo Credit: http://www.flickr.com/photos/junglearctic/5978794556/

14. 84% at home
80% during miscellaneous times during the day
74% waiting in lines
64% at work
Source: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
Photo Credit: http://www.flickr.com/photos/laughingsquid/3033724807/

15. mobile is also used
to time-shift
59%
59% ...and%follow%up%
...and follow up
sometimes visit
sometimes
a website on
on%a%PC
on the PC
visit a site
their mobile
on mobile
phone
Time Shift
Source: Yahoo
Source: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

16. ...and
34%
34% follow up
and follow-up
visit a a web site
visit site on on a
on mobile
the PC a PC
on mobile
phone
Time Shift
Source: Yahoo
Source: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

17. 67%
23%
16%
9%
Source: http://www.gstatic.com/ads/research/en/2011_TheMobileMovement.pdf

18. Twitter 55%
Facebook 33%
http://www.slideshare.net/HanWang3/69309864-kpcbinternettrends2011
Photo Credit: http://www.flickr.com/photos/mika/4198063912/

19. 10% of visitors on mobile devices

20. steep increase since last year

21. Are we
offering
anything
mobile yet?

22. https://twitter.com/#!/lukew/status/126110249760460800

23. Location Based Services
Photo Credit: http://blog.affiliatewindow.com/wp-content/uploads/2011/11/M-Commerce-The-Complete-Picture2.pdf

24. Quick Response Code
Photo Credit: http://www.flickr.com/photos/waynesutton/5094463490/

25. AR
Augmented Reality

26. AR
Augmented Reality

27. Near Field Communication
Photo Credit: http://www.flickr.com/photos/georgo10/3286708793/

28. http://twitter.com/#!/jamespearce/status/44882337254744064

29. App or Web?

30. App
• Access address book, SMS,
camera, audio input and other
sensors
• Location detection, Device
orientation
• Run processes in background
• Monetize on app stores and in-
app purchases

31. Web
• Location detection, Device
orientation
• Harder to get on users home
screen
• Web don’t require users to
download updates

32. http://twitter.com/#!/bryanrieger/statuses/26479742726

33. Native apps
increase web use
on mobile devices

34. Links don’t open apps,
they go to web pages

35. App or Web?

36. App or Web?

37. App and Web!

38. Native
Hybrid Apps
Web

39. Hybrid App
Downloaded from app store
Stored on device
Launched like an app

40. Hybrid App
Same capabilities as native apps
(almost) Indistinguishable from a native app

41. Hybrid App
HTML, CSS, Javascript
frameworks
jQuery Mobile
Sencha Touch
Titanium Appcelerator
Phone Gap

44. •§

49. Hybrid App
Reuse code between different platforms
Load pages from your website, or implement the entire
UI in HTML

50. Web App
Web apps are similiar to mobile web sites, but is tailor-
made for the mobile platform
Mobile-device-centric interfaces with bigger hit areas,
optimised for touch

55. http://twitter.com/#!/stephenhay/status/23350345962889216

56. Mobile experience

57. ‘‘
Desktop computers and mobile devices are so
different that the only way to offer a great user
experience is to create two separate designs —
typically with fewer features for mobile.
— Jakob Nielsen
http://www.useit.com/alertbox/mobile-redesign.html

58. http://twitter.com/#!/wilto/statuses/63284673723375616

61. ‘‘
Desktop computers and mobile devices are so
different that the only way to offer a great user
experience is to create two separate designs —
typically with fewer features for mobile.
— Jakob Nielsen
http://www.useit.com/alertbox/mobile-redesign.html

62. Device

63. 84% at home
80% during miscellaneous times during the day
74% waiting in lines
64% at work
Source: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
Photo Credit: http://www.flickr.com/photos/laughingsquid/3033724807/

64. Context

67. http://twitter.com/#!/nstop/status/124561806671888384

68. http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website

69. i love it! nice and clean look, easy to navigate and easy to read.
well done! but... can you put a bit more news on there?
http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website

70. i love it! nice and clean look, easy to navigate and easy to read.
well done! but... can you put a bit more news on there?
...that "Sorry, this article isn't yet available on the mobile site"
message was bloody annoying. Ended up having to install a browser
that spoofs the user agent and renders the full desktop site
http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website

71. i love it! nice and clean look, easy to navigate and easy to read.
well done! but... can you put a bit more news on there?
...that "Sorry, this article isn't yet available on the mobile site"
message was bloody annoying. Ended up having to install a browser
that spoofs the user agent and renders the full desktop site
There should be a text only version of the site for those of us who
don't like the busyness of the main site and are never going to
watch the videos
http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website

72. ...and
34%
34% follow up
and follow-up
visit a a web site
visit site on on a
on mobile
the PC a PC
on mobile
phone
Time Shift
Source: Yahoo
Source: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

73. People get upset when they can’t access
the same information across multiple
devices

74. People get upset when they can’t access
the same information across multiple
devices
Don’t dumb it down for mobile

75. Focus
Photo Credit: http://www.flickr.com/photos/hussain_quantum/2087578696

76. 1024 x 768 320 x 480

77. ‘‘
Losing 80% of your screen space forces you to
focus. You need to make sure that what stays on
the screen is the most important set of features for
your customers and your business. There simply
isn’t room for any interface debris or content of
questionable value. You need to know what
matters most.
— Luke Wroblewski
http://www.lukew.com/ff/entry.asp?1117

78. http://twitter.com/#!/stephenhay/status/32906711018766339

79. Focus
http://imgs.xkcd.com/comics/university_website.png

82. Bullshit
Bullshit
Bullshit
Content

83. ‘‘
If you design mobile first, you create agreement on
what matters most. You can then apply the same
rationale to the desktop/laptop version of the Web
site. We agreed that this was the most important set
of features and content for our customers and
business -why should that change with more screen
space?
— Luke Wroblewski
http://www.lukew.com/ff/entry.asp?1117

84. Mobile
first

85. Explore / Play Lookup / Find
Edit / Create
Checkin / Status
Mobile behaviors
Photo Credit: http://www.flickr.com/photos/carbonnyc/5140154965

86. Mobile
behaviors

87. Content
over
navigation

88. Content
over
navigation

89. Content
over
navigation

90. Content
over
navigation

91. Content
over
navigation

92. Content
over
navigation
Dead end!

93. Content
over
navigation

94. Content
over
navigation

95. Content
over
navigation

96. Fixed
menu

97. Embrace
the input

98. Embrace
the input

99. Embrace
the input

100. Do websites need to
look exactly the
same in every
browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/

103. Do websites need to
be experienced
exactly the same in
every browser?
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

106. Do websites need to
be experienced
exactly the same on
every device?

107. One
Web

108. ‘‘
One Web means making, as far as is reasonable, the
same information and services available to users
irrespective of the device they are using. However,
it does not mean that exactly the same information
is available in exactly the same representation
across all devices.
— W3C
http://www.w3.org/TR/mobile-bp/#OneWeb

109. Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/

110. Fluid grids
Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/

111. Fluid grids
Flexible images
Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/

112. No, not Browser Sniffing
Photo Credit: http://www.flickr.com/photos/timdorr/2096272747/

113. Fluid grids
Flexible images
Media queries
Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/

114. http://mediaqueri.es/

115. http://mediaqueri.es/

116. http://mediaqueri.es/

117. http://mediaqueri.es/

118. http://mediaqueri.es/

119. http://mediaqueri.es/

120. http://mediaqueri.es/

121. http://mediaqueri.es/

122. http://mediaqueri.es/

125. Mobile First
Responsive Web
Design

126. Strategy

127. Strategy
Structured Content First
Mobile Experience First
Progressive Enhancement

128. Strategy
Structured Content First
Mobile First
Progressive Enhancement

129. Strategy
Structured Content First
Mobile First
Progressive Enhancement

130. Structured
Content First

131. MOBILE
WEBSITE WEB MOBILE
APPS
SOCIAL TABLET
MEDIA APPS
CONTENT
MICROSITES PRINT
BLOGS EMAIL
INTRANET

132. MOBILE
WEBSITE WEB MOBILE
APPS
SOCIAL TABLET
MEDIA APPS
Properly structured content
CONTENT
is portable to future
platforms
MICROSITES PRINT
BLOGS EMAIL
INTRANET

133. Mobile
First

134. Progressive
Enhancement

135. Content is both available to
and usable by anyone
Photo Credit: http://www.flickr.com/photos/clagnut/315554083

136. Solid HTML markup
Photo Credit: http://www.flickr.com/photos/clagnut/315554083

137. Basic CSS to every browser
Photo Credit: http://www.flickr.com/photos/clagnut/315554083

138. Advanced CSS to capable
browsers and devices
Photo Credit: http://www.flickr.com/photos/clagnut/315554083

139. Media queries
@media screen and (min-device-width: 480px)
and (orientation: landscape) {
...
}

141. Modernizr
— testing for capabilities
.box {
background-color: rgb(127,127,127);
}
.borderradius .box {
border-radius: 6px;
}

142. Vendor prefixes
.box {
background-color: rgb(127,127,127);
}
.borderradius .box {
-moz-border-radius: 6px; /* Mozilla */
-webkit-border-radius: 6px; /* Webkit */
-o-border-radius: 6px; /* Opera */
-ms-border-radius: 6px; /* IE */
border-radius: 6px;
}

144. LESS – LESS CSS code
.rounded-corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

145. LESS – generated CSS
#header {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#footer {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

146. Add Javascript
unobtrusively to enhance
the user experience
Photo Credit: http://www.flickr.com/photos/clagnut/315554083

150. “Basic”
Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf

151. Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf

152. Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf

154. Does all this sound
easy?
Photo Credit: http://www.flickr.com/photos/chelsea_nj/4223680604

155. http://twitter.com/#!/fling/status/50320128524550144

156. Challenges?
Mobile First RWD may require a redesign
Large technical challenges
Javascript libraries are just beginning to evolve
Waiting for the ground-breaking redesigns
The technique is still young
Photo Credit: http://www.flickr.com/photos/chelsea_nj/4223680604

157. http://mobilewebbestpractices.com/ http://futurefriend.ly/
Resources

158. Thank You.
Jonas Päckos
Twitter: @pekkos
http://about.me/pekkos