Your SlideShare is downloading. ×
0
Shapeshifting                 Adaptive & Future Friendly Web Design                             Christopher Cochran       ...
?                 Web OS                                                      ?     TV                    Nexus         iO...
user input methods           • Mouse & keyboard           • Touch           • Gesture           • Pen           •?Sunday, ...
Sunday, October 21, 12                                 ?                         The Web Is Not A Fixed                   ...
For some, mobile is the ONLY                                          connection to the web.                         10% o...
Cell phone owners do most of their online             17%         browsing on their phone, rather than a                  ...
72%         Consumers Want                         Mobile-Friendly Sites                                                  ...
96%                         have visited a site that                           doesn’t work well                          ...
?                         So that’s                         NOW                         But What About The                ...
?                             No Clue.                             Not                             Psychic,               ...
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 FirstSunday, October 21, 12
LOGO          AD                         AD   AD        AD                         AD   CONTENT    ADSunday, October 21, 12
LOGO          AD                         AD   AD        AD       NOT CONTENT FIRST                         AD   CONTENT   ...
Adaptive    PROGRESSIVE           Responsive   Feature    ENHANCEMENT                        DETECTIONSunday, October 21, 12
START with the LEAST                         Common Denominator.              ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHTSunday,...
Mobile FirstSunday, October 21, 12
Flow With the Cascade                             It’s a beautiful thingSunday, October 21, 12
Be Fluid                                     HEADER                                      100%                         CONT...
A Pixel IS NOT A PIXELSunday, October 21, 12
Media Queries       • Set viewport       <meta name="viewport" content="initial-scale=1.0"></meta>       @viewport {      ...
Feature Detection          ModernizrSunday, October 21, 12
Detect Touch       Touch interaction is different than mouse and       keyboard.       Input size can vary.Sunday, October ...
Interaction Area   Reading Area                          OK           Best                         Better        Better   ...
Baby                                                               Touch Input                                8 mm        ...
HTML5 INput     tel     url     email     number     password     autocapitalize="off"Sunday, October 21, 12
wp_is_mobile()Sunday, October 21, 12
ADAPTIVE               MEDIASunday, October 21, 12
Icon FontsSunday, October 21, 12
TOOLS                          of the                         TRADESunday, October 21, 12
People   Ethan Marcotte (@RWD) http://ethanmarcotte.com/                                                                  ...
Upcoming SlideShare
Loading in...5
×

Shapeshifting: Adaptive and Future Friendly Web Design

3,522

Published on

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.

Transcript of "Shapeshifting: Adaptive and Future Friendly Web Design"

  1. 1. Shapeshifting Adaptive & Future Friendly Web Design Christopher Cochran @TweetsfromChrisSunday, October 21, 12
  2. 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 SurfaceSunday, October 21, 12
  3. 3. user input methods • Mouse & keyboard • Touch • Gesture • Pen •?Sunday, October 21, 12
  4. 4. Sunday, October 21, 12 ? The Web Is Not A Fixed Medium And full of unknown
  5. 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 Centers Internet & American Life Project “Cell Internet Use 2012”Sunday, October 21, 12
  6. 6. Cell phone owners do most of their online 17% browsing on their phone, rather than a computer or other device Source: Pew Research Centers Internet & American Life Project “Cell Internet Use 2012”Sunday, October 21, 12
  7. 7. 72% Consumers Want Mobile-Friendly Sites Yet.... Source: Google Mobile Ads MarketingSunday, October 21, 12
  8. 8. 96% have visited a site that doesn’t work well Source: Google Mobile Ads MarketingSunday, October 21, 12
  9. 9. ? So that’s NOW But What About The FUTURESunday, October 21, 12
  10. 10. ? No Clue. Not Psychic, Just A PenguinSunday, October 21, 12
  11. 11. But we can prepare for the future, with technology we have now.Sunday, October 21, 12
  12. 12. And a Change of thinking.Sunday, October 21, 12
  13. 13. Content FirstSunday, October 21, 12
  14. 14. LOGO AD AD AD AD AD CONTENT ADSunday, October 21, 12
  15. 15. LOGO AD AD AD AD NOT CONTENT FIRST AD CONTENT ADSunday, October 21, 12
  16. 16. Adaptive PROGRESSIVE Responsive Feature ENHANCEMENT DETECTIONSunday, October 21, 12
  17. 17. START with the LEAST Common Denominator. ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHTSunday, October 21, 12
  18. 18. Mobile FirstSunday, October 21, 12
  19. 19. Flow With the Cascade It’s a beautiful thingSunday, October 21, 12
  20. 20. Be Fluid HEADER 100% CONTENT SIDEBAR 67.1875% 31.1875% 1.635%Sunday, October 21, 12
  21. 21. A Pixel IS NOT A PIXELSunday, October 21, 12
  22. 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
  23. 23. Feature Detection ModernizrSunday, October 21, 12
  24. 24. Detect Touch Touch interaction is different than mouse and keyboard. Input size can vary.Sunday, October 21, 12
  25. 25. Interaction Area Reading Area OK Best Better Better Best OKSunday, October 21, 12
  26. 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 mmSunday, October 21, 12
  27. 27. HTML5 INput tel url email number password autocapitalize="off"Sunday, October 21, 12
  28. 28. wp_is_mobile()Sunday, October 21, 12
  29. 29. ADAPTIVE MEDIASunday, October 21, 12
  30. 30. Icon FontsSunday, October 21, 12
  31. 31. TOOLS of the TRADESunday, October 21, 12
  32. 32. People Ethan Marcotte (@RWD) http://ethanmarcotte.com/ Resources 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/ Links http://www.webplatform.org/ http://www.html5rocks.com/en/ http://www.alistapart.com/ http://bradfrost.github.com/this-is-responsive/index.html http://movethewebforward.org/ https://developer.apple.com/library/safari/navigation/index.html https://developer.mozilla.org/en-US/docs http://msdn.microsoft.com/library/ie/ 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
  1. A particular slide catching your eye?

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

×