4 http://www.anglebrackets.org Responsive Web Design (RWD) What is it? Adapting Site to Mobile Devices Approach usually has been to gracefully degrade For Example…
6 http://www.anglebrackets.org 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
8 http://www.anglebrackets.org 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
10 http://www.anglebrackets.org 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 http://www.anglebrackets.org 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 http://www.anglebrackets.org 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.
14 http://www.anglebrackets.org Bootstrap 3 Mobile First Re-written from the ground up Adheres to performing better in Mobile Scenarios Responsiveness turned on by default Big changes will break most 2.x sites
15 http://www.anglebrackets.org Bootstrap 3 Mobile First Re-written from the ground up Adheres to performing better in Mobile Scenarios Responsiveness turned on by default Big changes will break most 2.x sites
20 http://www.anglebrackets.org Loading Resources on Demand Even Loading Resources Can Slow You Down Should You Load all JavaScript or CSS? Maybe not… You can do it on demand… Can over-complicate the code Please use sparingly…
21 http://www.anglebrackets.org 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