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

dlewis@judge.com@DanTheITManlinkedin.com/in/dantheitman