Pro Yearly is on sale from $80 to $50! »

Mobile-First Responsive Design

Mobile-First Responsive Design

My dotnetconf 2013 talk

41ea68e40ed39c5392cbce8ab0a7d720?s=128

Shawn Wildermuth

April 25, 2013
Tweet

Transcript

  1. Shawn Wildermuth One of the Minds, Wilder Minds LLC Microsoft

    MVP @shawnwildermuth http://wilderminds.com Mobile-First Responsive Design
  2. None
  3. Mobile-First Responsive Design © 2013 Wilder Minds LLC

  4. 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…
  5. None
  6. 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
  7. * Source: Jason Brigsby - http://shawnw.me/11vMlhG Comparison of Mobile and

    Desktop Views
  8. 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
  9. Source: Brad Frost - http://shawnw.me/13nHtOu

  10. 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
  11. 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
  12. 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.
  13. Mobile-First Responsive Design © 2013 Wilder Minds LLC Demo Mobile

    First CSS
  14. 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
  15. 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
  16. 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
  17. 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
  18. Mobile-First Responsive Design © 2013 Wilder Minds LLC Questions? Meet

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