The web we love (and hate) now today, is not the same web from just only five years ago, and won’t be the same web we know next year. The web is rapidly changing and in multiple ways. How we use it, where we use it, what we use it for, and how we are accessing it. Between being accessible now by multiple devices from mobile handsets, tablets, even TVs and refrigerators, we can only guess where it may end up next, or what the next iPhone will be like. Though we can’t be 100% future-proof for what may be next, we can take some steps in the right direction to give a great experience today that will hold up tomorrow. Most of all we need to change our way of thinking.
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Shapeshifting: Adaptive and Future Friendly Web Design
1. Shapeshifting
Adaptive & Future Friendly Web Design
Christopher Cochran
@TweetsfromChris
Sunday, October 21, 12
2. ? Web OS
? TV
Nexus iOS BlackBerry iPhone Kindle
? iPad android Windows Galaxy
Feature Phone Smart Phone
Droid Tablet Mini Tablet Retina
Fire ?
? ? Opera Mini
Opera Mobile
Surface
Sunday, October 21, 12
3. user input methods
• Mouse & keyboard
• Touch
• Gesture
• Pen
•?
Sunday, October 21, 12
5. For some, mobile is the ONLY
connection to the web.
10% of Americans Are Mobile Only
(This number can be much higher in other countries)
Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012”
Sunday, October 21, 12
6. Cell phone owners do most of their online
17% browsing on their phone, rather than a
computer or other device
Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012”
Sunday, October 21, 12
7. 72% Consumers Want
Mobile-Friendly Sites
Yet....
Source: Google Mobile Ads Marketing
Sunday, October 21, 12
8. 96%
have visited a site that
doesn’t work well
Source: Google Mobile Ads Marketing
Sunday, October 21, 12
9. ?
So that’s
NOW
But What About The
FUTURE
Sunday, October 21, 12
10. ?
No Clue.
Not
Psychic,
Just A
Penguin
Sunday, October 21, 12
11. But we can prepare for the future, with technology we have now.
Sunday, October 21, 12
12. And a Change of
thinking.
Sunday, October 21, 12
22. Media Queries
• Set viewport
<meta name="viewport" content="initial-scale=1.0"></meta>
@viewport {
zoom: 1.0;
width: auto;
}
• Set break points around content, not devices.
• Inherent, and build upon default styles.
Sunday, October 21, 12
24. Detect Touch
Touch interaction is different than mouse and
keyboard.
Input size can vary.
Sunday, October 21, 12
25. Interaction Area Reading Area
OK Best
Better Better
Best OK
Sunday, October 21, 12
26. Baby
Touch Input
8 mm
9
10
Average 11
index finger
width
12
13 Minimum Target Size = 40px w/10px MArgin
14
15
16
17
18
19 mm
% OF MISSED TAPS
Basketball player 25% 1 in 30 taps (3%) 1 in 100 (1%) 1 in 200 (0.5%)
will miss the target
20%
15%
10%
5%
Target size 3 mm 5 mm 7 mm 9 mm 11 mm 13 mm
Sunday, October 21, 12
27. HTML5 INput
tel
url
email
number
password
autocapitalize="off"
Sunday, October 21, 12