SlideShare uma empresa Scribd logo
1 de 32
Baixar para ler offline
Shapeshifting
                 Adaptive & Future Friendly Web Design

                             Christopher Cochran
                              @TweetsfromChris

Sunday, 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
                                                                 Surface



Sunday, 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 Center's 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 Center's Internet & American Life Project “Cell Internet Use 2012”




Sunday, October 21, 12
72%         Consumers Want
                         Mobile-Friendly Sites

                                                  Yet....

                                                 Source: Google Mobile Ads Marketing




Sunday, October 21, 12
96%
                         have visited a site that
                           doesn’t work well

                                                    Source: Google Mobile Ads Marketing




Sunday, October 21, 12
?
                         So that’s
                         NOW
                         But 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
LOGO          AD

                         AD   AD        AD



                         AD   CONTENT    AD




Sunday, October 21, 12
LOGO          AD

                         AD   AD        AD

       NOT CONTENT FIRST
                         AD   CONTENT    AD




Sunday, October 21, 12
Adaptive
    PROGRESSIVE           Responsive   Feature
    ENHANCEMENT                        DETECTION




Sunday, October 21, 12
START with the LEAST
                         Common Denominator.



              ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT




Sunday, October 21, 12
Mobile First




Sunday, October 21, 12
Flow With the Cascade
                             It’s a beautiful thing




Sunday, October 21, 12
Be Fluid
                                     HEADER
                                      100%



                         CONTENT                      SIDEBAR



                          67.1875%                    31.1875%
                                             1.635%




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
Interaction Area   Reading Area
                          OK           Best



                         Better        Better

                         Best           OK




Sunday, 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 mm



Sunday, October 21, 12
HTML5 INput

     tel
     url
     email
     number
     password
     autocapitalize="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
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

Mais conteúdo relacionado

Destaque

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 

Destaque (20)

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
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
  • 4. Sunday, October 21, 12 ? The Web Is Not A Fixed Medium And full of unknown
  • 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
  • 14. LOGO AD AD AD AD AD CONTENT AD Sunday, October 21, 12
  • 15. LOGO AD AD AD AD NOT CONTENT FIRST AD CONTENT AD Sunday, October 21, 12
  • 16. Adaptive PROGRESSIVE Responsive Feature ENHANCEMENT DETECTION Sunday, October 21, 12
  • 17. START with the LEAST Common Denominator. ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT Sunday, October 21, 12
  • 19. Flow With the Cascade It’s a beautiful thing Sunday, October 21, 12
  • 20. Be Fluid HEADER 100% CONTENT SIDEBAR 67.1875% 31.1875% 1.635% Sunday, October 21, 12
  • 21. A Pixel IS NOT A PIXEL 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
  • 23. Feature Detection Modernizr 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
  • 29. ADAPTIVE MEDIA Sunday, October 21, 12
  • 31. TOOLS of the TRADE Sunday, October 21, 12
  • 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