...a match made in harmony.
An exploration of Responsive Web Design.
Psst... that's next year...
You know what device you'll be unwrapping tomorrow.
...but what about two birthdays from now?
We can start by utilizing Responsive Web Design
Fluid layouts, flexible images, and media queries.
- Ethan Marcotte
aka "touch"
aka Responsive Last
aka degraded, shoe-horned, short-sighted, crappy
aka Progressively Enhanced, Future-friendly, awesome
Page by Page
Component by Component
I looked at our analytics and saw something frightening...
I used the "Responsive Retrofitting" approach to make the DCJS website mobile friendly.
Now, we're building all of our new apps and sites using a "Mobile First" "Responsive Web Design" approach.
It takes a lot of time
It's a moving target
It's fundamentally different
What makes the web great?
Isn't the web just a series of components?
All you need to know is HTML & CSS
Fully documented components
In-depth wikis
B
Mobile First
Semantic Markup
Library of JavaScript Plugins
Licensed without limitations, use, copy, modify, etc
All code needs testing
If you find a bug:
You can easily report it using GitHub Issues
..it depends.
Fully functional in all major browsers
Chrome, Firefox, Opera, Safari
iPhone, Android, and Windows Phones
You still serve them the same content.
IE6 & IE7 see your mobile-first styles
Please consider dropping support for IE6 now.
"My sites MUST look identical across all browsers and fully support IE6 AND IE7!"
I've got two things to say about that:
IE 6 = 0.15%
Source: StatCounterIE 7 = 0.28%
Source: StatCounter“Never put off tomorrow- Thomas Jefferson
what you can do today”
Browser Usage 2009-2014
Source: StatCounterMobile Usage 2009-2013
Source: StatCounterFrameworks aim to help you start out on the right path
Don't reinvent the wheel again
Responsive Web Design (Article that started it all)
Beginners Guide to Responsive Web Design
Responsive Web Design Techniques, Tools and Design Strategies
View this presentation online @
bit.ly/excelsiorp