Skip to main content
Responsive Web Design

    Quick Start Guide
Serge Hufkens
UX designer
“Big things…
                               have small beginnings”


© Prometheus, Ridley Scott
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




                            ADAPTIVE


                             THIS IS
                           RESPONSIVE




Hat tip to Aaron Gustafson & Brad Frost
“Why?”



© 2001: A Space Odyssey, Stanley Kubrick & Arthur C. Clarke
© 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
3 basic ingredients




© Eén, Dagelijkse kost
•  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
3 advanced
ingredients



  © Culy.nl, Sergio Herman
•  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:                          Cons
•  most thorough method        •  takes the longest
•  no page element left        •  it’s static!
   unexplored
                               •  with a slow-decision
•  may be the best
   solution for retrofitting      group, prepare for a
   because it provides the        long process
   most detail
Wireframes?
responsive prototypes




Pros:                         Cons
•  gets specific about        •  requires someone on
   repositioning and             the team have front-end
   content without               skills
   promising every detail     •  may not prevent the
•  one asset per template        need for more detailed
   instead of three or four      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




Atmosphere     Layout
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?



                         1 MB


                                                        HTML
                                                flash




                                                                     other
                                                               CSS
                      images       javascript



                             82%

Source: http://httparchive.org/
Issue #2
  How many requests requires the average website?



                               85
    Cable modem                        Cell network

     0.4 sec                           4.2 sec
                                     10 x slower
Source: Guy Podjarny & HTTP Achive
So optimize!
By doing following
•  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, …
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…