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
  2. 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…
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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.
  8. 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
  9. 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
  10. 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
  11. 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
  12. Mobile-First Responsive Design © 2013 Wilder Minds LLC Questions? Meet

    me on http://bit.ly/dotnetConf-live-chat after the talk