Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile-First Responsive Design

Mobile-First Responsive Design

My dotnetconf 2013 talk

Shawn Wildermuth

April 25, 2013
Tweet

More Decks by Shawn Wildermuth

Other Decks in Design

Transcript

  1. Shawn Wildermuth
    One of the Minds, Wilder Minds LLC
    Microsoft MVP
    @shawnwildermuth
    http://wilderminds.com
    Mobile-First Responsive Design

    View full-size slide

  2. Mobile-First Responsive Design © 2013 Wilder Minds LLC

    View full-size slide

  3. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Responsive Web Design (RWD)
     What is it?
    – Adapting Site to Mobile Devices
    – Approach usually has been to gracefully degrade
    – For Example…

    View full-size slide

  4. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Responsive Web Design (RWD)
     Problems…
    – Subtractive solution means too many resources
    – All JS code is running
     On Platform that is least suited to handle it
    – Images are loaded but hidden

    View full-size slide

  5. * Source: Jason Brigsby - http://shawnw.me/11vMlhG
    Comparison of Mobile and Desktop Views

    View full-size slide

  6. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Mobile-First RWD
     Philosophy created by Luke Wroblewski*
    – Focuses on Progressive Enhancement
     Where RWD is typically Graceful Degradation
    – Scales Up…not down
    * http://www.lukew.com

    View full-size slide

  7. Source: Brad Frost - http://shawnw.me/13nHtOu

    View full-size slide

  8. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Simply Put…
     Don't include anything that isn't needed
    – Add StyleSheets, Images and Script as scaling up
    – Measure, measure, measure…
    – Mobile is important…or perhaps critical to success

    View full-size slide

  9. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    But Be Practical…
     Mobile-First Important in Most Cases
    – But not all…
     Scale the effort to the size of the project
     E.g. Joe's Pizza doesn't matter as much as Large Enterprise

    View full-size slide

  10. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    How It Works
     Several Techniques At Work
    – CSS Design Media Queries to be additive
     Min-size instead of ranges
    – Load JavaScript based on Device
     E.g. May decide to skip jQuery on Devices
    – Support different image sizes
     Lots of different techniques…no one is perfect
    – CSS Background
    – data-fullsrc
    – Etc.

    View full-size slide

  11. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Demo
    Mobile First CSS

    View full-size slide

  12. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Solutions for CSS
     AdaptJS
    – Injects CSS Based on Media Queries
     Last Maintained: Jan 2013
     http://adapt.960.gs/
     RespondJS
    – Adds Polyfill Support for MediaQueries for IE<8
     Last Maintained Apr 2013
     https://github.com/scottjehl/Respond

    View full-size slide

  13. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Solution for JavaScript/CSS
     EnhanceJS
    – Injects CSS/JS Based on Media Queries
     Last maintained: Aug 2010
     https://code.google.com/p/enhancejs
     Backend still a solution
    – But limited dynamic support

    View full-size slide

  14. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Solution for Images
     ResponseJS
    – Defines width sets and uses markup to define images
     Last Maintained Apr 2013
     http://responsejs.com

    View full-size slide

  15. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Takeaways…
     This demo and slides will be available:
    – http://wildermuth.com
     Important Links
    – Luke Wroblewski's Site
     http://www.lukew.com
    – Brad Frost's Mobile First:
     http://shawnw.me/13nHtOu
    – Jason Brigsby Article:
     http://shawnw.me/11vMlhG
     My Company
    – http://wilderminds.com

    View full-size slide

  16. Mobile-First Responsive Design © 2013 Wilder Minds LLC
    Questions?
    Meet me on http://bit.ly/dotnetConf-live-chat after the talk

    View full-size slide