Shapeshifting: Adaptive and Future Friendly Web Design

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