Mobile First Responsive Web Design with Bootstrap 3

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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…

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

Demo Mobile First CSS

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Demo Bootstrap 3

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Demo Responsive Images

Slide 19

Slide 19 text

19 http://www.anglebrackets.org Future?   Responsive Images Group has a Proposal

Accessible text

Slide 20

Slide 20 text

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…

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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