0
Making the Web work
on Mobile
Mobile Marketing Live
Ronan Cremin, CTO dotMobi
@xbs
Friday 4 October 13
Friday 4 October 13
Friday 4 October 13
Where is mobile web
today?
Friday 4 October 13
#mml
PC, 1995
Friday 4 October 13
#mml
PC, 2000
Friday 4 October 13
#mml
PC, 2005
Friday 4 October 13
#mml
PC, 2013
Friday 4 October 13
#mml
PC, 2013
1024 x 768
keyboard
mouse
Friday 4 October 13
#mml
1024 x 768
+
keyboard
+
mouse
=
A4
of the web
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990
year
capability
2007
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990
year
RAM
capability
2007
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990
year
RAM
MIPS
capability
2007
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990
year
RAM
MIPS
screen size
capability
2007
Friday 4 October...
#mml
PC: computing capability, physical interface richness
1990
year
RAM
MIPS
screen size
capability
2007
screen resolutio...
#mml
PC: computing capability, physical interface richness
1990
year
RAM
MIPS
screen size
capability
2007
screen resolutio...
#mml
Web evolution engendered by device diversity
1990 2007 20132000
Friday 4 October 13
#mml
Web evolution engendered by device diversity
1990 2007 20132000
dark ages of the web—
web is monoculture
Friday 4 Oct...
#mml
Web evolution engendered by device diversity
1990 2007 20132000
dark ages of the web—
web is monoculture
age of enlig...
2002
mind the
gap
portable capable
Friday 4 October 13
2013
Friday 4 October 13
2013
Friday 4 October 13
2013
Friday 4 October 13
2013
Friday 4 October 13
2013
Friday 4 October 13
2013
Friday 4 October 13
2013
Friday 4 October 13
2013
Friday 4 October 13
2013
mobile =
spectrum of
device types
Friday 4 October 13
2013
mobile =
spectrum of
device types
Friday 4 October 13
New devices drive exponential reach
mainframe
workstation
PC
netbook
mobile
Friday 4 October 13
And increased availability
workstation
PC
mobile
24:000:00 9:00 17:00
Friday 4 October 13
Making the web work on
mobile
3 principles for success
Friday 4 October 13
1. The mobile web is truly
global
Friday 4 October 13
WWW
Friday 4 October 13
WWWwestern world web
Friday 4 October 13
WWWwestern world web
Friday 4 October 13
WWWwestern world web
wealthy wonders web
Friday 4 October 13
WWWwestern world web
wealthy wonders web
Friday 4 October 13
WWW
world wide web
western world web
wealthy wonders web
Friday 4 October 13
It’s for everyone, everywhere
• This means:
• myriad device types
• differing connectivity
• different costs
• different cont...
2. The mobile web—a new
medium
Friday 4 October 13
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Physical
screen size
Input
methods
Viewing
distance
Physical
context
Pixel
dimensions
Tablet Desktop TVMobile
176 x 220
to...
Web on mobile, new medium
• Mobile web uses HTTP, HTML,
CSS and JavaScript, just like the
web we know
• But it is effective...
New medium example: television
• The first television shows
were people simply
reading books, vaudeville
shows
• 20 years l...
New medium example: desktop web
• Many early websites mimicked
print
• images & image maps used in
place of web-native con...
#mml
History of adapting to new media
• Content creators struggle to understand new media
• Initial uses mimic those of pr...
Friday 4 October 13
Friday 4 October 13
Friday 4 October 13
portion of north ceiling
portion of south wall
corner pendentive
portion of east wall
corner pendentive
spandrel
spandrel
...
Good experiences are native, not converted
• Key lesson from previous
media:
• Good experiences are native
to the medium
•...
3. Embrace the devices
One size does not fit all
Friday 4 October 13
The device is the canvas
• In this renaissance of the
web, the device is the
canvas—from feature
phone to TV
• But the can...
Know your canvas—device awareness
• The new web is defined by
the devices that constitute it
• Embracing the device in
ques...
Know your canvas—device awareness
• The new web is defined by
the devices that constitute it
• Embracing the device in
ques...
Leverage device capabilities
• Know the device
• device type: mobile |
desktop | tablet | TV |
e-reader | set-top box
• ha...
Leverage device capabilities
• Know the device
• device type: mobile |
desktop | tablet | TV |
e-reader | set-top box
• ha...
amazon.com
Friday 4 October 13
google.com
Friday 4 October 13
tripadvisor.com
Friday 4 October 13
Walmart
Friday 4 October 13
Wrap up
Friday 4 October 13
A web renaissance
• There are macro-level changes happening on the web, a
web renaissance is beginning
• New devices are fi...
Design for the new medium
• It’s a world wide web, not a local
one
• Design for different devices,
connectivity, use cases
...
Design for the new medium
• It’s a world wide web, not a local
one
• Design for different devices,
connectivity, use cases
...
Design for the new medium
• It’s a world wide web, not a local
one
• Design for different devices,
connectivity, use cases
...
Design for the new medium
• It’s a world wide web, not a local
one
• Design for different devices,
connectivity, use cases
...
http://deviceatlas.com/
resources/whitepapers
http://deviceatlas.com/
Ronan Cremin rcremin@afilias.info @xbs
http://gomobi....
Upcoming SlideShare
Loading in...5
×

Ronan cremin dot mobi - mml 2013

314

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
314
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ronan cremin dot mobi - mml 2013"

  1. 1. Making the Web work on Mobile Mobile Marketing Live Ronan Cremin, CTO dotMobi @xbs Friday 4 October 13
  2. 2. Friday 4 October 13
  3. 3. Friday 4 October 13
  4. 4. Where is mobile web today? Friday 4 October 13
  5. 5. #mml PC, 1995 Friday 4 October 13
  6. 6. #mml PC, 2000 Friday 4 October 13
  7. 7. #mml PC, 2005 Friday 4 October 13
  8. 8. #mml PC, 2013 Friday 4 October 13
  9. 9. #mml PC, 2013 1024 x 768 keyboard mouse Friday 4 October 13
  10. 10. #mml 1024 x 768 + keyboard + mouse = A4 of the web Friday 4 October 13
  11. 11. #mml PC: computing capability, physical interface richness 1990 year capability 2007 Friday 4 October 13
  12. 12. #mml PC: computing capability, physical interface richness 1990 year RAM capability 2007 Friday 4 October 13
  13. 13. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS capability 2007 Friday 4 October 13
  14. 14. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS screen size capability 2007 Friday 4 October 13
  15. 15. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS screen size capability 2007 screen resolution Friday 4 October 13
  16. 16. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS screen size capability 2007 screen resolution richness of interface Friday 4 October 13
  17. 17. #mml Web evolution engendered by device diversity 1990 2007 20132000 Friday 4 October 13
  18. 18. #mml Web evolution engendered by device diversity 1990 2007 20132000 dark ages of the web— web is monoculture Friday 4 October 13
  19. 19. #mml Web evolution engendered by device diversity 1990 2007 20132000 dark ages of the web— web is monoculture age of enlightenment — web diversity Friday 4 October 13
  20. 20. 2002 mind the gap portable capable Friday 4 October 13
  21. 21. 2013 Friday 4 October 13
  22. 22. 2013 Friday 4 October 13
  23. 23. 2013 Friday 4 October 13
  24. 24. 2013 Friday 4 October 13
  25. 25. 2013 Friday 4 October 13
  26. 26. 2013 Friday 4 October 13
  27. 27. 2013 Friday 4 October 13
  28. 28. 2013 Friday 4 October 13
  29. 29. 2013 mobile = spectrum of device types Friday 4 October 13
  30. 30. 2013 mobile = spectrum of device types Friday 4 October 13
  31. 31. New devices drive exponential reach mainframe workstation PC netbook mobile Friday 4 October 13
  32. 32. And increased availability workstation PC mobile 24:000:00 9:00 17:00 Friday 4 October 13
  33. 33. Making the web work on mobile 3 principles for success Friday 4 October 13
  34. 34. 1. The mobile web is truly global Friday 4 October 13
  35. 35. WWW Friday 4 October 13
  36. 36. WWWwestern world web Friday 4 October 13
  37. 37. WWWwestern world web Friday 4 October 13
  38. 38. WWWwestern world web wealthy wonders web Friday 4 October 13
  39. 39. WWWwestern world web wealthy wonders web Friday 4 October 13
  40. 40. WWW world wide web western world web wealthy wonders web Friday 4 October 13
  41. 41. It’s for everyone, everywhere • This means: • myriad device types • differing connectivity • different costs • different contexts & use cases • different languages • It’s not just for the west, on our devices, with our bandwidth • Use Responsible Web Design Friday 4 October 13
  42. 42. 2. The mobile web—a new medium Friday 4 October 13
  43. 43. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  44. 44. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  45. 45. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  46. 46. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  47. 47. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  48. 48. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  49. 49. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  50. 50. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  51. 51. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  52. 52. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods 106x Friday 4 October 13
  53. 53. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods 106x Friday 4 October 13
  54. 54. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods 106x Friday 4 October 13
  55. 55. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods defies easy classification 106x Friday 4 October 13
  56. 56. 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 should be treated as such • This new medium runs on a vast array of devices, sizes shapes • New interfaces: touch, accelerometers, cameras, gyroscope, compass • New contexts: outdoors, on the move, supine 176 x 220 to 800 x 1280 0.3m Friday 4 October 13
  57. 57. New medium example: television • The first television shows were people simply reading books, vaudeville shows • 20 years later: the first “TV- native” programming emerged • Soap operas • Sitcoms • 50 years later: reality TV Friday 4 October 13
  58. 58. New medium example: desktop web • Many early websites mimicked print • images & image maps 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 Friday 4 October 13
  59. 59. #mml History of 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 emerge slowly— decades • Retro-fitting old content to new media stifles innovation • So what about the new web? Friday 4 October 13
  60. 60. Friday 4 October 13
  61. 61. Friday 4 October 13
  62. 62. Friday 4 October 13
  63. 63. portion of north ceiling portion of south wall corner pendentive portion of east wall corner pendentive spandrel spandrel Friday 4 October 13
  64. 64. Good experiences are native, not converted • Key lesson from previous media: • Good experiences are native to the medium • Good experiences acknowledge and harness their container • Retro-fitting doesn’t work—let’s not force-fit our desktop web to the new devices • Let’s not wait 20 years to work out how to use newly diverse web Friday 4 October 13
  65. 65. 3. Embrace the devices One size does not fit all Friday 4 October 13
  66. 66. The device is the canvas • In this renaissance of the web, the device is the canvas—from feature phone to TV • But the canvas isn’t fixed— this is no longer a valid assumption for the artist • The paint is still HTML, CSS and JavaScript, the protocol is still HTTP ..but the techniques have to change Friday 4 October 13
  67. 67. Know your canvas—device awareness • The new web is defined by the devices that constitute it • Embracing the device in question is best way to ensure a good experience • Craft experiences to suit the context & device: • Be aware of its features, harness them • Know its limitations, work around them • How can we achieve this? Friday 4 October 13
  68. 68. Know your canvas—device awareness • The new web is defined by the devices that constitute it • Embracing the device in question is best way to ensure a good experience • Craft experiences to suit the context & device: • Be aware of its features, harness them • Know its limitations, work around them • How can we achieve this? ☒ makes calls ☐ big screen ☐ touch screen ☐ makes calls ☒ big screen ☒ touch screen ☐ makes calls ☒ big screen ☐ touch screen Friday 4 October 13
  69. 69. Leverage device capabilities • Know the device • device type: mobile | desktop | tablet | TV | e-reader | set-top box • hardware features: camera | screen colour depth • model, vendor, operating system, version • Tailor the experience Friday 4 October 13
  70. 70. Leverage device capabilities • Know the device • device type: mobile | desktop | tablet | TV | e-reader | set-top box • hardware features: camera | screen colour depth • model, vendor, operating system, version • Tailor the experience mobile device? has camera? supports touch? Friday 4 October 13
  71. 71. amazon.com Friday 4 October 13
  72. 72. google.com Friday 4 October 13
  73. 73. tripadvisor.com Friday 4 October 13
  74. 74. Walmart Friday 4 October 13
  75. 75. Wrap up Friday 4 October 13
  76. 76. A web renaissance • There are macro-level changes happening on the web, a web renaissance is beginning • New devices are finally enabling the web to reach its full potential and audience • The new capabilities effectively engender a new medium • Every indication that this diversity will increase over time —phones & tablets are just the beginning • The web experience in this new landscape is becoming a differentiating factor for brands Friday 4 October 13
  77. 77. Design for the new medium • It’s a world wide web, not a local one • Design for different devices, connectivity, use cases • Use Responsible Web Design • Mobile web isn’t a shrunken web • It can do more, but you have to design for it • Don’t limit yourself to desktop web thinking • Embrace the devices • Each has unique features— know them & avail of them! Friday 4 October 13
  78. 78. Design for the new medium • It’s a world wide web, not a local one • Design for different devices, connectivity, use cases • Use Responsible Web Design • Mobile web isn’t a shrunken web • It can do more, but you have to design for it • Don’t limit yourself to desktop web thinking • Embrace the devices • Each has unique features— know them & avail of them! Friday 4 October 13
  79. 79. Design for the new medium • It’s a world wide web, not a local one • Design for different devices, connectivity, use cases • Use Responsible Web Design • Mobile web isn’t a shrunken web • It can do more, but you have to design for it • Don’t limit yourself to desktop web thinking • Embrace the devices • Each has unique features— know them & avail of them! Friday 4 October 13
  80. 80. Design for the new medium • It’s a world wide web, not a local one • Design for different devices, connectivity, use cases • Use Responsible Web Design • Mobile web isn’t a shrunken web • It can do more, but you have to design for it • Don’t limit yourself to desktop web thinking • Embrace the devices • Each has unique features— know them & avail of them! Friday 4 October 13
  81. 81. http://deviceatlas.com/ resources/whitepapers http://deviceatlas.com/ Ronan Cremin rcremin@afilias.info @xbs http://gomobi.info/ Friday 4 October 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×