Rethinking the Mobile Web by Yiibu

Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
Rethinking the Mobile Web by Yiibu

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Rethinking the Mobile Web
a pragmatic look at creating an accessible and inc...

we apps, and...
a lovely, location-b
ased,
...

Dinosaurs!

we think the iPad is pretty awesome, but...

http://www.ﬂickr.com/pho...

something is askew...

1.8 billion
the number of internet
...

6.8 billion
the number of people
in the world today...

...

3.4 billion
the number of people
with mobile devices today...

or ...

it’s about people not devices...

so here’s the dilemma...

http://www.ﬂickr.com/photos/soundman1024/1796003688

"The future is already here – it’s
just not evenly distributed."
...

no home

Sony Ericsson
w810i

...

but inclusive...

iPhone

http://www.ﬂickr.com/photos/...

and available to everyone...

iPhone

http://www.ﬂickr.com/...

yes, even this man who
does not have an iPhone...

...

so, who actually has an iPhone...

http://www.ﬂickr.com/photos/data_op/2468057934

USA

about 6% US market share...
...

EU5

only 4% EU5* market share...
enormous EU5* = Fr...

<4% global market share*

enormous
impact

...

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

”
yeah, but those
de...

ahem...

the ﬁrst smartphone in 2003...
considered
portable in 1984 ﬁts in your pocket

...

the music phone in 2008...
again, it was ‘portable’...?

...this runs Flash

...

the feature phone in 2009...

smartphone from 2005 extremely
...

the smartphone in 2010...

...playing “catch-up”
raising the “bar”...

...

”
...but folks with those other phones
...

yeah, and grandma
doesn’t do Facebook... ”
...

1.3 billion
the number of mobile internet
users today...

.....

1/3
number of global internet
users who access the internet
only ...

21% the projected worldwide
3G penetration in 2010...

via Morgan Stanley

so, what are they using...

mobile browser market share
...

something happened in February...

UC browser...

...

moving forward...

used in iOS, Android, Palm WebOS, Nokia Qt, primarily used on feat...

the importance of WebKit...

open source
lice...

the importance of OperaMini...

free
costs consume...

rendered + optimised and proxy browsers...
proxy browser on proxy server...

...

on private networks...

caller

a

...

also availabl
e for Android
...

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

traditionally you might consider...

a device database
...

but that might be a bit overwhelming...

OMG... ...

start somewhere familiar...

http://www.ﬂickr.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
speciﬁc site...

http://mobify.me

http://m.alistapart.com/

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

other...

laptops/netbooks TVs

...

or, more speciﬁcally...

128x160

240x320

320x480

...

then again, we could...

create an adaptive experience...

http://www.ﬂickr.com/photos/rohit_saxena/4873732679

an example
http://colly.com*

*for illustration purposes only, I’m not criticising the t...

http://colly.com

MOBILE SITE OF THE YEAR
NOMINEE

http://www.thenetawards.com/

a lovely website

http://colly.com/

squishy squishy

with ﬂexible layout

http://colly.com/

also available on mobile...

squishy squishy

http://colly.com/

al
an optimce
experien

squishy ...

ahem...

http://www.ﬂickr.com/photos/jakerome/3481634789

these are also mobile...
WebKit ...

as are these...
the iPhone is #1 device for OperaMini

*OperaMini is often preferred by m...

and these...
Mozilla
77mm
47...

traditionally used
for the ﬁne print...

...

viewport is much smaller
than the actual content

...

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

...

“This site works best in Safari 4”
...

If you want to use the web on a
”
mobile device, is the purchase of
a...

as per my highly sophisticated
mobile web triage process... ;)
...

3 one style sheet w/@media queries

4 jQuery used only for animation...

...

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

2 well structured, meaningful markup...

mmm... mean...

2 well structured, meaningful markup...
use <header>, <h1>, <p> and other seman...

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

3 all-in-one stylesheet with @media queries...

a single css ﬁle is network eﬃcient, but often i...

how retro...

kinda backwards...

http://www.ﬂickr.com/photos/dumb...

rocket science

a desktop browser...

are we expecting too ...

rocket science

a mobile browser...
...

which brings us to...

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

Luke Wroblewski

mobile ﬁrst
...

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

but here’s the problem...

FAIL
= mobile site
...

= mobile site

a full desktop site
http://www.ﬂickr.com/photos/hendry/3053...

@media queries will resolve to false on most devices...

no, really – you simply cannot rely on them currently o...

resulting in this experience...

http://colly.com/

so it’s far more eﬀective 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 ...

think mobile ﬁrst

but let’s get back to...

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

3 all-in-one stylesheet with @media queries...

a single css ﬁle is network eﬃcient, but often i...

3 default stylesheet plus @media queries...

place mobile related styles into a default style...

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

4 jQuery/JavaScript used only for animation...

jQuery is still a ra...

mobile browsers aren’t as
capable as desktop browsers.....

4 use CSS instead of JavaScript for animations...
are jQuery (and JavaScript) necessary to
...

look ma, no jQuery?

from a time before jQuery...
...

then again, do you really need javascript?

*none of these services relied on Javascript when they ﬁrst started...

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

5 same images used for all devices...

one s...

5 images adapted appropriately for each device...

ul li#biography a span.label {
background: url("...

we could also rethink the <img />* tag...

one image can have multiple source
...

the results could be...

much better...

approximations based on actual device testing - font rendering will vary...
http://...

quick

another example...
http://2010.dconstruct.org*

*again, for illustration purposes only,...

http://2010.dconstruct.org/

squishy squishy

http://2010.dconstruct.org/

diﬀerent diﬀerent tada!

again, brought to y...

so close...

http://2010.dconstruct.org/

6 fonts often not supported on mobile

sprite image not used 6
...

1. mobile ﬁrst
2. use well structured, meaningful markup
3. the absence of support for media queries
is in fact the ﬁrs...

6 display:none still loads resources...
...

images not used on @font-face not supported
mobile devices... on most mobile devices...

367...

6 ...avoid sending unnecessary data

@media (max-device-width:767px), all and (max-wid...

anything else...?

little tweaks...

ﬁxed relative
width width
...

accessibility*

features functionality

...

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

why even bother...

I’ve seen
...

...people actually do use the mobile web

source comScore MobiLens...

...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 beneﬁt from technology?

http://www.ﬂickr.com/photos/goincase/4...

thank you

hello@yiibu.com