$30 off During Our Annual Pro Sale. View Details »

Mobile First Responsive Web Design with Bootstrap 3

Mobile First Responsive Web Design with Bootstrap 3

Shawn Wildermuth

October 30, 2013
Tweet

More Decks by Shawn Wildermuth

Other Decks in Programming

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