Developing for Responsive DesignFrederic WelterlinSenior Presentation Layer Architect

San Francisco

Agenda

• What is Responsive Design?– How did we get here? – Why should we care?

• Crafting a Responsive User Experience– The Flexible Grid– Flexible Media– Media Queries

• When is Responsive Design Warranted?– Yes! and… Not Really– Ford Motor Company Example– Airline Industry Example

• Conclusions– Some Thoughts– What is Responsive Design?– Thanks

How did we get here?What is Responsive Design?

“We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.”

Tim Berners-Lee original WWW proposal.(http://www.w3.org/History/1989/proposal.html)

“…balancing the needs of designers for a sophisticated set of presentation and interactive features against the desire to make the Web accessible to the largest possible number of browsers (and other client devices) and environments.” © 1998-2001 Web Standards Project(http://archive.webstandards.org/mission.html)

So the question is…

San Francisco MUNIFriday, June 8, 2012

The Players

RESPONSIVE DESIGN

“is a web development approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.”

- Kayla Knighthttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Why should we care?

Crafting a Responsive User Experience

The Birth of Responsive Design

Responsive Web DesignEthan Marcotte

The term “Responsive Design” was first introduced in Ethan’s A List Apart article:

http://www.alistapart.com/articles/responsive-web-design/

Subsequently, he wrote:

The Flexible Grid

The Flexible Grid

The Flexible Grid

Gridpackhttp://gridpak.com/

FRAMELESShttp://framelessgrid.com/

960 Grid Systemhttp://960.gs/

There are so many…..http://www.awwwards.com/grid-based-web-design-resources.html

Other Tools, like CSS Preprocessors (LESS, SASS, Stylus)

SASS (syntactically awesome style sheets)Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.http://sass-lang.com/

Extends CSS with dynamic behavior…

- Variables- Nesting- Mixins- Operations- Selector Inheritance- Etc

Examples “borrowed” directly from SASS web siteVariables Nesting$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { margin: $margin / 2; border-color: $blue; }

.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { margin: 8px; border-color: #3bbfce;}

table.foo { margin: 2em; td.bar { text-align: right; }}

table.foo { margin: 2em;}

table.foo td.bar { text-align: right;}

Flexible Media

img, embed, object, video {max-width:100%;

}

Media Queries

@media screen and (max-width: 480px) {.foo {

float: left;}.bar {

margin: 0;border: 4px solid #666;

}}

CSS3 Media Queries expands on the role of the traditional CSS2 “media” attribute with specific parameters that control how your styles are applied for various devices.

Media Queries

@media screen and (min-width: 320px) { insert CSS for SmartPhone portrait… }

@media screen and (min-width: 480px) { insert CSS for SmartPhone landscape… }

@media screen and (min-width: 768px) { insert CSS for iPad portrait… }

@media screen and (min-width: 1024px) { insert CSS for iPad landscape… }

@media screen and (min-width: 1200px) { insert CSS for desktop… }

(disclaimer: these measurements are simplified for illustrative purposes :-)

Media Queries

So… who is this guy??

Media Queries

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/James Mellers

When is Responsive Design Warranted?

When is Responsive Design Warranted?

• YES!– Content focused sites: information travels in one

direction, from source to user…»Newspapers»Magazines

• Not Really…–Transactional sites: complex applications that utilize

workflows and user input…»Banking Applications»Airline Ticketing

Yes!

The business advantages of using Responsive Design…• One code base (less maintenance, saves money)• Device agnostic• Improved SEO• Possibility of using “mobile first” approach

Ford - Support Site (http://support.ford.com/)

Not really…

The business disadvantages of using Responsive Design…• Does not address differing user needs between

device usage• Performance (un-needed markup is still being

sent)• Pixel perfect expectations are shattered• Need to support legacy (non HTML5/CSS3)

devices

Device: DesktopGoal: Research Trip to NCTask: Find/Review Flight

www.united.com

Dates, Options, Connections

Device: DesktopGoal: Research Trip to NCTask: Get Mileage Balance

www.united.com

Review Status Upgrade

Device: DesktopGoal: Research Trip to NCTask: Sign-Up for Credit Card?

www.united.com

Device: DesktopGoal: Research Trip to NCTask: Review Deals and

www.united.com

Vacation Packages

Device: SmartPhoneGoal: Travel to New York CityTask: Go to Mobile Site

mobile.united.com

Device: SmartPhoneGoal: Travel to New York CityTask: Get Flight Status

mobile.united.com

Device: SmartPhoneGoal: Travel to New York CityTask: Check In, get Mobile Boarding

mobile.united.com

Pass

Device: SmartPhoneGoal: Travel to New York CityTask: Review Itinerary

mobile.united.com

Yeah… but Fred, isn’t what you just showed an example of being “responsive?”

Conclusions

Some Thoughts…

• “Responsive design” is a marketing term, and should be used with caution.

• Razorfish tailors technology solutions around user experience and business needs (and not the other way around).

• Responsive design is still in its infancy. Future visionaries and architects will continue to iterate on the “one code base” concept. Responsive architecture?

RESPONSIVE DESIGN

is a web development approach that suggests that design and development should respond to the user’s business or task oriented needs, in conjunction with device usage.

- Fred Welterlin

Thank You

• Thanks and respect to the following individuals…

– James Walton and Michael Calfee (Razorfish, Austin, TX) – Ralph Brandi (Razorfish, New York, NY)

– Ethan Marcotte (author, “Responsive Design”)– Ray Velez/Chris Stetson (Razorfish executive sponsors of this presentation)