Mobile-First Responsive Design

My dotnetconf 2013 talk

Transcript

1. Shawn Wildermuth One of the Minds, Wilder Minds LLC Microsoft MVP @shawnwildermuth http://wilderminds.com Mobile-First Responsive Design
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…
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