Mobile First Responsive Web Design with Bootstrap 3

Mobile First Responsive Web Design with Bootstrap 3

41ea68e40ed39c5392cbce8ab0a7d720?s=128

Shawn Wildermuth

October 30, 2013
Tweet

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.
  3. None
  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…
  5. None
  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!