rethinking the mobile web by yiibu

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/fuzzcat/22019163


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

http://www.internetworldstats.com

http://www.internetworldstats.com

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



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

http://moconews.net/article/419-deep-discounts-on-smartphones-drive-u.s.-adoption-rates-to-nearly-a-thi/

http://moconews.net/article/419-deep-discounts-on-smartphones-drive-u.s.-adoption-rates-to-nearly-a-thi/

only 4% EU5* market share...EU5* = France, Germany, Italy, Spain and United Kingdomenormous

impact


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

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


*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


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


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

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!

http://gs.statcounter.com


http://www.icrossing.co.uk

http://www.icrossing.co.uk





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

”



http://twitter.com/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



http://mobify.me

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://colly.com

http://colly.com

http://www.thenetawards.com/

MOBILE SITE OF THE YEARNOMINEE

http://colly.com

http://www.thenetawards.com

http://www.thenetawards.com

http://colly.com

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


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

http://colly.com

http://colly.com


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


aha, I told you we’d eventually get to #1!

mobile first1.


3.

http://www.flickr.com/photos/pete-karl/4637024524

mobile firsthttp://www.lukew.com/ff/entry.asp?933

Luke Wroblewski



http://www.lukew.com/ff/entry.asp?933

http://www.lukew.com/ff/entry.asp?933

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


mobile first1.


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


mobile first1.


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



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?


mobile first1.


3.


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



http://tinysrc.net

http://tinysrc.net

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

http://2010.dconstruct.org/




squishy squishy




different different tada!

again, brought to you through the magic of @media queries...




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



mobile first1.

the absence of support for media queries is in fact the first @media query...

3.


4.


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


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


little tweaks...

fixed width

relativewidth

width: 90%;height: auto;



http://www.flickr.com/photos/superfantastic/50088733

bandwidthexperience

functionalityfeatures

accessibility*

a balancing act...

performanceusability




mobile first1.


3.


4.


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!



thank you

[email protected]

mailto:[email protected]

mailto:[email protected]

rethinking the mobile web by yiibu

Technology

enormous impact http

world today

iphone http

iphone

low

http

number

population