• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Shapeshifting: Adaptive and Future Friendly Web Design
 

Shapeshifting: Adaptive and Future Friendly Web Design

on

  • 3,930 views

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, ...

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.

Statistics

Views

Total Views
3,930
Views on SlideShare
3,841
Embed Views
89

Actions

Likes
4
Downloads
18
Comments
0

4 Embeds 89

http://www.scoop.it 51
https://twitter.com 20
http://inventus.lognllc.com 17
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Shapeshifting: Adaptive and Future Friendly Web Design Shapeshifting: Adaptive and Future Friendly Web Design Presentation Transcript

    • Shapeshifting Adaptive & Future Friendly Web Design Christopher Cochran @TweetsfromChrisSunday, October 21, 12
    • ? 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
    • user input methods • Mouse & keyboard • Touch • Gesture • Pen •?Sunday, October 21, 12
    • Sunday, October 21, 12 ? The Web Is Not A Fixed Medium And full of unknown
    • 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
    • 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
    • 72% Consumers Want Mobile-Friendly Sites Yet.... Source: Google Mobile Ads MarketingSunday, October 21, 12
    • 96% have visited a site that doesn’t work well Source: Google Mobile Ads MarketingSunday, October 21, 12
    • ? So that’s NOW But What About The FUTURESunday, October 21, 12
    • ? No Clue. Not Psychic, Just A PenguinSunday, 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 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 ADSunday, October 21, 12
    • Adaptive PROGRESSIVE Responsive Feature ENHANCEMENT DETECTIONSunday, October 21, 12
    • START with the LEAST Common Denominator. ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHTSunday, October 21, 12
    • Mobile FirstSunday, October 21, 12
    • Flow With the Cascade It’s a beautiful thingSunday, October 21, 12
    • Be Fluid HEADER 100% CONTENT SIDEBAR 67.1875% 31.1875% 1.635%Sunday, October 21, 12
    • A Pixel IS NOT A PIXELSunday, 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 ModernizrSunday, October 21, 12
    • Detect Touch Touch interaction is different than mouse and keyboard. Input size can vary.Sunday, October 21, 12
    • Interaction Area Reading Area OK Best Better Better Best OKSunday, October 21, 12
    • 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
    • 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/ 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