What your agency didn’t tell you about Responsive Design
Dan Lewis – The Judge Group - USA
Who am I?
My name is: Dan Lewis
I am from: Philadelphia, Pennsylvania - USA
I work for: The Judge Group, Inc.
As the: Leader of the Mobility Solutions Consulting Practice
For my job I: Eat, sleep, and breath mobility
I used to: Build intranets, web, and database stuff
So what is the “right” way to do responsive?One site for many different view, this sounds great
RWD By Definition
To deliver web content adaptive to devices based on their viewport size using the following techniques: CSS Media Queries Flexible Images Fluid Grids
Read More: http://www.alistapart.com/articles/responsive-web-design/
Some best practices
The first media query is NO media query
Progressive Enhancement over Graceful Degradation
Start small and get bigger (Mobile First)
Feature Detection over User Agent Sniffing
Responsive is part of your project’s DNA
There are some unrefined areas of the patternWow this all sounds too good to be true, what’s the catch
Unresolved issues
Flexible images (<picture> element)
Bandwidth management and detection (standards-based)
Server vs. Client responsive patterns
There are a couple of other areas to think about tooDoes responsive mean just shrinking a screen and elements?
Off Canvas Layouts
Great User Experience
Perfect for menus and complex navigation
The EMs have it!
Because a Pixel isn’t always a Pixel
Arbitrary Viewport sizes from vendors
Scale with ease
Read more: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Let’s look at some great examplesSo you would like to see who is doing this well?
RWD Examples
Grey Goose ( http://www.greygoose.com )
VisualDX ( http://www.visualdx.com )
Mighty River Power ( http://www.mightyriver.co.nz/ )
Thank You!
Dan LewisPractice Leader – Mobility SolutionsThe Judge Groupwww.judge.com
[email protected]@DanTheITManlinkedin.com/in/dantheitman