monkeytalk fall 2012 - responsive web design

Responsive Web Design

Quick Start Guide

Serge Hufkens UX designer

© Prometheus, Ridley Scott

“Big things… have small beginnings”

Definition

Responsive Web Design (RWD) is web design in which a site is crafted to provide an optimal user experience across all devices (everything with a screen) hat tip to wikipedia

Let there be no mistake Adaptive vs Responsive web design

Hat tip to Aaron Gustafson & Brad Frost

ADAPTIVE

THIS IS RESPONSIVE

© 2001: A Space Odyssey, Stanley Kubrick & Arthur C. Clarke

“Why?”

© NFL Network

Conclusion

•  There’s a growing mainstream

expectation that you can simply get

all your content from any device.

•  We expect content to flow seamlessly,

follow us throughout the day.

Let’s tackle that with some philosophy!

© Enter the Dragon, Bruce Lee, Robert Clouse

and there’s even more…

Wroblewski’s Theorem

“Anything that can be connected to the internet, will be.”

Why go responsive?

“We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.” - Ben Callahan

http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive

fact

RWD is hard

© Frank Zappa

Open your mind

•  Everything has changed and continues to do so, fast

•  Accept it and move on •  Loose the myths •  Get some new skills •  Make mistakes •  Time will tell •  Be proud to be a part of it

BECOMING RESPONSIVE

© Eén, Dagelijkse kost

3 basic ingredients

3 basic ingredients •  A flexible grid – The design has fluid layout elements that

change on browser size

•  Conditional images & other media – The design uses one or more techniques to

scale images and media so that the design performs well across devices

•  Media queries – Conditional code that changes items on a

page based on device detection or browser width

Viewport, media queries and breakpoints

© Andy Clarke

© Culy.nl, Sergio Herman

3 advanced ingredients

3 advanced ingredients •  Advanced elements – A basic fluid grid is the priority; but to be

fully responsive we must often cover slideshows, tables, tabs, multi-column type, custom widgets, forms, and more.

•  Touch input – Touch input is a critical development

component as we move away from a mouse-first model of human-computer interaction

•  RESS and server-side conditionals – Heavy lifting for user agent detection and

conditional media deployment is done by the server, not the device.

THINGS TO GET IT ON

Wireframes? full wireframes for each breakpoint

Pros: •  most thorough method •  no page element left

unexplored •  may be the best

solution for retrofitting because it provides the most detail

Cons •  takes the longest •  it’s static! •  with a slow-decision

group, prepare for a long process

Wireframes? responsive prototypes

Pros: •  gets specific about

repositioning and content without promising every detail

•  one asset per template instead of three or four

Cons •  requires someone on

the team have front-end skills

•  may not prevent the need for more detailed wireframes

Flexible grids grids, grids everywhere…

•  Play around with the many grid systems online to get a good feel what they do…

•  Examples…

http://lessframework.com/

http://foundation.zurb.com/

http://goldengridsystem.com/

http://goldengridsystem.com/

Conditional images Take a look at this to get started

http://adaptive-images.com/

About design Split it

Layout Atmosphere

Design your atmosphere Styletiles, (html) style guides, …

http://styletil.es/ http://www.bbc.co.uk/guidelines/gel/

Responsive design patterns Lot’s of examples available

•  provide effective examples at the beginning of a project so that you’re not rethinking the wheel.

http://bradfrost.github.com/this-is-responsive/

http://www.lukew.com/ff/entry.asp?1514

http://jasonweaver.name/lab/offcanvas/

Responsive typography Don’t neglect it, it’s your content!

•  “Setting web type in Photoshop is a waste of time” — Andy Clarke

•  Test on real devices (don’t scale your browser)

•  Be careful with line lengths (keep it readable)

http://informationarchitects.net/blog/responsive-typography-the-basics/

http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

http://typecast.com/

Performance is also by design Issues for RWD

•  Over downloading – Download & hide, download & shrink, excess

DOM

•  Poor networks – High latency, variable band width, packet

loss

Issue #1 The average weight of a web page today?

Source: http://httparchive.org/

images javascript

flash

HTM

L

CSS

other

1 MB

82%

Issue #2 How many requests requires the average website?

85

Source: Guy Podjarny & HTTP Achive

Cable modem

0.4 sec Cell network

4.2 sec

10 x slower

•  Reduce asset size – HTML/CSS compression, image compression,

try to avoid images, minification, avoid bulky frameworks

•  Reduce requests – Browser cache, concatenate JS & CSS,

localStorage, data:URI, conditional loading •  Speed-up page render – Avoid DOM reflows & repaints, defer loading of

javascript, lazy load javascript, touch beats on click, …

So optimize! By doing following

Something about our tools

“The framework for what a page is has changed considerably even in the past few years, though our applications for designing those frameworks are still stuck in the web of yore, and largely dictated by their use for print design.”

- Jason Santa Maria

© Brad Frost

Feel like reading?

Thanks! @sjesch

Credit where credit’s due The true heroes of this presentation…

Andy Clarke

Luke Wroblewski

Jeremy Keith

Josh Clark

Ethan Marcotte

Brad Frost

Jason Santa Maria

Dave Olsen & Doug Gapinski

Tim Kadlec

Everybody I forgot…