1. Rethinking the Mobile Web
a pragmatic look at creating an accessible and inclusive mobile experience
http://www.flickr.com/photos/fpat/3692425154

2. we apps, and...
a lovely, location-b
ased,
social, photo thing
y...
this presentation
is
not about these.
http://www.flickr.com/photos/scobleizer/3985020876

3. Dinosaurs!
we think the iPad is pretty awesome, but...
http://www.flickr.com/photos/goincase/4647893507

4. something is askew...

5. 1.8 billion
the number of internet
connections in the world today...
26% of the world’s population at the beginning of 2010 – http://www.internetworldstats.com

6. 6.8 billion
the number of people
in the world today...
*2009 estimates put the population around 6.79 billion inhabitants...

7. 3.4 billion
the number of people
with mobile devices today...
or roughly 1/2 the population of the planet, which is...

8. it’s about people not devices...

9. so here’s the dilemma...
http://www.flickr.com/photos/soundman1024/1796003688

10. "The future is already here – it’s
just not evenly distributed."
– William Gibson
http://www.flickr.com/photos/kiwanja/3169447879

11. no home
Sony Ericsson
w810i
no iPhone
technology should not only be accessible...
http://www.flickr.com/photos/walkadog/3093763311

12. but inclusive...
iPhone
http://www.flickr.com/photos/javiercito/2319331695

13. and available to everyone...
iPhone
http://www.flickr.com/photos/pictfactory/2796367140

14. yes, even this man who
does not have an iPhone...
not an iPhone...
http://www.flickr.com/photos/dopesmuglar/486087009

15. so, who actually has an iPhone...
http://www.flickr.com/photos/data_op/2468057934

16. USA

17. about 6% US market share...
US Population: 307 million
Smartphone penetration: 31% of pop.
iPhone market share: 21% of smp.
enormous Total iPhones in US: 19 million (~6%)
impact
low overall
penetration
The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact
http://moconews.net/article/419-deep-discounts-on-smartphones-drive-u.s.-adoption-rates-to-nearly-a-thi/ and http://www.npd.com/press/releases/press_100510.html

18. EU5

19. only 4% EU5* market share...
enormous EU5* = France, Germany, Italy, Spain and United Kingdom
impact
low overall
penetration
The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact
http://www.comscore.com/layout/set/popup/layout/set/popup/Press_Events/Press_Releases/2010/6/The_iPhone_Reality_in_Europe_Low_Overall_Penetration_Enormous_Impact

20. <4% global market share*
enormous
impact
low overall
penetration
*I suspect it’s actually much less, but finding accurate global figures is a tad difficult...

21. ie: BMW
The ”most popular” devices don’t necessarily
translate to the most used devices.
ie: Ford

22. ”
yeah, but those
devices suck!
http://www.flickr.com/photos/eldret_99/3311540398

23. ahem...

24. the first smartphone in 2003...
considered
portable in 1984 fits in your pocket
still widely used...
Released: 1984 Released: 2003
CPU: 8 MHz CPU: 104 MHz
RAM: 128k (512k max) RAM: 6 MB
Storage: 400k (3.5” floppy) Storage: 32 MB MMC Card
Display: 22.9 cm Monochrome Display: 5.3 cm Thousands of colours
Dimensions: 34.5 x 24.4 x 27.7 cm Dimensions: 10.9 x 5.8 x 2.4 cm
Weight: 7.5 kgs Weight: 122 g

25. the music phone in 2008...
again, it was ‘portable’...?
...this runs Flash
not a feature phone,
nor a smartphone...
Released: 1998 Released: 2008
CPU: 233 MHz CPU: 434 MHz
RAM: 32 MB (512 MB max) RAM: 128 MB
Storage: 4 GB (+ optical drive) Storage: 8 GB (16 GB max)
Display: 38.1 cm Millions of colours Display: 8.1 cm Millions of colours
Dimensions: 40.1 x 38.6 x 44.7 cm Dimensions: 11.1 x 5.2 x 1.5 cm
Weight: 17.3 kgs Weight: 109 g

26. the feature phone in 2009...
smartphone from 2005 extremely
popular today...
still widely
used today...
Released: 2005 Released: 2009
CPU: 220 MHz CPU: 369 MHz
RAM: 22 MB RAM: 30 MB
Storage: 64 MB Storage: 1 GB (16 GB max)
Display: 5.3 cm Thousands of colours Display: 5.1 cm Thousands of colours
Dimensions: 10.8 x 5.3 x 2.2 cm Dimensions: 10.6 x 4.7 x 1.5 cm
Weight: 126 g Weight: 88 g

27. the smartphone in 2010...
...playing “catch-up”
raising the “bar”...
Released: 2010 Released: 2010
CPU: 680 MHz CPU: 1 GHz A4 Processor
RAM: 256 MB RAM: 512 MB
Storage: 16 GB (32 GB max) Storage: 16 GB (32 GB max)
Display: 8.9 cm Millions of colours Display: 8.9 cm Millions of colours
Dimensions: 11.4 x 5.9 x 1.3 cm Dimensions: 11.5 x 5.9 x 0.9 cm
Weight: 135 g Weight: 137 g

28. ”
...but folks with those other phones
simply don’t use the Internet.
http://www.flickr.com/photos/carbonnyc/3369424492

29. yeah, and grandma
doesn’t do Facebook... ”
Grandma*
Facebook
http://www.flickr.com/photos/amagill/304701054
*not my Grandma

30. 1.3 billion
the number of mobile internet
users today...
...includes WAP and ‘real web’ via Tomi Ahonen Consulting

31. 1/3
number of global internet
users who access the internet
only via mobile...
...includes WAP and ‘real web’ via Tomi Ahonen Consulting

32. 21% the projected worldwide
3G penetration in 2010...
via Morgan Stanley

33. so, what are they using...

34. mobile browser market share
via http://gs.statcounter.com - 02/2010
other?
things have changed
skeptical
UC ate Nokia’s share...
other?
other?
note OperaMini...
Blackberry!
quality + sample size?
Data Source: http://gs.statcounter.com
Published Under a Creative Commons Attribution 3.0 Unported License
You are free to copy, distribute and transmit the work and to adapt the work providing it is attributed to www.icrossing.co.uk
http://www.flickr.com/photos/icrossing_uk/4342659861

35. something happened in February...
UC browser...
Nokia browser...
Top 9 Mobile Browsers in China from Sep 09 to Aug 10 | StatCounter Global Stats
http://gs.statcounter.com/#mobile_browser-CN-monthly-200909-201008

36. moving forward...
used in iOS, Android, Palm WebOS, Nokia Qt, primarily used on feature
Bada, Symbian and new Blackberry... phones supporting Java ME...
+
WebKit OperaMini Windows Mobile
proxy browser...
watch these...
lots of new browsers, variation and of course – legacy browsers
“Fennec” Browser UC
Obigo SkyFire
proxy browsers
Internet Explorer MicroB Internet Browser

37. the importance of WebKit...
open source
licensed under the GNU Library General Public License
excellent standards support
including HTML, CSS3, SVG, etc.
innovations often contributed back
example: HTML5, CSS animations, SquirrelFish, etc.
adopted by many leading companies
including Apple, Nokia, Samsung, Google, Palm, etc.
WebKit used in many mobile operating systems
including iOS, Android, webOS, Bada, Symbian, etc.
btw - “There is no WebKit on Mobile” by @ppk
http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html

38. the importance of OperaMini...
free
costs consumers absolutely nothing
a full-web experience
supports Ajax, zooming, tabbed browsing, etc
excellent standards support
based on the same code-base as the Opera browser OperaMini
available just about anywhere
on JavaME, iPhone, Android, Windows Mobile + more
an extremely efficient browser
a proxy server filters, compresses & pre-renders content
usable on older devices
breathe new life into those antique devices...
very important

39. rendered + optimised and proxy browsers...
proxy browser on proxy server...
free + unlimited
bandwidth
OBML* HTML
limited + costly proxy server bbc.co.uk
bandwidth
*OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.

40. on private networks...
caller
a
d
limited + costly
bandwidth
switching
centre receiver
c b
base-station
to the Internet...
transcoding, bandwidth limitations, service blocking and no packet neutrality

41. also availabl
e for Android
...
OperaMini is great for browsing
the web on iPhone when your
connection stinks. Which is
unfortunately is fairly often in my
”
case. – @jonathanstark
http://www.flickr.com/photos/johanl/4424185115

42. app
yeah, whatever–I just wanna build a mobile website...

43. traditionally you might consider...
a device database
ie. DeviceAtlas
device detection or WURFL
content adaptation
an abstraction layer
device various standards
exhausting capabilities
media types WURFL/WALL testing
transcoding multiple templates private networks
mimetypes geing “on-deck”
data limits multiple sites
an off-deck strategy... cHTML
the “One Web” dream thematic
correct doctypes consistency
fragmentation switching algorithms
WML using UAProf data XHTML-MP
http://www.flickr.com/photos/rmlowe/3281353786
WAP

44. but that might be a bit overwhelming...
OMG... ”
http://www.flickr.com/photos/richardmoross/1413692087

45. start somewhere familiar...
http://www.flickr.com/photos/adactio/4742158560

46. ...a look at what we’re doing now?*
*for illustration purposes only

47. we could
do nothing...
http://www.alistapart.com/

48. but that’s not terribly mobile friendly – what about...

49. a mobile
specific site...
http://mobify.me
http://m.alistapart.com/

50. oh, but then that just begs the question...

51. other...
laptops/netbooks TVs
handheld consoles
what exactly is mobile...
http://www.flickr.com/photos/amagill/26273015

52. or, more specifically...

53. 128x160
240x320
320x480
what isn’t...
1280x768
1024x768
480x800

54. then again, we could...

55. create an adaptive experience...
http://www.flickr.com/photos/rohit_saxena/4873732679

56. an example
http://colly.com*
*for illustration purposes only, I’m not criticising the talented Mr. Collison or his fine work...

57. http://colly.com
MOBILE SITE OF THE YEAR
NOMINEE
http://www.thenetawards.com/

58. a lovely website
http://colly.com/

59. squishy squishy
with flexible layout
http://colly.com/

60. also available on mobile...
squishy squishy
http://colly.com/

61. al
an optimce
experien
squishy squishy tada!
brought to you through the magic of @media queries...
http://colly.com/

62. ahem...
http://www.flickr.com/photos/jakerome/3481634789

63. these are also mobile...
WebKit WebKit
approximations based on actual device testing - font rendering will vary...
http://colly.com/

64. as are these...
the iPhone is #1 device for OperaMini
*OperaMini is often preferred by many users as it optimises content prior to download, which reduces data costs.
http://colly.com/

65. and these...
Mozilla
77mm
47mm
insanely tiny!
expect many more tablet
devices on the market soon...
http://colly.com/

66. traditionally used
for the fine print...
which now require this...
http://www.flickr.com/photos/chrisbrenschmidt/1832787028

67. viewport is much smaller
than the actual content
and this...
http://www.flickr.com/photos/katerha/4592429363

68. keyhole browsing
for this experience
http://colly.com/

69. ...would you be
happy with this?
hmm...
http://colly.com/

70. once again
why are we writing for only one browser...
2000 2010
...is WebKit the new Internet Explorer?

71. “This site works best in Safari 4”
”
is ok where “This site works best in
IE4” wasn’t?!? Open standards or
double standards? – @csssquirrel
via @brucel
http://www.flickr.com/photos/pjanvandaele/3990379048

72. If you want to use the web on a
”
mobile device, is the purchase of
an iPhone the cost of entry?
or Android device
this design can work on
*many* more devices...
let alone only one device?

73. as per my highly sophisticated
mobile web triage process... ;)
Good
Could be improved
Needs to be improved
let’s make it more accessible...
http://colly.com/

74. 3 one style sheet w/@media queries
4 jQuery used only for animation...
5 same images used for
all screen devices...
only a few issues...
2 well structured,
meaningful markup
Good
4 Javascript animations tend to work
poorly on the majority of mobile devices... Could be improved
Needs to be improved

75. a few guidelines...

76. 2. use well structured, meaningful markup
for those still paying attention, yes there is a #1 and we will get to it shortly...

77. 2 well structured, meaningful markup...
mmm... meaning!
structure
there’s lots more, but who
wants to stare at code...
http://colly.com/ view source

78. 2 well structured, meaningful markup...
use <header>, <h1>, <p> and other semantically meaningful tags to provide basic structure
*Note: this is not from hp://colly.com
recreating
existing <tags>
<div class="body"> is not cool
<div class="header">
<div class= "h1">
<span>Hello World!</span>
</div>
</div> <div> soup...
<div class="body">HTML
<span class="emphasis">can actually be</span>meaningful.
</div>
</div>
soup is best served in a bowl...
without a basic, meaningful structure you will need to re-create many existing properties

79. 2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...

80. 3 all-in-one stylesheet with @media queries...
a single css file is network efficient, but often includes
unnecessary style data for mobile devices...
<link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
....towards the end of ‘screen.css’ we find the @media queries
mobile specific tweaks are added at the very
end, and only through @media queries...
@media (max-device-width:480px) and (orientation:portrait) { ...

81. how retro...
kinda backwards...
http://www.flickr.com/photos/dumbledad/3400708183

82. rocket science
a desktop browser...
are we expecting too much...
http://www.flickr.com/photos/nasa_goddard/4678389619/

83. rocket science
a mobile browser...
...from our mobile browsers?
http://www.flickr.com/photos/wwworks/3749061604

84. which brings us to...

85. 1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...
aha, I told you we’d eventually get to #1!

86. Luke Wroblewski
mobile first
http://www.lukew.com/ff/entry.asp?933
http://www.flickr.com/photos/pete-karl/4637024524

87. traditional thinking goes like so...

88. is technically served to everyone...
a full desktop site

89. sprinkle on a few @media queries...
+ @media queries
a full desktop site

90. ...if the @media query resolves
to true, tada - a mobile site!
= mobile site
+ @media queries
a full desktop site

91. but here’s the problem...

92. FAIL
= mobile site
+ @media queries
a full desktop site
http://www.flickr.com/photos/hendry/3053419265

93. = mobile site
a full desktop site
http://www.flickr.com/photos/hendry/3053419265

94. @media queries will resolve to false on most devices...
no, really – you simply cannot rely on them currently on mobile devices

95. resulting in this experience...
http://colly.com/

96. so it’s far more effective when we start with...

97. is technically served
to everyone...
a mobile site

98. for browsers that support
them, other browsers will
just ignore them...
+ @media queries
a mobile site

99. tada – a desktop site! ;)
= full desktop site
+ @media queries
a mobile site

100. which is really just...

101. and not a new idea at all...
progressive enhancement
= full desktop site
Jeremy Keith + media queries
a mobile site
http://www.flickr.com/photos/clagnut/315554083

102. think mobile first

103. but let’s get back to...

104. 1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...

105. 3 all-in-one stylesheet with @media queries...
a single css file is network efficient, but often includes
unnecessary style data for mobile devices...
<link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
....towards the end of ‘screen.css’ we find the @media queries
mobile specific tweaks are added at the very
end, and only through @media queries...
@media (max-device-width:480px) and (orientation:portrait) { ...

106. 3 default stylesheet plus @media queries...
place mobile related styles into a default stylesheet...
<link href="default.css" type="text/css" rel="stylesheet" media="screen" />
<link href="desktop.css" type="text/css" rel="stylesheet" media="screen
and (min-device-width:1024px) and (max-width:989px)" />
link additional style sheets using @media queries
to progressively enhance the content for more
capable browsers
some mobile browsers look for it...
*you may want to use both the ‘screen’ and ‘handheld’ media types for your default stylesheet

107. 1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...
4. progressively enhance using JavaScript
and @media queries

108. 4 jQuery/JavaScript used only for animation...
jQuery is still a rather hefty library
for use on mobile devices...
<script type="text/javascript" src=".../jquery.min.js"><script>
<script type="text/javascript" src=".../scrollto.js"><script>
animation in JavaScript can be
very taxing on mobile devices...

109. mobile browsers aren’t as
capable as desktop browsers...
again, are we expecting too much...?
http://www.flickr.com/photos/mjryall/3638778588

110. 4 use CSS instead of JavaScript for animations...
are jQuery (and JavaScript) necessary to
provide an experience on mobile devices...?
<script type="text/javascript" src=".../jquery.min.js"><script>
<script type="text/javascript" src=".../scrollto.js"><script>
consider using basic DOM manipulation, or a mobile optimised Javascript library
<script type="text/javascript" src=".../xui.min.js"><script>
the “jQuery Mobile” long before jQuery Mobile...
http://xuijs.com http://jquerymobile.com
use CSS for animations if available instead of Javascript
...use CSS animations
.scrollto { (where possible) instead
-webkit-transform: translate(540px, -200px);
-moz-transform: translate(540px, -200px);
-o-transform: translate(540px, -200px);
}
ignored on browsers that don’t support it

111. look ma, no jQuery?
from a time before jQuery...
Twier?
http://www.flickr.com/photos/wordridden/2474879344

112. then again, do you really need javascript?
*none of these services relied on Javascript when they first started...

113. 1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...
4. progressively enhance using JavaScript
and @media queries
5. adapt content (especially images)
appropriately for each device

114. 5 same images used for all devices...
one size rarely fits all...
ul li#biography a span.label {
background: url("../pig.png") repeat-x center bottom;
}
16 Kb
also adapt content used in <img /> tags
we should also adapt images found within the markup...
<img src="butterfly.png"
width="200" height="160" alt="butterfly" />
16 Kb
http://colly.com/

115. 5 images adapted appropriately for each device...
ul li#biography a span.label {
background: url("../pig-small.png") repeat-x center bottom;
}
provide appropriate sized images for various devices
6 Kb
also adapt content used in <img /> tags
many CMS’s such as WordPress provide a means of
filtering HTML before it’s sent to the client
<img src="butterfly-small.png"
width="100" height="80" alt="butterfly" />
6 Kb
be sure to update the width and height aributes accordingly
services such as http://tinysrc.net can automatically resize + compress your images
http://colly.com/

116. we could also rethink the <img />* tag...
one image can have multiple source
files, each for an appropriate context
<img alt="butterfly">
<source src="butterfly-small.png" width="100" height="80" />
<source src="butterfly.png" width="200" height="160" />
<source src="butterfly-large.svg" width="400" height="400"
media="min-device-width:320px" /> image formats, and aspect ratios
</img> could be modified as required
and possibly even include media queries...
*I’m just dreaming here, this doesn’t currently exist...

117. the results could be...

118. much better...
approximations based on actual device testing - font rendering will vary...
http://colly.com/

119. quick
another example...
http://2010.dconstruct.org*
*again, for illustration purposes only, I’m not criticising the fine folks behind dConstruct...

120. http://2010.dconstruct.org/

121. squishy squishy
http://2010.dconstruct.org/

122. different different tada!
again, brought to you through the magic of @media queries...
http://2010.dconstruct.org/

123. so close...
http://2010.dconstruct.org/

124. 6 fonts often not supported on mobile
sprite image not used 6
on mobile devices...
6 images not used on
mobile devices...
only one real issue...
3 a single (and compressed!) style sheet
2 well structured, meaningful
and compressed markup
Good
simple DOM scripting without Could be improved
4 large Javascript libraries
Needs to be improved

125. 1. mobile first
2. use well structured, meaningful markup
3. the absence of support for media queries
is in fact the first @media query...
4. progressively enhance using JavaScript
and @media queries
5. adapt content (especially images)
appropriately for each device
6. compress content where possible,
and avoid sending unnecessary data

126. 6 display:none still loads resources...
don’t expect mobile
bandwidth to be free...
@media (max-device-width:767px), all and (max-width:449px) { ...
.speaker-carousel {
display: none; all of the speaker-carousel images are actually loaded,
even though they are never displayed on mobile devices...
}

127. images not used on @font-face not supported
mobile devices... on most mobile devices...
367.35 KB 93.63 KB
http://2010.dconstruct.org/

128. 6 ...avoid sending unnecessary data
@media (max-device-width:767px), all and (max-width:449px) { ...
.speaker-carousel {
display: none; find another way to remove the
unused resources on mobile devices...
}

129. anything else...?

130. little tweaks...
fixed relative
width width
width: 90%;
height: auto;
http://2010.dconstruct.org/

131. accessibility*
features functionality
usability performance
experience bandwidth
a balancing act...
http://www.flickr.com/photos/superfantastic/50088733

132. 1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...
4. progressively enhance using JavaScript
and @media queries
5. adapt content (especially images)
appropriately for each device
6. compress content where possible,
and don’t include unnecessary data

133. why even bother...
I’ve seen
that look...
http://www.flickr.com/photos/eldret_99/3311540632

134. ...people actually do use the mobile web
source comScore MobiLens
http://www.flickr.com/photos/pictfactory/2796367140

135. ...but, not only on these devices

136. but, also on these...
WebKit
OperaMini

137. and, these...
WebKit
OperaMini

138. and, these...
btw - expect many, many more devices to be heading our ways soon...

139. Dinosaurs!
...and shouldn’t everyone benefit from technology?
http://www.flickr.com/photos/goincase/4647893507

140. thank you
hello@yiibu.com