Mobile First Responsive Web Design with Bootstrap 3

Transcript

1. 
   Mobile First Responsive Web Design with
   Bootstrap 3
   Shawn Wildermuth
   Microsoft MVP, Author, and Speaker
   Wilder Minds, LLC
   @shawnwildermuth
   

   View Slide

2. * Not accurate, but I never let a lie get in the way of a good story.
   

   View Slide

3. View Slide

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…
   

   View Slide

5. View Slide

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
   

   View Slide

7. * Source: Jason Brigsby - http://shawnw.me/11vMlhG
   Comparison of Mobile and Desktop Views
   

   View Slide

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
   

   View Slide

9. Source: Brad Frost - http://shawnw.me/13nHtOu
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

13. Demo
    Mobile First CSS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. Demo
    Bootstrap 3
    

    View Slide

17. 17 http://www.anglebrackets.org
    Images
    
    
    src isn’t your friend
    
    No perfect solution
    
    CSS Background helps
    

    View Slide

18. Demo
    Responsive Images
    

    View Slide

19. 19 http://www.anglebrackets.org
    Future?
    
    
    Responsive Images Group has a Proposal
    
    
    
    
    
    Accessible text
    
    
    srcset="large-1.jpg 1x, large-2.jpg 2x">
    srcset="med-1.jpg 1x, med-2.jpg 2x">
    
    
    Accessible text
    
    

    View Slide

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…
    

    View Slide

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
    

    View Slide

22. Questions?
    Thank you!
    Don’t forget to enter your evaluation
    of this session using EventBoard!
    

    View Slide