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

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

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

something is askew...

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.8 billion the number of
people in the world today... *2009 estimates put the population around 6.79 billion inhabitants...

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

it’s about people not devices...

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

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

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

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

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

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

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

USA

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

EU5

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

<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...

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

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

ahem...

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

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

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

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

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

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

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

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

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

so, what are they using...

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

or, more specifically...

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

then again, we could...

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

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

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

a lovely website
http://colly.com/

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

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

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

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

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

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/

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

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

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

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

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

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

“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

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?

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/

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

a few guidelines...

2. use well structured, meaningful
markup 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 there’s lots more, but who wants to stare at code... http://colly.com/ view source

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

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

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) { ...

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

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

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

which brings us to...

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!

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

traditional thinking goes like so...

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

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

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

but here’s the problem...

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

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

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

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

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

is technically served to everyone...
a mobile site

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

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

which is really just...

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

think mobile first

but let’s get back to...

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

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) { ...

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

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

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...

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

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

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

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

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

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/

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/

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...

the results could be...

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

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

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...
http://2010.dconstruct.org/

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

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

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... }

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

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... }

anything else...?

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

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

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

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

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

...but, not only on these
devices

but, also on these... WebKit
OperaMini

and, these...
WebKit
OperaMini

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

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

thank you
hello@yiibu.com