Post on 28-Jan-2015
description
Rethinking the Mobile Web a pragmatic look at creating an accessible and inclusive mobile experience
http://www.flickr.com/photos/fpat/3692425154
http://www.flickr.com/photos/scobleizer/3985020876
we apps, and...a lovely, location-based, social, photo thingy...
this presentation is not about these.
http://www.flickr.com/photos/goincase/4647893507
we think the iPad is pretty awesome, but...
Dinosaurs!
something is askew...
the number of internet connections in the world today...1.8
26% of the world’s population at the beginning of 2010 – http://www.internetworldstats.com
bill
ion
the number of people in the world today...6.8
*2009 estimates put the population around 6.79 billion inhabitants...
bill
ion
or roughly 1/2 the population of the planet, which is...
3.4 the number of peoplewith mobile devices today...bill
ion
it’s about people not devices...
http://www.flickr.com/photos/soundman1024/1796003688
so here’s the dilemma...
http://www.flickr.com/photos/kiwanja/3169447879
"The future is already here – it’s just not evenly distributed."
– William Gibson
http://www.flickr.com/photos/walkadog/3093763311
no iPhone
no home
technology should not only be accessible...
Sony Ericsson w810i
http://www.flickr.com/photos/javiercito/2319331695
iPhone
but inclusive...
http://www.flickr.com/photos/pictfactory/2796367140
and available to everyone...
iPhone
http://www.flickr.com/photos/dopesmuglar/486087009
yes, even this man who does not have an iPhone...
not an iPhone...
so, who actually has an iPhone...
http://www.flickr.com/photos/data_op/2468057934
USA
about 6% US market share...
enormous impact
low overall penetration
US Population: 307 millionSmartphone penetration: 31% of pop.iPhone market share: 21% of smp.Total iPhones in US: 19 million (~6%)
The iPhone Reality in Europe: Low Overall Penetration, Enormous Impacthttp://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
EU5
only 4% EU5* market share...EU5* = France, Germany, Italy, Spain and United Kingdomenormous
impact
low overall penetration
The iPhone Reality in Europe: Low Overall Penetration, Enormous Impacthttp://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
<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...
The ”most popular” devices don’t necessarily translate to the most used devices.
ie: BMW
ie: Ford
http://www.flickr.com/photos/eldret_99/3311540398
yeah, but those devices suck!”
ahem...
Released: 2003CPU: 104 MHzRAM: 6 MBStorage: 32 MB MMC CardDisplay: 5.3 cm Thousands of coloursDimensions: 10.9 x 5.8 x 2.4 cmWeight: 122 g
Released: 1984CPU: 8 MHz
RAM: 128k (512k max)Storage: 400k (3.5” floppy)
Display: 22.9 cm MonochromeDimensions: 34.5 x 24.4 x 27.7 cm
Weight: 7.5 kgs
considered portable in 1984 fits in your pocket
still widely used...
the first smartphone in 2003...
Released: 2008CPU: 434 MHzRAM: 128 MBStorage: 8 GB (16 GB max)Display: 8.1 cm Millions of coloursDimensions: 11.1 x 5.2 x 1.5 cmWeight: 109 g
Released: 1998CPU: 233 MHz
RAM: 32 MB (512 MB max)Storage: 4 GB (+ optical drive)
Display: 38.1 cm Millions of coloursDimensions: 40.1 x 38.6 x 44.7 cm
Weight: 17.3 kgs
again, it was ‘portable’...?
not a feature phone, nor a smartphone...
the music phone in 2008...
...this runs Flash
Released: 2009CPU: 369 MHzRAM: 30 MBStorage: 1 GB (16 GB max)Display: 5.1 cm Thousands of coloursDimensions: 10.6 x 4.7 x 1.5 cmWeight: 88 g
Released: 2005CPU: 220 MHz
RAM: 22 MB Storage: 64 MB
Display: 5.3 cm Thousands of coloursDimensions: 10.8 x 5.3 x 2.2 cm
Weight: 126 g
the feature phone in 2009...
extremely popular today...
still widely used today...
smartphone from 2005
Released: 2010CPU: 1 GHz A4 ProcessorRAM: 512 MBStorage: 16 GB (32 GB max)Display: 8.9 cm Millions of coloursDimensions: 11.5 x 5.9 x 0.9 cmWeight: 137 g
Released: 2010CPU: 680 MHzRAM: 256 MB
Storage: 16 GB (32 GB max)Display: 8.9 cm Millions of colours
Dimensions: 11.4 x 5.9 x 1.3 cmWeight: 135 g
the smartphone in 2010...
...playing “catch-up”raising the “bar”...
http://www.flickr.com/photos/carbonnyc/3369424492
...but folks with those other phones simply don’t use the Internet. ”
http://www.flickr.com/photos/amagill/304701054
yeah, and grandma doesn’t do Facebook...”
Grandma*
*not my Grandma
...includes WAP and ‘real web’ via Tomi Ahonen Consulting
1.3 the number of mobile internet users today...bill
ion
...includes WAP and ‘real web’ via Tomi Ahonen Consulting
1/3number of global internet users who access the internet only via mobile...
via Morgan Stanley
21% the projected worldwide3G penetration in 2010...
so, what are they using...
Data Source: http://gs.statcounter.comPublished Under a Creative Commons Attribution 3.0 Unported LicenseYou are free to copy, distribute and transmit the work and to adapt the work providing it is attributed to www.icrossing.co.uk
mobile browser market share
http://www.flickr.com/photos/icrossing_uk/4342659861
via http://gs.statcounter.com - 02/2010
UC ate Nokia’s share...
skeptical
quality + sample size?
things have changedother?
note OperaMini...
other?other?
Blackberry!
UC browser...
Top 9 Mobile Browsers in China from Sep 09 to Aug 10 | StatCounter Global Statshttp://gs.statcounter.com/#mobile_browser-CN-monthly-200909-201008
Nokia browser...
something happened in February...
UCBrowser“Fennec”
WebKit OperaMini
used in iOS, Android, Palm WebOS, Nokia Qt, Bada, Symbian and new Blackberry...
primarily used on feature phones supporting Java ME...
Internet Explorer Internet Browser
Obigo
MicroB
lots of new browsers, variation and of course – legacy browsers
+
watch these...
SkyFireproxy browsers
proxy browser...
moving forward...
Windows Mobile
WebKit
open source licensed under the GNU Library General Public License
excellent standards supportincluding HTML, CSS3, SVG, etc.
innovations often contributed backexample: HTML5, CSS animations, SquirrelFish, etc.
adopted by many leading companiesincluding Apple, Nokia, Samsung, Google, Palm, etc.
used in many mobile operating systemsincluding iOS, Android, webOS, Bada, Symbian, etc.
btw - “There is no WebKit on Mobile” by @ppkhttp://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
the importance of WebKit...
OperaMini
freecosts consumers absolutely nothing
a full-web experiencesupports Ajax, zooming, tabbed browsing, etc
excellent standards supportbased on the same code-base as the Opera browser
available just about anywhereon JavaME, iPhone, Android, Windows Mobile + more
an extremely efficient browsera proxy server filters, compresses & pre-renders content
usable on older devicesbreathe new life into those antique devices...
very important
the importance of OperaMini...
bbc.co.ukproxy server
free + unlimited bandwidth
rendered + optimised on proxy server...
OBML* HTML
*OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
and proxy browsers...proxy browser
limited + costlybandwidth
a
b
switching centre receiver
caller
c
d
base-station
on private networks...
transcoding, bandwidth limitations, service blocking and no packet neutrality
limited + costlybandwidth
to the Internet...
http://www.flickr.com/photos/johanl/4424185115
also available for Android...
OperaMini is great for browsingthe web on iPhone when your connection stinks. Which is unfortunately is fairly often in my case. – @jonathanstark
”
yeah, whatever–I just wanna build a mobile website...app
http://www.flickr.com/photos/rmlowe/3281353786
correct doctypes
multiple sites
media types
content adaptation
a device database
transcoding
device capabilities
switching algorithms
private networks
the “One Web” dream
various standardsan abstraction layer
data limits
using UAProf data
traditionally you might consider...
mimetypes geing “on-deck”
an off-deck strategy...
WURFL/WALL
ie. DeviceAtlasor WURFL
thematic consistency
multiple templates
fragmentation
exhausting testing
WAP
WML
cHTML
XHTML-MP
device detection
http://www.flickr.com/photos/richardmoross/1413692087
but that might be a bit overwhelming...
OMG...”
http://www.flickr.com/photos/adactio/4742158560
start somewhere familiar...
...a look at what we’re doing now?*
*for illustration purposes only
http://www.alistapart.com/
we could do nothing...
but that’s not terribly mobile friendly – what about...
a mobile
http://m.alistapart.com/
specific site...
http://mobify.me
oh, but then that just begs the question...
http://www.flickr.com/photos/amagill/26273015
laptops/netbooks
handheld consoles
TVs
other...
what exactly is mobile...
or, more specifically...
128x160
320x480
480x800
240x320
1024x7681280x768
what isn’t...
then again, we could...
create an adaptive experience...
http://www.flickr.com/photos/rohit_saxena/4873732679
http://colly.com*an example
*for illustration purposes only, I’m not criticising the talented Mr. Collison or his fine work...
http://www.thenetawards.com/
MOBILE SITE OF THE YEARNOMINEE
http://colly.com
http://colly.com/
a lovely website
with flexible layout
http://colly.com/
squishy squishy
also available on mobile...
http://colly.com/
squishy squishy
tada!squishy squishy
brought to you through the magic of @media queries...
http://colly.com/
an optimal
experience
ahem...
http://www.flickr.com/photos/jakerome/3481634789
approximations based on actual device testing - font rendering will vary...
http://colly.com/
these are also mobile...WebKit WebKit
http://colly.com/
*OperaMini is often preferred by many users as it optimises content prior to download, which reduces data costs.
as are these...the iPhone is #1 device for OperaMini
http://colly.com/
77mm4
7m
m
expect many more tablet devices on the market soon...
and these...
insanely tiny!
Mozilla
http://www.flickr.com/photos/chrisbrenschmidt/1832787028
traditionally used for the fine print...
which now require this...
http://www.flickr.com/photos/katerha/4592429363
viewport is much smaller than the actual content
and this...
http://colly.com/
keyhole browsing
http://colly.com/
for this experience
http://colly.com/
...would you be happy with this?
hmm...
...is WebKit the new Internet Explorer?
2000 2010
why are we writing for only one browser...once again
http://www.flickr.com/photos/pjanvandaele/3990379048
“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
”
let alone only one device?
If you want to use the web on a mobile device, is the purchase of an iPhone the cost of entry?
this design can work on *many* more devices...
”or Android device
http://colly.com/
Good
Could be improved
Needs to be improved
let’s make it more accessible...
as per my highly sophisticated mobile web triage process... ;)
jQuery used only for animation...
same images used for all screen devices...
Javascript animations tend to work poorly on the majority of mobile devices...
one style sheet w/@media queries
well structured, meaningful markup
3
4
5
4
2
only a few issues...
Good
Could be improved
Needs to be improved
a few guidelines...
use well structured, meaningful markup2.
for those still paying attention, yes there is a #1 and we will get to it shortly...
2 well structured, meaningful markup...
mmm... meaning!
structure
http://colly.com/
there’s lots more, but who wants to stare at code...
view source
2
<div class="body"> <div class="header"> <div class= "h1"> <span>Hello World!</span> </div> </div> <div class="body">HTML <span class="emphasis">can actually be</span>meaningful. </div> </div>
<div> soup...
recreating existing <tags> is not cool
use <header>, <h1>, <p> and other semantically meaningful tags to provide basic structure
soup is best served in a bowl...
*Note: this is not from hp://colly.com
well structured, meaningful markup...
without a basic, meaningful structure you will need to re-create many existing properties
use well structured, meaningful markup2.
the absence of support for @media queries is in fact the first @media query...
3.
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" />
3
mobile specific tweaks are added at the very end, and only through @media queries...
@media (max-device-width:480px) and (orientation:portrait) { ...
....towards the end of ‘screen.css’ we find the @media queries
all-in-one stylesheet with @media queries...
http://www.flickr.com/photos/dumbledad/3400708183
how retro...
kinda backwards...
are we expecting too much... are we expecting too much...
http://www.flickr.com/photos/nasa_goddard/4678389619/
rocket science
a desktop browser...
http://www.flickr.com/photos/wwworks/3749061604
rocket science
a mobile browser...
...from our mobile browsers?
which brings us to...
use well structured, meaningful markup2.
aha, I told you we’d eventually get to #1!
mobile first1.
the absence of support for @media queries is in fact the first @media query...
3.
http://www.flickr.com/photos/pete-karl/4637024524
mobile firsthttp://www.lukew.com/ff/entry.asp?933
Luke Wroblewski
traditional thinking goes like so...
a full desktop site
is technically served to everyone...
a full desktop site
sprinkle on a few @media queries...
+ @media queries
a full desktop site + @media queries
= mobile site
...if the @media query resolves to true, tada - a mobile site!
but here’s the problem...
http://www.flickr.com/photos/hendry/3053419265
a full desktop site
= mobile site
+ @media queries
FAIL
http://www.flickr.com/photos/hendry/3053419265
a full desktop site = mobile site
@media queries will resolve to false on most devices...
no, really – you simply cannot rely on them currently on mobile devices
http://colly.com/
resulting in this experience...
so it’s far more effective when we start with...
a mobile site
is technically served to everyone...
a mobile site
for browsers that support them, other browsers will just ignore them...
+ @media queries
= full desktop site
a mobile site
tada – a desktop site! ;)
+ @media queries
which is really just...
progressive enhancement
= full desktop site + media queries
a mobile site
and not a new idea at all...
Jeremy Keith
http://www.flickr.com/photos/clagnut/315554083
think mobile first
but let’s get back to...
use well structured, meaningful markup2.
mobile first1.
the absence of support for @media queries is in fact the first @media query...
3.
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" />
3 all-in-one stylesheet with @media queries...
....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) { ...
place mobile related styles into a default stylesheet...
3
link additional style sheets using @media queries to progressively enhance the content for more capable browsers
<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)" />
default stylesheet plus @media queries...
*you may want to use both the ‘screen’ and ‘handheld’ media types for your default stylesheet
some mobile browsers look for it...
use well structured, meaningful markup2.
mobile first1.
the absence of support for @media queries is in fact the first @media query...
3.
progressively enhance using JavaScript and @media queries
4.
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>
4 jQuery/JavaScript used only for animation...
animation in JavaScript can be very taxing on mobile devices...
http://www.flickr.com/photos/mjryall/3638778588
mobile browsers aren’t as capable as desktop browsers...
again, are we expecting too much...?
<script type="text/javascript" src=".../jquery.min.js"><script><script type="text/javascript" src=".../scrollto.js"><script>
.scrollto {-webkit-transform: translate(540px, -200px);-moz-transform: translate(540px, -200px);-o-transform: translate(540px, -200px);}
ignored on browsers that don’t support it
4
...use CSS animations (where possible) instead
<script type="text/javascript" src=".../xui.min.js"><script>
the “jQuery Mobile” long before jQuery Mobile...
are jQuery (and JavaScript) necessary to provide an experience on mobile devices...?
http://xuijs.com http://jquerymobile.com
use CSS instead of JavaScript for animations...
consider using basic DOM manipulation, or a mobile optimised Javascript library
use CSS for animations if available instead of Javascript
from a time before jQuery...
http://www.flickr.com/photos/wordridden/2474879344
look ma, no jQuery?
Twier?
*none of these services relied on Javascript when they first started...
then again, do you really need javascript?
use well structured, meaningful markup2.
mobile first1.
the absence of support for @media queries is in fact the first @media query...
3.
progressively enhance using JavaScript and @media queries
4.
adapt content (especially images) appropriately for each device
5.
5 same images used for all devices...
also adapt content used in <img /> tags
http://colly.com/
ul li#biography a span.label {background: url("../pig.png") repeat-x center bottom;}
one size rarely fits all...
16 Kb
16 Kb
<img src="butterfly.png"width="200" height="160" alt="butterfly" />
we should also adapt images found within the markup...
5
http://colly.com/
6 Kb
<img src="butterfly-small.png"width="100" height="80" alt="butterfly" />
many CMS’s such as WordPress provide a means of filtering HTML before it’s sent to the client
be sure to update the width and height aributes accordingly
ul li#biography a span.label {background: url("../pig-small.png") repeat-x center bottom;}
provide appropriate sized images for various devices 6 Kb
images adapted appropriately for each device...
services such as http://tinysrc.net can automatically resize + compress your images
also adapt content used in <img /> tags
we could also rethink the <img />* tag...
<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" />
</img>
one image can have multiple source files, each for an appropriate context
image formats, and aspect ratios could be modified as required
and possibly even include media queries...
*I’m just dreaming here, this doesn’t currently exist...
the results could be...
approximations based on actual device testing - font rendering will vary...
http://colly.com/
much better...
http://2010.dconstruct.org*another example...
*again, for illustration purposes only, I’m not criticising the fine folks behind dConstruct...
quick
http://2010.dconstruct.org/
http://2010.dconstruct.org/
squishy squishy
http://2010.dconstruct.org/
different different tada!
again, brought to you through the magic of @media queries...
http://2010.dconstruct.org/
so close...
images not used on mobile devices...
simple DOM scripting without large Javascript libraries
fonts often not supported on mobile
well structured, meaningful and compressed markup
6
6
4
2
only one real issue...
sprite image not used on mobile devices... 6
3 a single (and compressed!) style sheet
Good
Could be improved
Needs to be improved
use well structured, meaningful markup2.
mobile first1.
the absence of support for media queries is in fact the first @media query...
3.
progressively enhance using JavaScript and @media queries
4.
adapt content (especially images) appropriately for each device
5.
compress content where possible,and avoid sending unnecessary data
6.
@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...
6 display:none still loads resources...
don’t expect mobile bandwidth to be free...
http://2010.dconstruct.org/
images not used on mobile devices... @font-face not supported
on most mobile devices...
93.63 KB367.35 KB
@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...
6 ...avoid sending unnecessary data
anything else...?
http://2010.dconstruct.org/
little tweaks...
fixed width
relativewidth
width: 90%;height: auto;
http://www.flickr.com/photos/superfantastic/50088733
bandwidthexperience
functionalityfeatures
accessibility*
a balancing act...
performanceusability
use well structured, meaningful markup2.
mobile first1.
the absence of support for @media queries is in fact the first @media query...
3.
progressively enhance using JavaScript and @media queries
4.
adapt content (especially images) appropriately for each device
5.
compress content where possible,and don’t include unnecessary data
6.
http://www.flickr.com/photos/eldret_99/3311540632
why even bother...
I’ve seen that look...
http://www.flickr.com/photos/pictfactory/2796367140
...people actually do use the mobile web
source comScore MobiLens
...but, not only on these devices
but, also on these...
WebKit
OperaMini
WebKit
OperaMini
and, these...
and, these...
btw - expect many, many more devices to be heading our ways soon...
http://www.flickr.com/photos/goincase/4647893507
...and shouldn’t everyone benefit from technology?
Dinosaurs!