Mobile First Responsive Design

Slide 1

Slide 1 text

Shawn Wildermuth One of the Minds, Wilder Minds LLC Microsoft MVP @shawnwildermuth http://wilderminds.com Mobile-First Responsive Design

Slide 2

Slide 2 text

* Not accurate, but good enough to make my point ;)

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Mobile-First Responsive Design © 2013 Wilder Minds LLC 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

Mobile-First Responsive Design © 2013 Wilder Minds LLC 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

Mobile-First Responsive Design © 2013 Wilder Minds LLC 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

Mobile-First Responsive Design © 2013 Wilder Minds LLC 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

Mobile-First Responsive Design © 2013 Wilder Minds LLC 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

Slide 14

Slide 14 text

Mobile-First Responsive Design © 2013 Wilder Minds LLC Solutions for CSS  AdaptJS – Injects CSS Based on Media Queries  Last Maintained: Jan 2013  http://adapt.960.gs/  RespondJS – Adds Polyfill Support for MediaQueries for IE<8  Last Maintained Apr 2013  https://github.com/scottjehl/Respond  Bootstrap 3.0?

Slide 15

Slide 15 text

Mobile-First Responsive Design © 2013 Wilder Minds LLC Solution for JavaScript/CSS  EnhanceJS – Injects CSS/JS Based on Media Queries  Last maintained: Aug 2010  https://code.google.com/p/enhancejs  Backend still a solution – But limited dynamic support

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Mobile-First Responsive Design © 2013 Wilder Minds LLC 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