Mobile First Responsive Web Design with Bootstrap 3

Transcript

1. <anglebrackets/> Mobile First Responsive Web Design with Bootstrap 3 Shawn Wildermuth Microsoft MVP, Author, and Speaker Wilder Minds, LLC @shawnwildermuth
2. * Not accurate, but I never let a lie get in the way of a good story.
4. 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. 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
7. * Source: Jason Brigsby - http://shawnw.me/11vMlhG Comparison of Mobile and Desktop Views
8. 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
9. Source: Brad Frost - http://shawnw.me/13nHtOu
10. 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. 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. 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.
13. Demo Mobile First CSS
14. 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. 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
16. Demo Bootstrap 3
17. 17 http://www.anglebrackets.org Images  <img />  src isn’t your friend  No perfect solution  CSS Background helps
18. Demo Responsive Images
19. 19 http://www.anglebrackets.org Future?  <picture />  Responsive Images Group has a Proposal <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt="" lazyload> <p>Accessible text</p> </picture> <picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt="" lazyload> <p>Accessible text</p> </picture>
20. 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. 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
22. Questions? Thank you! Don’t forget to enter your evaluation of this session using EventBoard!