Shapeshifting Adaptive & Future Friendly Web Design
Christopher Cochran@TweetsfromChris
Sunday, October 21, 12
iOSandroid
BlackBerry
WindowsSmart Phone
TabletFeature Phone
Mini Tablet Retina
iPhoneiPad
Droid
Galaxy
Nexus
?
?
Fire? Opera Mini?
Surface
Kindle?Web OS
Opera Mobile
?
TV
Sunday, October 21, 12
user input methods
•Mouse & keyboard• Touch•Gesture•Pen• ?
Sunday, October 21, 12
?The Web Is Not A Fixed Medium
And full of unknown
Sunday, October 21, 12
10% of Americans Are Mobile Only
For some, mobile is the ONLY connection to the web.
(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
Cell phone owners do most of their online browsing on their phone, rather than a computer or other device
17%
Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012”
Sunday, October 21, 12
Consumers Want Mobile-Friendly Sites72%
Source: Google Mobile Ads Marketing
Yet....
Sunday, October 21, 12
have visited a site that doesn’t work well
96%
Source: Google Mobile Ads Marketing
Sunday, October 21, 12
So that’s
NOWBut What About The
FUTURE?Sunday, October 21, 12
No Clue. Not Psychic,Just A Penguin
?
Sunday, October 21, 12
But we can prepare for the future, with technology we have now.
Sunday, October 21, 12
And a Change of
thinking.
Sunday, October 21, 12
Content First
Sunday, October 21, 12
AD
AD AD AD
ADAD CONTENT
LOGO
Sunday, October 21, 12
AD
AD AD AD
ADAD CONTENT
LOGO
NOT CONTENT FIRST
Sunday, October 21, 12
Adaptive
PROGRESSIVE ENHANCEMENT
FeatureDETECTIONResponsive
Sunday, October 21, 12
START with the LEASTCommon Denominator.
ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT
Sunday, October 21, 12
Mobile First
Sunday, October 21, 12
Flow With the CascadeIt’s a beautiful thing
Sunday, October 21, 12
100%
HEADER
CONTENT SIDEBAR
67.1875% 31.1875%
1.635%
Be Fluid
Sunday, October 21, 12
A Pixel IS NOT A PIXEL
Sunday, October 21, 12
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
Feature Detection
Modernizr
Sunday, October 21, 12
Detect Touch
Touch interaction is different than mouse and keyboard.
Input size can vary.
Sunday, October 21, 12
OK
Better
Best
Better
OK
Best
Interaction Area Reading Area
Sunday, October 21, 12
15
16
17
18
19 mm
12
13
14
10
11Average index !ngerwidth
Baby
Basketball player
8 mm
9
% OF MISSED TAPS
25%
20%
15%
10%
5%
3 mm 5 mm 7 mm 9 mm 11 mm 13 mmTarget size
1 in 30 taps (3%)will miss the target
1 in 100 (1%) 1 in 200 (0.5%)
� � �
Touch Input
Minimum Target Size = 40px w/10px MArgin
Sunday, October 21, 12
HTML5 INput
telurlemailnumberpasswordautocapitalize="off"
Sunday, October 21, 12
wp_is_mobile()
Sunday, October 21, 12
ADAPTIVE MEDIA
Sunday, October 21, 12
Icon Fonts
Sunday, October 21, 12
TOOLS of the TRADE
Sunday, October 21, 12
ResourcesEthan Marcotte (@RWD) http://ethanmarcotte.com/Jeffrey Zeldman (@zeldman) http://www.zeldman.com/Paul Irish (@paul_irish) http://paulirish.com/Luke Wroblewski (@lukew) http://www.lukew.com/Brad Frost (@brad_frost) http://bradfrostweb.com/
People
http://www.webplatform.org/http://www.html5rocks.com/en/http://www.alistapart.com/http://bradfrost.github.com/this-is-responsive/index.htmlhttp://movethewebforward.org/https://developer.apple.com/library/safari/navigation/index.htmlhttps://developer.mozilla.org/en-US/docshttp://msdn.microsoft.com/library/ie/
Links
Books
MOBILE FIRST & RESPONSIVE WEB DESIGN BUNDLE(http://www.abookapart.com/products/mobile-first-responsive-web-design-bundle)HTML5 & CSS3 FOR WEB DESIGNERS BUNDLE(http://www.abookapart.com/products/html5-css3-bundle)DESIGNING WITH PROGRESSIVE ENHANCEMENT(http://filamentgroup.com/dwpe/)ADAPTIVE WEB DESIGN(http://easy-readers.net/books/adaptive-web-design/)
Sunday, October 21, 12
