Download - Making the web work on mobile: DeviceAtlas
![Page 1: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/1.jpg)
Making the Web Work on Mobile
First presented by dotMobi CTO Ronan Cremin at BDConf 2012
![Page 2: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/2.jpg)
![Page 3: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/3.jpg)
How we got here
![Page 4: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/4.jpg)
Book, 800 AD
33cm
24cm
cover
pages
![Page 5: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/5.jpg)
Book, 2012 AD
33cm
24cm
cover
pages
![Page 6: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/6.jpg)
Radio, 1930 speaker
tuner
volume
![Page 7: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/7.jpg)
Radio, 2012 speaker
tuner
volume
![Page 8: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/8.jpg)
TV, 1950 screen
controls
![Page 9: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/9.jpg)
TV, 2012 screen
controls
![Page 10: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/10.jpg)
Previous media: relatively stable evolution
• Previous media have evolved quite a bit in their lifetime
– Sophistication
– Lowering of production costs
– Lower barriers to entry for consumers
• But
– User interaction models have not changed much in their lifetimes
– Models & paradigms from the dawn of the media largely still apply
– This has led to false sense of complacency with the web
![Page 11: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/11.jpg)
But what about the web?
![Page 12: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/12.jpg)
PC, 1995
![Page 13: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/13.jpg)
PC, 2000
![Page 14: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/14.jpg)
PC, 2005
![Page 15: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/15.jpg)
PC, 2012 1024 x 768
keyboard
mouse
![Page 16: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/16.jpg)
PC: computing capability, physical interface richness
1995 year
RAM
MIPS
screen size
capa
bilit
y
2007
screen resolution
richness of interface
![Page 17: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/17.jpg)
1024 x 768 + keyboard + mouse =
A4 of the web
“Letter”
![Page 18: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/18.jpg)
Web evolution engendered by device diversity
1990 2007 2012 2000
dark ages of the web—the monoweb
age of enlightenment—the polyweb
![Page 19: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/19.jpg)
2002
mind the gap
portable capable
![Page 20: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/20.jpg)
2012
mobile = spectrum of device types
![Page 21: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/21.jpg)
Contexts, interfaces, input methods
![Page 22: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/22.jpg)
Point 1—a new landscape • The emergence of new devices is changing the
way we access the web • The rate of change is unprecedented compared
to any previous media • Every indication suggests that the new diversity is
just beginning • Radically changed interfaces and use cases mean
that mobile web is effectively a new medium, not a differently sized one
• After a long period of stability, huge changes a short time have caught everyone off guard
![Page 23: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/23.jpg)
Lessons from new media
![Page 24: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/24.jpg)
Example: television • The first television shows
were people simply reading books, vaudeville shows
• 20 years passed before the first “TV-native” formats emerged – Soap operas – Sitcoms
• 50 years later: reality TV
![Page 25: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/25.jpg)
Example: desktop web • Many early websites mimiced print
– images & imagemaps used in place of web-native content
• 15+ years before the first “web-native” ideas were invented
– sites that had no real precedent
– things that were “inherently web” could’t really have been done with previous media
– Facebook, Google maps
• We’re still getting used to the idea that there isn’t really a “fold” on the web—scrolling is effortless
![Page 26: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/26.jpg)
Adapting to new media
• Content creators struggle to understand new media
• Initial uses mimic those of previous media • New medium capabilities remain
misunderstood and under-utilized • Experiences “native” to the new media take
time to emerge • Retro-fitting old content to new media is a
failure of imagination
![Page 27: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/27.jpg)
Web on mobile, new medium • Mobile web uses HTTP, HTML, CSS and JavaScript,
just like the web we know
• But it is effectively a new medium, and perhaps should be treated as such
• This new medium runs on a vast array of devices
• Demands that you are aware of their features and limitations to deliver the best experience
• Let’s not forget the lessons from previous media—by force-fitting our desktop web to the new devices we’re repeating the error
![Page 28: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/28.jpg)
![Page 29: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/29.jpg)
![Page 30: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/30.jpg)
portion of north ceiling
portion of south wall
corner pendentive
portion of east wall
corner pendentive
spandrel
spandrel
![Page 31: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/31.jpg)
![Page 32: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/32.jpg)
Good experiences are tailored, not repurposed
• Key lesson from previous media:
• Good experiences are tailored to the medium
• Good experiences acknowledge and harness their container
• Design for setting and context
• Automatic conversion doesn’t work
• One-size-fits-all isn’t good enough
• It may “work” but it won’t excel
![Page 33: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/33.jpg)
Point 2—design for the new medium
• The new web isn’t problem to be solved, it’s an opportunity to be
embraced
• Just when things are getting exciting is not the time to look for silver
bullet solutions
• Previous new media suggest that experiences designed for each media
work best
• Let’s not limit our experiences of the new web to those we know from
web desktop
• The best way to cope with the changes is to cater for the bit that
changed—the devices
![Page 34: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/34.jpg)
Embracing the new web
![Page 35: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/35.jpg)
Existing tool chain is still evolving
• Most existing tools are either: – limited – mired in monoweb
thinking • Industry is still
grappling with the changes
• Situation not going to change any time soon
AU
THO
RIN
G
PU
BLIS
HIN
G
CM
S
![Page 36: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/36.jpg)
![Page 37: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/37.jpg)
The device is the canvas
• In this renaissance of the web, the device is the canvas—from feature phone to TV
• But the canvas is no longer fixed—no longer a valid assumption for the artist
• The paint is still HTML, CSS and JavaScript, the protocol is still HTTP ..but the methods have to change
![Page 38: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/38.jpg)
Know your canvas—device awareness
• The new medium is defined by the devices that constitute it
• Embracing the device in question is best way to ensure a good experience
• Build an experience that suits the context & device:
– Be aware of its features, harness them
– Know its limitations, work around them
• We need all of the help that we can get
☒ makes calls ☐ big screen ☐ touch screen
☐ makes calls ☒ big screen ☒ touch screen
☐ makes calls ☒ big screen ☐ touch screen
![Page 39: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/39.jpg)
Server-side device awareness
![Page 40: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/40.jpg)
Device awareness: spawn of satan?
• "Sniffing, as the practice has been called, is a fragile one, however.”
• “Browser sniffing has a justifiably bad reputation”
• “Flawed concept”
• “Browser sniffing doesn't work”
• “There are too many browsers to handle”
• “..the user agent string was a complete mess, and near useless, and everyone pretended to be everyone else, and confusion abounded”
• “it’s simply not necessary, besides being wrong on a fundamental level”
• “Nearly everybody did it. And everybody was wrong. Not `there’s something to say for it but sometimes you don’t need it’ wrong, but just plain `you have no clue what you’re doing’ wrong”
![Page 41: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/41.jpg)
Or best-of-breed tool? Server-side device detection used by:
![Page 42: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/42.jpg)
Claim: device detection is fra . • Most common explanation: device DB goes out of date.
– Clearly untrue—the vendors of such solutions vendors very existence depends on this not happening
• Device detection can be used badly, just like any technology. Bad implementation ≠ bad idea.
• Clearly, if it really was fragile it would not be used by the industry-leading web brands
• Anybody who uses Facebook, Google etc. is enjoying the benefits of device detection
• Silent evidence / confirmation error problem: its successes go unnoticed; its failures are very obvious
![Page 43: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/43.jpg)
<?php include './DA/Client.php'; $data = DeviceAtlasCloudClient::getDeviceData(); $width = $data['properties']['displayWidth']; if (480 < $width) { // smartphone view } elseif (600 < $width) { // narrow view } elseif (800 < $width) { // desktop view } elseif (1024 < $width) { // wide view } ?>
@media screen and (min-width: 480px) { /* smartphone CSS */ } @media screen and (min-width: 600px) { /* narrow view CSS */ } @media screen and (min-width: 800px) { /* desktop CSS */ } @media screen and (min-width: 1024px) { /* wide CSS */ }
device detection v media queries
vs.
similar complexity levels
media queries server-side detection
![Page 44: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/44.jpg)
“Everyone pretends to be everyone else”
• 12,000+ distinct devices, <5 nefarious masquerades (0.05%)
• Remaining devices easily differentiable
• Opera Mini sends headers for underlying device
• Simply not true in mobile world “iPhone W88”
![Page 45: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/45.jpg)
Claim: device detection is wrong
• There is a lot of strong opinion about what’s right and wrong
• But in fact device detection is designed into the web
• Best understood with some historical context..
![Page 46: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/46.jpg)
Response tailoring is built into HTTP 1.0
RFC 1945 (HTTP 1.0), T. Berners-Lee, 1996 10.15 User-Agent The User-Agent request-header field contains information about the user agent originating the request. This is for statistical purposes, the tracing of protocol violations, and automated recognition of user agents for the sake of tailoring responses to avoid particular user agent limitations.
RFC 1945
![Page 47: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/47.jpg)
RFC 2616 (HTTP 1.1) T. Berners-Lee et al, 1999 HTTP/1.1 includes the following request-header fields for enabling server-driven negotiation through description of user agent capabilities and user preferences: Accept (section 14.1), Accept- Charset (section 14.2), Accept-Encoding (section 14.3), Accept- Language (section 14.4), and User-Agent (section 14.43).
Response tailoring is built into HTTP 1.1
RFC 2616
![Page 48: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/48.jpg)
http://www.w3.org/TR/mobile-bp/#OneWeb (2008)
One Web means making, as far as is reasonable, the same information and
services available to users irrespective of the device they are using.
However, it does not mean that exactly the same information is available in
exactly the same representation across all devices. The context of mobile
use, device capability variations, bandwidth issues and mobile network
capabilities all affect the representation. Furthermore, some services and
information are more suitable for and targeted at particular user contexts.
W3C’s “one web” is often misunderstood
Mobile Web Best Practices 1.0
![Page 49: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/49.jpg)
So where does the perception come from?
• Mostly stems from working around browser flaws in early days of web
• Important not to conflate two uses cases for detection:
– Working around browser defects (historical)
– Catering to devices with radically differing capabilities (modern)
• The former usage may be objectionable, but the latter surely is not
• Don’t let historical misuse prevent you from using a useful tool
vs.
![Page 50: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/50.jpg)
Being device aware
![Page 51: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/51.jpg)
prism.mobiforge.com
![Page 52: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/52.jpg)
100% control of delivered content
• Send only what you need to each device/experience
• Huge expressive range—from feature phones to televisions
• Change design, input mechanisms, image sizes, everything for each device type
CO
NTE
XTS
INTE
RFAC
ES
S
CR
EE
NS
![Page 53: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/53.jpg)
Performance
• Each device gets only what it needs, with cascade of benefits:
– Reduced loading time
– Reduced rendering time
– Reduced CPU overhead & battery drain
• Remember, 3G or 4G signal ≠ bandwidth guarantee (congested cell, airport WiFi)
116KB 6KB 4KB
124KB
53KB 46KB
![Page 54: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/54.jpg)
Performance of RWD-only sites
286Kb 286Kb 286Kb
![Page 55: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/55.jpg)
Leverage device capabilities
• JavaScript feature tests are very useful but:
– don’t know what the device is
– know only features related to browser (not device)
• Properties unknowable via JavaScript feature tests:
– device type: mobile | desktop | tablet | TV | e-reader | set-top box
– hardware features: camera | screen colour depth
– model, vendor, operating system, version
mobile device?
has camera?
supports touch?
![Page 56: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/56.jpg)
Full control of site architecture
• All options supported
– Multiple different views on single URL
– Different site / sub-domain for each experience
• Full flexibility over experience & content served in each case
• Easy to add additional segmentation without compromising other experiences
– Easier testing—different device experiences can be isolated
• Big differences between form factors is easy (feature phone vs. TV)
site.com
site.com
touch.site.com
tv.site. com
lite.site.com
1
2
![Page 57: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/57.jpg)
• Server-side device detection is only way to get device statistics from sites
• Used by Omniture, Google Analytics, Webtrends, IBM CoreMetrics etc.
Statistics and analytics
![Page 58: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/58.jpg)
Disadvantages
• Some user settings can’t be known in advance e.g. cookie support, orientation
• Server-side skills required (a new reality for the web?)
• Cost—detection solutions have annual licensing fees
• Device data must be updated – single biggest issue – not “future friendly”
![Page 59: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/59.jpg)
Future friendliness • Device databases need to be updated, there
is external dependency
– But so too do server OSes, libraries, media query breakpoints
• Sensible defaults mean graceful degradation when faced with unknown devices
• Don’t forget present-friendliness
– Are you supporting all currently available devices? Including feature phones?
– Getting no feature phone traffic? How do you know?
![Page 60: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/60.jpg)
Point 3—use all the tools available
• In this new web environment you need all of the help you can get
• There are no silver bullets, no holy grail—you should use all of the tools available to you
• Device detection is a really useful tool in the developer’s tool box
– All best-of-breed experiences are using it
– Don’t let preconceptions from bygone era preclude great performance & expressive range
– Works well in tandem with client-side approaches—fine tuning, user settings
![Page 61: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/61.jpg)
Wrap up
![Page 62: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/62.jpg)
Summary—the landscape • There are macro-level changes happening on the web, a web
renaissance is beginning
• New devices are enabling the web to reach its full potential
• The new capabilities effectively engender a new medium
• Every indication that this diversity will increase over time—phones are just the beginning
• The polyweb experience is becoming a differentiating factor for brands
![Page 63: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/63.jpg)
Summary—the tools
• There are many tools to help
• Harnessing the full potential of the web requires knowledge of the device
• Avail of all tools in the toolbox—no silver bullets
• If you don’t you’re discarding useful information
• Your competitors won’t make the same mistake
![Page 64: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/64.jpg)
• But only if you use them
“Mobile gives the web wings” - Mary Meeker
![Page 65: Making the web work on mobile: DeviceAtlas](https://reader033.vdocument.in/reader033/viewer/2022052507/5589e6fcd8b42a930c8b4666/html5/thumbnails/65.jpg)
http://deviceatlas.com/futureofthemobileweb
http://deviceatlas.com/
@device_atlas
http://gomobi.info/