Embed Size (px)
DESCRIPTION
Citation preview
Making the Web work on Mobile Mobile Marketing Live
Ronan Cremin, CTO dotMobi
@xbsFriday 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=
A4of the web
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990year
capa
bilit
y
2007
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990year
RAM
capa
bilit
y
2007
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990year
RAM
MIPS
capa
bilit
y
2007
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990year
RAM
MIPS
screen size
capa
bilit
y
2007
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990year
RAM
MIPS
screen size
capa
bilit
y
2007
screen resolution
Friday 4 October 13
#mml
PC: computing capability, physical interface richness
1990year
RAM
MIPS
screen size
capa
bilit
y
2007
screen resolution
richness of interface
Friday 4 October 13
#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 October 13
#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
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
WWWFriday 4 October 13
WWWwestern world web
Friday 4 October 13
WWWwestern world web
Friday 4 October 13
WWWwestern world webwealthy wonders web
Friday 4 October 13
WWWwestern world webwealthy wonders web
Friday 4 October 13
WWWworld wide web
western world webwealthy wonders web
Friday 4 October 13
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
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
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
106x
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
106x
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
106x
Friday 4 October 13
Physical screen size
Input methods
Viewing distance
Physical context
Pixel dimensions
Tablet Desktop TVMobile
176 x 220 to
800 x 1280
600 x 800to
2048 x 1536
800 x 600to
2560 x 1600
1280 x 720to
1980 x 1080
0.3m 0.5m 0.7m 3m
Contexts, interfaces, input methods
defies easy
classification
106x
Friday 4 October 13
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
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
New medium example: desktop web• Many early websites mimicked
• 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
#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
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
Friday 4 October 13
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
3. Embrace the devicesOne 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 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
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
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
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
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
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 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
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
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
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
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
http://deviceatlas.com/resources/whitepapers
http://deviceatlas.com/
Ronan Cremin [email protected] @xbs
http://gomobi.info/
Friday 4 October 13
