Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Rethinking the Mobile Web
a pragmatic look at creating an accessible and inclusive mobile experience

http://www.flickr.com...
we
a lovely, location-b
ased,
social, photo thing
y...

this presentation
is
not about these.

http://www.flickr.com/photos...
Dinosaurs!

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

http://www.flickr.com/photos/goincase/4647893507
something is askew...
billion

1.8

the number of internet
connections in the world today...

26% of the world’s population at the beginning of ...
billion

6.8

the number of people
in the world today...

*2009 estimates put the population around 6.79 billion inhabitan...
billion

3.4

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/316...
no home

Sony Ericsson

w810i

no iPhone

technology should not only be accessible...

http://www.flickr.com/photos/walkado...
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...
enormous
impact

US Population: 307 million
Smartphone penetration: 31% of pop.
iPhone market ...
EU5
only 4% EU5* market share...
enormous
impact

EU5* = France, Germany, Italy, Spain and United Kingdom

low overall
penetra...
<4% global market share*
enormous
impact

low overall
penetration

*I suspect it’s actually much less, but finding accurate...
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
CPU: ...
the music phone in 2008...
again, it was ‘portable’...?
...this runs Flash

not a feature phone,
nor a smartphone...

Rele...
the feature phone in 2009...
smartphone from 2005

extremely
popular today...

still widely
used today...

Released: 2005
...
the smartphone in 2010...
...playing “catch-up”

Released: 2010
CPU: 680 MHz
RAM: 256 MB
Storage: 16 GB (32 GB max)
Displa...
”

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

1.3

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 A...
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’...
something happened in February...

UC browser...

Nokia browser...

Top 9 Mobile Browsers in China from Sep 09 to Aug 10 |...
moving forward...
used in iOS, Android, Palm WebOS, Nokia Qt,
Bada, Symbian and new Blackberry...

primarily used on featu...
the importance of WebKit...

open source

licensed under the GNU Library General Public License

excellent standards suppo...
the importance of OperaMini...

free

costs consumers absolutely nothing

a full-web experience

supports Ajax, zooming, t...
proxy browser

rendered + optimised
on proxy server...

and proxy browsers...

free + unlimited
bandwidth
OBML*
limited + ...
on private networks...
caller
a
d

limited + costly
bandwidth
switching
centre
c

receiver
b

base-station
to the Internet...
also availabl

e for Android

...

OperaMini is great for browsing
the web on iPhone when your
connection stinks. Which is...
app

yeah, whatever–I just wanna build a mobile website...
traditionally you might consider...

a device database
ie. DeviceAtlas
or WURFL
device detection
content adaptation
an abs...
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...

TVs

laptops/netbooks

handheld consoles

what exactly is mobile...

http://www.flickr.com/photos/amagill/2627301...
or, more specifically...
128x160

240x320
320x480

1280x768
1024x768

480x800

what isn’t...
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 wo...
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

http://colly.com/

squishy
al
an optimce
experien

squishy

squishy

brought to you through the magic of @media queries...
http://colly.com/

tada!
ahem...

http://www.flickr.com/photos/jakerome/3481634789
these are also mobile...
WebKit

approximations based on actual device testing - font rendering will vary...
http://colly....
as are these...
the iPhone is #1 device for OperaMini

*OperaMini is often preferred by many users as it optimises content...
and these...
77mm

47mm

Mozilla

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

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 d...
as per my highly sophisticated
mobile web triage process... ;)

Good
Could be improved
Needs to be improved

let’s make it...
3 one style sheet w/@media queries
4

jQuery used only for animation...

5 same images used for

all screen devices...

on...
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 short...
2

well structured, meaningful markup...

mmm... meaning!
structure

there’s lots more, but who
wants to stare at code...
...
2

well structured, meaningful markup...
use <header>, <h1>, <p> and other semantically meaningful tags to provide basic s...
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...
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...

http://www.flickr.com/photos/wwworks/3749061604

...from our mobile browsers?
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 ...
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 d...
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
htt...
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 ...
3

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

a single css file is network efficient, but often includes
unnecessary style...
3

default stylesheet plus @media queries...

place mobile related styles into a default stylesheet...

<link href="defaul...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first ...
4

jQuery/JavaScript used only for animation...

jQuery is still a rather hefty library
for use on mobile devices...

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

again, are we expecting too much...?

http://www.flickr.com/photo...
4

use CSS instead of JavaScript for animations...
are jQuery (and JavaScript) necessary to
provide an experience on mobil...
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 ...
5

same images used for all devices...
one size rarely fits all...

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

images adapted appropriately for each device...

ul li#biography a span.label {
background: url("../pig-small.png") rep...
we could also rethink the <img />* tag...
one image can have multiple source
files, each for an appropriate context

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

http://2010.dconstruct.org/

squishy
different

different

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

tada!
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....
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for media queries
is in fact the first @...
6

display:none still loads resources...
don’t expect mobile
bandwidth to be free...

@media (max-device-width:767px), all...
images not used on
mobile devices...

367.35 KB

http://2010.dconstruct.org/

@font-face not supported
on most mobile devi...
6

...avoid sending unnecessary data

@media (max-device-width:767px), all and (max-width:449px) { ...
.speaker-carousel {...
anything else...?
little tweaks...

fixed
width

relative
width
width: 90%;
height: auto;

http://2010.dconstruct.org/
accessibility*

features
usability
experience

functionality
performance
bandwidth

a balancing act...

http://www.flickr.c...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first ...
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
Prochain SlideShare
Chargement dans…5
×

2

Partager

Télécharger pour lire hors ligne

Yiibu rethinkingthemobileweb-100910074556-phpapp01

Télécharger pour lire hors ligne

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Livres audio associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Yiibu rethinkingthemobileweb-100910074556-phpapp01

  1. 1. Rethinking the Mobile Web a pragmatic look at creating an accessible and inclusive mobile experience http://www.flickr.com/photos/fpat/3692425154
  2. 2. we a lovely, location-b ased, social, photo thing y... this presentation is not about these. http://www.flickr.com/photos/scobleizer/3985020876 apps, and...
  3. 3. Dinosaurs! we think the iPad is pretty awesome, but... http://www.flickr.com/photos/goincase/4647893507
  4. 4. something is askew...
  5. 5. billion 1.8 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. billion 6.8 the number of people in the world today... *2009 estimates put the population around 6.79 billion inhabitants...
  7. 7. billion 3.4 the number of people with mobile devices today... or roughly 1/2 the population of the planet, which is...
  8. 8. it’s about people not devices...
  9. 9. so here’s the dilemma... http://www.flickr.com/photos/soundman1024/1796003688
  10. 10. "The future is already here – it’s just not evenly distributed." – William Gibson http://www.flickr.com/photos/kiwanja/3169447879
  11. 11. no home Sony Ericsson w810i no iPhone technology should not only be accessible... http://www.flickr.com/photos/walkadog/3093763311
  12. 12. but inclusive... iPhone http://www.flickr.com/photos/javiercito/2319331695
  13. 13. and available to everyone... iPhone http://www.flickr.com/photos/pictfactory/2796367140
  14. 14. yes, even this man who does not have an iPhone... not an iPhone... http://www.flickr.com/photos/dopesmuglar/486087009
  15. 15. so, who actually has an iPhone... http://www.flickr.com/photos/data_op/2468057934
  16. 16. USA
  17. 17. about 6% US market share... enormous impact US Population: 307 million Smartphone penetration: 31% of pop. iPhone market share: 21% of smp. Total iPhones in US: 19 million (~6%) 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. 18. EU5
  19. 19. only 4% EU5* market share... enormous impact EU5* = France, Germany, Italy, Spain and United Kingdom 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. 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. 21. ie: BMW The ”most popular” devices don’t necessarily translate to the most used devices. ie: Ford
  22. 22. ” yeah, but those devices suck! http://www.flickr.com/photos/eldret_99/3311540398
  23. 23. ahem...
  24. 24. the first smartphone in 2003... considered portable in 1984 fits in your pocket still widely used... Released: 1984 CPU: 8 MHz RAM: 128k (512k max) Storage: 400k (3.5” floppy) Display: 22.9 cm Monochrome Dimensions: 34.5 x 24.4 x 27.7 cm Weight: 7.5 kgs Released: 2003 CPU: 104 MHz RAM: 6 MB Storage: 32 MB MMC Card Display: 5.3 cm Thousands of colours Dimensions: 10.9 x 5.8 x 2.4 cm Weight: 122 g
  25. 25. the music phone in 2008... again, it was ‘portable’...? ...this runs Flash not a feature phone, nor a smartphone... Released: 1998 CPU: 233 MHz RAM: 32 MB (512 MB max) Storage: 4 GB (+ optical drive) Display: 38.1 cm Millions of colours Dimensions: 40.1 x 38.6 x 44.7 cm Weight: 17.3 kgs Released: 2008 CPU: 434 MHz RAM: 128 MB Storage: 8 GB (16 GB max) Display: 8.1 cm Millions of colours Dimensions: 11.1 x 5.2 x 1.5 cm Weight: 109 g
  26. 26. the feature phone in 2009... smartphone from 2005 extremely popular today... still widely used today... Released: 2005 CPU: 220 MHz RAM: 22 MB Storage: 64 MB Display: 5.3 cm Thousands of colours Dimensions: 10.8 x 5.3 x 2.2 cm Weight: 126 g Released: 2009 CPU: 369 MHz RAM: 30 MB Storage: 1 GB (16 GB max) Display: 5.1 cm Thousands of colours Dimensions: 10.6 x 4.7 x 1.5 cm Weight: 88 g
  27. 27. the smartphone in 2010... ...playing “catch-up” Released: 2010 CPU: 680 MHz RAM: 256 MB Storage: 16 GB (32 GB max) Display: 8.9 cm Millions of colours Dimensions: 11.4 x 5.9 x 1.3 cm Weight: 135 g raising the “bar”... Released: 2010 CPU: 1 GHz A4 Processor RAM: 512 MB Storage: 16 GB (32 GB max) Display: 8.9 cm Millions of colours Dimensions: 11.5 x 5.9 x 0.9 cm Weight: 137 g
  28. 28. ” ...but folks with those other phones simply don’t use the Internet. http://www.flickr.com/photos/carbonnyc/3369424492
  29. 29. ” yeah, and grandma doesn’t do Facebook... Grandma* Facebook http://www.flickr.com/photos/amagill/304701054 *not my Grandma
  30. 30. billion 1.3 the number of mobile internet users today... ...includes WAP and ‘real web’ via Tomi Ahonen Consulting
  31. 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. 32. 21% the projected worldwide 3G penetration in 2010... via Morgan Stanley
  33. 33. so, what are they using...
  34. 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... 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 Blackberry!
  35. 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. 36. moving forward... used in iOS, Android, Palm WebOS, Nokia Qt, Bada, Symbian and new Blackberry... primarily used on feature phones supporting Java ME... + WebKit OperaMini watch these... Windows Mobile proxy browser... lots of new browsers, variation and of course – legacy browsers Obigo “Fennec” Internet Explorer Browser UC proxy browsers MicroB SkyFire Internet Browser
  37. 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 WebKit including Apple, Nokia, Samsung, Google, Palm, etc. 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. 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 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 OperaMini
  39. 39. proxy browser rendered + optimised on proxy server... and proxy browsers... free + unlimited bandwidth OBML* limited + costly bandwidth HTML proxy server bbc.co.uk *OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
  40. 40. on private networks... caller a d limited + costly bandwidth switching centre c receiver b base-station to the Internet... transcoding, bandwidth limitations, service blocking and no packet neutrality
  41. 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. 42. app yeah, whatever–I just wanna build a mobile website...
  43. 43. traditionally you might consider... a device database ie. DeviceAtlas or WURFL device detection content adaptation an abstraction layer media types WURFL/WALL transcoding exhausting testing device capabilities various standards multiple templates private networks geing “on-deck” data limits multiple sites an off-deck strategy... cHTML thematic the “One Web” dream consistency correct doctypes fragmentation switching algorithms using UAProf data WML XHTML-MP mimetypes http://www.flickr.com/photos/rmlowe/3281353786 WAP
  44. 44. but that might be a bit overwhelming... ” OMG... http://www.flickr.com/photos/richardmoross/1413692087
  45. 45. start somewhere familiar... http://www.flickr.com/photos/adactio/4742158560
  46. 46. ...a look at what we’re doing now?* *for illustration purposes only
  47. 47. we could do nothing... http://www.alistapart.com/
  48. 48. but that’s not terribly mobile friendly – what about...
  49. 49. a mobile specific site... http://mobify.me http://m.alistapart.com/
  50. 50. oh, but then that just begs the question...
  51. 51. other... TVs laptops/netbooks handheld consoles what exactly is mobile... http://www.flickr.com/photos/amagill/26273015
  52. 52. or, more specifically...
  53. 53. 128x160 240x320 320x480 1280x768 1024x768 480x800 what isn’t...
  54. 54. then again, we could...
  55. 55. create an adaptive experience... http://www.flickr.com/photos/rohit_saxena/4873732679
  56. 56. an example http://colly.com* *for illustration purposes only, I’m not criticising the talented Mr. Collison or his fine work...
  57. 57. http://colly.com MOBILE SITE OF THE YEAR NOMINEE http://www.thenetawards.com/
  58. 58. a lovely website http://colly.com/
  59. 59. squishy squishy with flexible layout http://colly.com/
  60. 60. also available on mobile... squishy http://colly.com/ squishy
  61. 61. al an optimce experien squishy squishy brought to you through the magic of @media queries... http://colly.com/ tada!
  62. 62. ahem... http://www.flickr.com/photos/jakerome/3481634789
  63. 63. these are also mobile... WebKit approximations based on actual device testing - font rendering will vary... http://colly.com/ WebKit
  64. 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. 65. and these... 77mm 47mm Mozilla insanely tiny! expect many more tablet devices on the market soon... http://colly.com/
  66. 66. traditionally used for the fine print... which now require this... http://www.flickr.com/photos/chrisbrenschmidt/1832787028
  67. 67. viewport is much smaller than the actual content and this... http://www.flickr.com/photos/katerha/4592429363
  68. 68. keyhole browsing for this experience http://colly.com/
  69. 69. ...would you be happy with this? hmm... http://colly.com/
  70. 70. once again why are we writing for only one browser... 2000 2010 ...is WebKit the new Internet Explorer?
  71. 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. 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. 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. 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 4 well structured, meaningful markup Javascript animations tend to work poorly on the majority of mobile devices... Good Could be improved Needs to be improved
  75. 75. a few guidelines...
  76. 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. 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. 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> is not cool <div class="body"> <div class="header"> <div class= "h1"> <span>Hello World!</span> </div> <div> soup... </div> <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. 79. 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query...
  80. 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. 81. how retro... kinda backwards... http://www.flickr.com/photos/dumbledad/3400708183
  82. 82. rocket science a desktop browser... are we expecting too much... http://www.flickr.com/photos/nasa_goddard/4678389619/
  83. 83. rocket science a mobile browser... http://www.flickr.com/photos/wwworks/3749061604 ...from our mobile browsers?
  84. 84. which brings us to...
  85. 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. 86. Luke Wroblewski mobile first http://www.lukew.com/ff/entry.asp?933 http://www.flickr.com/photos/pete-karl/4637024524
  87. 87. traditional thinking goes like so...
  88. 88. is technically served to everyone... a full desktop site
  89. 89. sprinkle on a few @media queries... + @media queries a full desktop site
  90. 90. ...if the @media query resolves to true, tada - a mobile site! = mobile site + @media queries a full desktop site
  91. 91. but here’s the problem...
  92. 92. FAIL = mobile site + @media queries a full desktop site http://www.flickr.com/photos/hendry/3053419265
  93. 93. = mobile site a full desktop site http://www.flickr.com/photos/hendry/3053419265
  94. 94. @media queries will resolve to false on most devices... no, really – you simply cannot rely on them currently on mobile devices
  95. 95. resulting in this experience... http://colly.com/
  96. 96. so it’s far more effective when we start with...
  97. 97. is technically served to everyone... a mobile site
  98. 98. for browsers that support them, other browsers will just ignore them... + @media queries a mobile site
  99. 99. tada – a desktop site! ;) = full desktop site + @media queries a mobile site
  100. 100. which is really just...
  101. 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. 102. think mobile first
  103. 103. but let’s get back to...
  104. 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. 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. 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. 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. 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. 109. mobile browsers aren’t as capable as desktop browsers... again, are we expecting too much...? http://www.flickr.com/photos/mjryall/3638778588
  110. 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 .scrollto { -webkit-transform: translate(540px, -200px); -moz-transform: translate(540px, -200px); -o-transform: translate(540px, -200px); } ...use CSS animations (where possible) instead ignored on browsers that don’t support it
  111. 111. look ma, no jQuery? from a time before jQuery... Twier? http://www.flickr.com/photos/wordridden/2474879344
  112. 112. then again, do you really need javascript? *none of these services relied on Javascript when they first started...
  113. 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. 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. 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 also adapt content used in <img /> tags 6 Kb 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" /> 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/ 6 Kb
  116. 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 could be modified as required </img> and possibly even include media queries... *I’m just dreaming here, this doesn’t currently exist...
  117. 117. the results could be...
  118. 118. much better... approximations based on actual device testing - font rendering will vary... http://colly.com/
  119. 119. quick another example... http://2010.dconstruct.org* *again, for illustration purposes only, I’m not criticising the fine folks behind dConstruct...
  120. 120. http://2010.dconstruct.org/
  121. 121. squishy http://2010.dconstruct.org/ squishy
  122. 122. different different again, brought to you through the magic of @media queries... http://2010.dconstruct.org/ tada!
  123. 123. so close... http://2010.dconstruct.org/
  124. 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 2 a single (and compressed!) style sheet well structured, meaningful and compressed markup Good simple DOM scripting without 4 large Javascript libraries Could be improved Needs to be improved
  125. 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. 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. 127. images not used on mobile devices... 367.35 KB http://2010.dconstruct.org/ @font-face not supported on most mobile devices... 93.63 KB
  128. 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. 129. anything else...?
  130. 130. little tweaks... fixed width relative width width: 90%; height: auto; http://2010.dconstruct.org/
  131. 131. accessibility* features usability experience functionality performance bandwidth a balancing act... http://www.flickr.com/photos/superfantastic/50088733
  132. 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. 133. why even bother... I’ve seen that look... http://www.flickr.com/photos/eldret_99/3311540632
  134. 134. ...people actually do use the mobile web source comScore MobiLens http://www.flickr.com/photos/pictfactory/2796367140
  135. 135. ...but, not only on these devices
  136. 136. but, also on these... WebKit OperaMini
  137. 137. and, these... WebKit OperaMini
  138. 138. and, these... btw - expect many, many more devices to be heading our ways soon...
  139. 139. Dinosaurs! ...and shouldn’t everyone benefit from technology? http://www.flickr.com/photos/goincase/4647893507
  140. 140. thank you hello@yiibu.com
  • CharlotteParis1

    Mar. 18, 2014
  • TimFeng1

    Mar. 12, 2014

Vues

Nombre de vues

949

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

2

Actions

Téléchargements

7

Partages

0

Commentaires

0

Mentions J'aime

2

×