Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design - overview

Responsive Web Design - overview

An over of responsive design - internal talk

dragongraphics

April 30, 2012
Tweet

More Decks by dragongraphics

Other Decks in Design

Transcript

  1. Responsive Web Design
    A brief overview
    Monday, 30 April 12
    Introduce myself
    - Creative technologist - here to help bridge any gaps between design and
    development...
    - we keep on top of front end trends
    Introduce the talk
    - What is RWD
    - some examples
    - The challenges

    View full-size slide

  2. The control which designers know in
    the print medium, and often desire in
    the web medium, is simply a function of
    the limitation of the printed page. We
    should embrace the fact that the web
    doesn’t have the same constraints, and
    design for this flexibility.
    John Allsopp
    A Dao of Web Design
    http://www.alistapart.com/articles/dao/
    Monday, 30 April 12
    What is responsive design?
    Going way back to April 2000
    - John Allsopp published a great article called ‘A Dao of web design’
    - about the web as a medium compared to print + challenges it faced as an emerging
    medium at the time.
    - this quote is from that and comes well before responsive design was conceived as
    an idea.
    Interesting read - eery how prophetic it has turned out to be when considering the
    challenges the web is currently facing.

    View full-size slide

  3. Monday, 30 April 12
    Flexibility was being talked about in 2000
    - but we’ve really been designing inflexibly since then really
    - 800x600 -> 1024x768
    Designers have simply been adapting by
    - increasing the canvas of your chosen design tool and carry on as before
    - Not very futureproof
    When designs hit development, sites were usually static fixed widths
    - a small number of sites used fluid layouts, stretching to full width

    View full-size slide

  4. Monday, 30 April 12
    With the evolution of new devices... forced to think about flexibility more
    - makes it hard to know what resolution you are actually designing for
    New devices are now released regularly
    ...expand
    Older devices being retro fitted with internet capabilities - like TV’s.

    View full-size slide

  5. http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/
    1070 respondents
    50.4% maximise their
    browser window
    Split 65% on Windows,
    20% on Mac
    POLL CONDUCTED APRIL 2007
    RESPONSIVE DESIGN
    Monday, 30 April 12
    It’s not just devices that are changing though.
    - Just because someone has a large monitor, doesn’t mean they’ll choose to use it all
    Poll - April 2007 online
    - showed that out of over 1000 responses, just 65% of Windows users maximised their
    browser window.
    - only 20% of Mac users
    expand...
    It’s harder than ever to predict how users will actually be viewing your finished site - the
    main thing to remember as designers...

    View full-size slide

  6. Monday, 30 April 12
    ...you can’t assume anything about the device or platform users will be viewing your site
    from.
    Or as a politician once put it much better:

    View full-size slide

  7. There are known knowns; these are the
    things we know we know.
    There are known unknowns; these are
    the things that we know we don't know.
    But there are also unknown unknowns.
    These are the things we don't know we
    don't know.
    Donald Rumsfeld
    Monday, 30 April 12
    I actually think he was thinking about RWD when he said this
    But, there is no such thing as a desktop site anymore
    - any device can potentially view your website at any resolution....

    View full-size slide

  8. Monday, 30 April 12
    ...and it’s these changes and unknowns that caused people
    to start developing the idea of ‘responsive design’.
    As mentioned earlier, fluid grids had been used by some websites previously
    - but not particularly successfully, and fluid never become widely adapted
    Responsive is the evolution of fluid grids into something that’s much more flexible.
    != proportional sizing, more a new way of thinking about how you design...

    View full-size slide

  9. Monday, 30 April 12
    fluid grids = reliant robin
    then Responsive design = Batmobile = much better
    So when designing, where should you start with RWD?

    View full-size slide

  10. Mark Boulton
    A Richer Canvas
    http://www.markboulton.co.uk/journal/comments/a-richer-canvas
    We need to shed the notion that we
    create layouts from a canvas in. We
    need to flip it on its head and create
    layouts from the content out.
    Monday, 30 April 12
    Content - most important part of any site, no matter what the resolution or device.
    quote...
    Strip it all back and think about what’s important to the user, irrespective of device.
    - read the content - share the content - to engage with the content?
    Myth that mobile users don’t need ‘all the information’
    - just needs to be presented in a usable way.

    View full-size slide

  11. Monday, 30 April 12
    Going back to the number of devices
    - click
    - don’t think too much about the devices you want to design for at the start
    One of the key aspects of RWD is the flow of the design and how it scales
    - this leads to breakpoints in the design.
    But let the design dictate the breakpoints, rather than device resolution dictating break
    points...

    View full-size slide

  12. Monday, 30 April 12
    ...mainly because if a new device comes out tomorrow, your design should work on it
    not about making a website that works perfectly at 2 or 3 resolutions, and then just OK in
    between.
    The design should work on any device at any resolution to be truly responsive.

    View full-size slide

  13. Navigation
    MAIN CHALLENGES
    RESPONSIVE DESIGN
    Monday, 30 April 12
    So taking some of the main challenges when designing RWD
    - Nav
    Responding width navigations can be hard...

    View full-size slide

  14. NAVIGATION PATTERNS
    Monday, 30 April 12
    ...there’s a good article on how designers are dealing with responsive menus
    pro’s and cons of each - here’s a few...

    View full-size slide

  15. SELECT LIST
    NAVIGATION PATTERNS
    Monday, 30 April 12
    select list

    View full-size slide

  16. TOGGLE
    NAVIGATION PATTERNS
    Monday, 30 April 12
    toggle menu (accordion style)

    View full-size slide

  17. LEFT SIDE
    NAVIGATION PATTERNS
    Monday, 30 April 12
    Flyout from the left side - popularised by Facebook.

    View full-size slide

  18. Navigation
    Images
    MAIN CHALLENGES
    RESPONSIVE DESIGN
    Monday, 30 April 12
    Images
    Not just how they scale
    - think about how they serve different purposes on smaller resolutions compared larger
    resolutions. (Youtube video to just a thumbnail)

    View full-size slide

  19. DCONSTRUCT 2012
    RESPONSIVE SITES
    Monday, 30 April 12
    So let’s go through some examples:
    100% fluid vs snappy
    dConstruct

    View full-size slide

  20. SMASHING MAGAZINE
    RESPONSIVE SITES
    Monday, 30 April 12
    Examples go here

    View full-size slide

  21. BOSTON GLOBE
    RESPONSIVE SITES
    Monday, 30 April 12
    Examples go here

    View full-size slide

  22. CSS TRICKS
    RESPONSIVE SITES
    Monday, 30 April 12
    Examples go here

    View full-size slide

  23. LYCOS
    RESPONSIVE SITES
    Monday, 30 April 12
    Examples go here

    View full-size slide

  24. INFORMATION ARCHITECTS
    RESPONSIVE SITES
    Monday, 30 April 12
    Examples go here

    View full-size slide

  25. RESPONSIVE EMAILS
    Monday, 30 April 12

    View full-size slide

  26. RESPONSIVE EMAILS
    Monday, 30 April 12

    View full-size slide

  27. BEST PRACTICE
    590px - best practice for desktop
    320px - best practice for email
    iPhone4s and iPhone4 require designs to be worked up
    at 640x960, rather than 320x480
    RESPONSIVE EMAILS
    Monday, 30 April 12

    View full-size slide

  28. You can hide things on the mobile version (but not the
    other way around)
    Use 14pt as a minimum font size on mobile
    Keep CTAs big enough for a finger tap (44px of ‘space’)
    Think about how you can keep your logo / key imagery
    crisp (crops, clever slices etc)
    TIPS
    RESPONSIVE EMAILS
    Monday, 30 April 12
    You can alter the font size from desktop to mobile (and colour etc)

    View full-size slide

  29. T-MOBILE
    RESPONSIVE EMAILS
    Monday, 30 April 12

    View full-size slide

  30. T-MOBILE
    RESPONSIVE EMAILS
    Monday, 30 April 12
    h"p://t-­‐mobilenews.co.uk/poll
    h"p://t-­‐mobilenews.co.uk/paymiphone-­‐eurobooster

    View full-size slide

  31. SAINSBURY’S
    RESPONSIVE EMAILS
    Monday, 30 April 12

    View full-size slide

  32. Navigation
    Images
    How to design ‘responsively’
    MAIN CHALLENGES
    RESPONSIVE DESIGN
    Monday, 30 April 12
    BIGGEST CHALLENGE
    - finding the best way to design responsively
    How do you show how something scales in flat files?
    - not feasible for 5 designs

    View full-size slide

  33. Monday, 30 April 12
    It will be slightly different for every designer, and how they prefer to work.
    Best RWD designs will come from those designers most willing to ‘let go’ of their designs
    - trust and collaborate the devs that are tasked with bringing them to life.
    - could learn some front end yourself (controversial) - know what’s possible
    Letting go is implicitly difficult
    - people (rightly) feel protective of their work

    View full-size slide

  34. Design for components and elements
    DESIGNING FOR RESPONSIVE
    RESPONSIVE DESIGN
    Monday, 30 April 12
    Couple of things that might help when designing RWD
    Design for components and elements on the page

    View full-size slide

  35. Design for components and elements
    Style guides
    DESIGNING FOR RESPONSIVE
    RESPONSIVE DESIGN
    Monday, 30 April 12
    Style guides
    Consistent font sizes, line heights, margins, colours etc

    View full-size slide

  36. Design for components and elements
    Style guides
    Flexible Grids
    DESIGNING FOR RESPONSIVE
    RESPONSIVE DESIGN
    Monday, 30 April 12
    Grids
    - Help think about flexibility and scale
    - lots of grid systems out there

    View full-size slide

  37. WHY BOTHER?
    RESPONSIVE DESIGN
    Monday, 30 April 12
    Why Bother?
    Why am I going on about RWD so much anyway?...

    View full-size slide

  38. If you don’t embrace the inherent
    fluidity of the web, you’re not a web
    designer, you’re something else.
    Web design is responsive design.
    Responsive Web Design is web design,
    done right.
    Andy Clarke
    http://the-pastry-box-project.net/andy-clarke/2012-january-3/
    Monday, 30 April 12
    I think Andy Clarke summed it up when he said...‘quote’
    If you don’t embrace responsive web design, the web will start to leave you behind
    - evolve to shift in tech

    View full-size slide

  39. Web Apps
    ...AND IT’S GOOD BECAUSE
    RESPONSIVE DESIGN
    Monday, 30 April 12
    ...and it has some major advantages over static widths

    Web apps better than native
    - Cross platform

    View full-size slide

  40. Web Apps
    More stylable UI than native
    ...AND IT’S GOOD BECAUSE
    RESPONSIVE DESIGN
    Monday, 30 April 12
    More stylable UI
    - native can be constrained, the web isn’t apart from your imagination

    View full-size slide

  41. Web Apps
    More stylable UI than native
    Easier sell
    ...AND IT’S GOOD BECAUSE
    RESPONSIVE DESIGN
    Monday, 30 April 12
    Easier sell
    - make 1 site rather than multiple

    View full-size slide

  42. WHY BOTHER?
    RESPONSIVE DESIGN
    Monday, 30 April 12
    ...and it’s an exciting, fast changing area
    You could end up pioneering something that hasn’t been done
    ...like the guy in the red trousers at this party
    Lots of things haven’t been ironed out
    - which makes it challenging, but fun

    View full-size slide