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

Fire On the Bay SF: Intro to Responsive Web Design

tarajane
April 28, 2012

Fire On the Bay SF: Intro to Responsive Web Design

A presentation I gave to the Fire On the Bay SF group at Adobe on April 10th.

This is an introduction to responsive web design. The 5 W's. With example sites/resources to get started.

Video examples may/may not be working, so please visit any sample sites I list and resize your browser :)

tarajane

April 28, 2012
Tweet

More Decks by tarajane

Other Decks in Design

Transcript

  1. INTRO TO
    RESPONSIVE WEB DESIGN
    April 10, 2012
    Saturday, April 28, 12

    View full-size slide

  2. WHO AM I?
    • Software engineer at Adobe since 2006
    • Working in the XD group as an Experience Developer
    • Experience Developer? You say?
    • Design savvy developer. Implementer of pixel perfect user
    interfaces and interactions.
    Saturday, April 28, 12

    View full-size slide

  3. MY FOCUS
    Working with XD and the Web Platform group at Adobe to
    prototype experiences in the browser.
    http://blogs.adobe.com/webplatform/
    Saturday, April 28, 12

    View full-size slide

  4. Responsive Web Design.
    RWD.
    WHY? WHAT? WHO? WHERE?
    WHEN?
    Saturday, April 28, 12

    View full-size slide

  5. WHY RESPONSIVE WEB
    DESIGN?
    Saturday, April 28, 12

    View full-size slide

  6. How do we create a great
    experience which spans across
    multiple devices, different screen
    widths, different resolutions, etc?
    Saturday, April 28, 12

    View full-size slide

  7. MOBILE
    VS
    NATIVE
    Saturday, April 28, 12

    View full-size slide

  8. MOBILE
    Saturday, April 28, 12

    View full-size slide

  9. M.MYSITE.COM
    On a tablet? TABLET.MYSITE.COM
    New Retina iPad?
    New iPad: Retina, 2048-by-1536-pixel resolution at 264 pixels per inch (ppi)
    On mobile?
    Landscape
    orientation on a
    tablet? TABLETLANDSCAPE.MYSITE.COM
    RETINATABLET.MYSITE.COM
    Saturday, April 28, 12

    View full-size slide

  10. I’M TOO LAZY FOR THAT.
    Saturday, April 28, 12

    View full-size slide

  11. NATIVE
    Saturday, April 28, 12

    View full-size slide

  12. DESIGNING FOR NATIVE
    How does my app look on Windows Metro?
    How does it look on an iDevice?
    How does it look on an android phone?
    Am I dealing with multiple dev teams?
    How do I as a designer, push a change to native apps across
    all of these different platforms?
    Saturday, April 28, 12

    View full-size slide

  13. Saturday, April 28, 12

    View full-size slide

  14. WHAT’S INCONSISTENT
    ACROSS DEVICES?
    THE OS.
    Saturday, April 28, 12

    View full-size slide

  15. WHAT’S INCONSISTENT
    ACROSS DEVICES?
    App stores.
    Saturday, April 28, 12

    View full-size slide

  16. WHAT’S (MOSTLY)
    CONSISTENT ACROSS ALL OF
    THESE VARIOUS DEVICES?
    Saturday, April 28, 12

    View full-size slide

  17. THE WEB, THE BROWSER.
    and Web Standards.
    Saturday, April 28, 12

    View full-size slide

  18. “Day by day, the number of devices, platforms,
    and browsers that need to work with your site
    grows.
    Responsive web design represents a fundamental
    shift in how we’ll build websites for the decade to
    come.”
    - Jeffrey Veen
    Saturday, April 28, 12

    View full-size slide

  19. SO WHY RESPONSIVE WEB
    DESIGN?
    Saturday, April 28, 12

    View full-size slide

  20. ONE URL.
    http://www.myresponsivewebsite.com
    Saturday, April 28, 12

    View full-size slide

  21. ACCESSIBLE FROM ANY
    DEVICE WITH A MODERN
    WEB BROWSER.
    Saturday, April 28, 12

    View full-size slide

  22. WHAT IS RESPONSIVE WEB
    DESIGN?
    Saturday, April 28, 12

    View full-size slide

  23. Saturday, April 28, 12

    View full-size slide

  24. Saturday, April 28, 12

    View full-size slide

  25. 1. FLEXIBLE GRID SYSTEM
    2. MEDIA QUERIES
    3. FLUID MEDIA (IMAGES &
    TEXT)
    Saturday, April 28, 12

    View full-size slide

  26. AS COINED BY
    ETHAN MARCOTTE.
    Saturday, April 28, 12

    View full-size slide

  27. 1. FLEXIBLE GRID SYSTEM
    2. MEDIA QUERIES
    3. FLUID MEDIA (IMAGES &
    TEXT)
    Saturday, April 28, 12

    View full-size slide

  28. 1. FLEXIBLE GRID SYSTEM
    The static 960 grid 12 and 16 column layouts just doesn’t cut
    it anymore.
    Saturday, April 28, 12

    View full-size slide

  29. 1. FLEXIBLE GRID SYSTEM
    - % width columns, gutters and margins
    - drops columns in and out as space is available
    target width/context width * 100 = % width
    Saturday, April 28, 12

    View full-size slide

  30. 1. FLEXIBLE GRID SYSTEM
    - % width columns, gutters and margins
    - drops columns in and out as space is available
    target width/context width * 100 = % width
    55px
    Saturday, April 28, 12

    View full-size slide

  31. 1. FLEXIBLE GRID SYSTEM
    - % width columns, gutters and margins
    - drops columns in and out as space is available
    target width/context width * 100 = % width
    848px
    Saturday, April 28, 12

    View full-size slide

  32. 1. FLEXIBLE GRID SYSTEM
    target width/context width * 100 = % width
    55px/848px * 100 = 6.485849056604%
    Saturday, April 28, 12

    View full-size slide

  33. 1. FLEXIBLE GRID SYSTEM
    Twitter Bootstrap: http://twitter.github.com/bootstrap/
    Saturday, April 28, 12

    View full-size slide

  34. 1. FLEXIBLE GRID SYSTEM
    The Golden Grid system: goldengridsystem.com
    Saturday, April 28, 12

    View full-size slide

  35. Saturday, April 28, 12

    View full-size slide

  36. Saturday, April 28, 12

    View full-size slide

  37. 1. FLEXIBLE GRID SYSTEM
    Skeleton: http://getskeleton.com/#grid
    Saturday, April 28, 12

    View full-size slide

  38. 1. FLEXIBLE GRID SYSTEM
    2. MEDIA QUERIES
    3. FLUID MEDIA (IMAGES &
    TEXT)
    Saturday, April 28, 12

    View full-size slide

  39. 2. MEDIA QUERIES
    Media queries allow us to describe a set of rules for
    how our web elements appear at certain max and
    min screen widths.
    Use them to fix your design when it breaks.
    .
    Saturday, April 28, 12

    View full-size slide

  40. 2. MEDIA QUERIES
    @media screen and (max-width: 960px)
    {
    // css here
    }
    Saturday, April 28, 12

    View full-size slide

  41. 2. MEDIA QUERIES
    Saturday, April 28, 12

    View full-size slide

  42. 2. MEDIA QUERIES
    @media screen and (max-width: 320px) {
    header img .logo {
    align: middle;
    }
    }
    @media screen and (max-width: 767px) {
    header img .logo {
    align: left;
    }
    }
    Saturday, April 28, 12

    View full-size slide

  43. 1. FLEXIBLE GRID SYSTEM
    2. MEDIA QUERIES
    3. FLUID MEDIA
    Saturday, April 28, 12

    View full-size slide

  44. 3. FLUID MEDIA
    Fluid images and content.
    Saturday, April 28, 12

    View full-size slide

  45. 3. FLUID MEDIA
    Saturday, April 28, 12

    View full-size slide

  46. Saturday, April 28, 12

    View full-size slide

  47. Saturday, April 28, 12

    View full-size slide

  48. 3. FLUID MEDIA
    One trick to remember:
    img {
    max-width: 100%;
    }
    Saturday, April 28, 12

    View full-size slide

  49. 3. FLUID MEDIA
    Fonts - pixels vs ems
    - use pixels for absolute font sizes (when precision is
    needed)
    - use ems (scalable, ratio unit) otherwise
    - ems are proportional fonts, relative to the and
    defined font-size
    Saturday, April 28, 12

    View full-size slide

  50. 3. FLUID MEDIA
    The body tag has font-size=16px or 1em by default, so
    if you wanted your header to have a font size of 32px:
    32/16 = 2em
    SO?
    As you zoom in/out in the browser (i.e. increase your
    font size), a font-size of 2em will scale to be twice the
    size of the body font size.
    Saturday, April 28, 12

    View full-size slide

  51. 1. FLEXIBLE GRID SYSTEM
    2. MEDIA QUERIES
    3. FLUID MEDIA (IMAGES &
    TEXT)
    Saturday, April 28, 12

    View full-size slide

  52. WHERE IS RESPONSIVE WEB
    DESIGN BEING USED?
    Saturday, April 28, 12

    View full-size slide

  53. PERSONAL SITES
    Saturday, April 28, 12

    View full-size slide

  54. PERSONAL SITES
    Saturday, April 28, 12

    View full-size slide

  55. Saturday, April 28, 12

    View full-size slide

  56. Saturday, April 28, 12

    View full-size slide

  57. CONSUMER SITES
    Saturday, April 28, 12

    View full-size slide

  58. CONSUMER SITES
    Saturday, April 28, 12

    View full-size slide

  59. CONTENT HEAVY SITES
    Saturday, April 28, 12

    View full-size slide

  60. CONTENT HEAVY SITES
    Saturday, April 28, 12

    View full-size slide

  61. WHO IS RESPONSIBLE FOR
    RESPONSIVE WEB DESIGN?
    Saturday, April 28, 12

    View full-size slide

  62. DESIGNERS
    &
    DEVELOPERS
    Saturday, April 28, 12

    View full-size slide

  63. DESIGN CONTENT FIRST.
    What is the most important content your user will be
    looking for?
    - on a mobile sized screen
    - on a tablet sized screen
    - on a desktop sized screen
    ORDER MATTERS.
    Saturday, April 28, 12

    View full-size slide

  64. START THINKING RESPONSIVE.
    Think responsive web design at the sketching/prototyping/
    ideation phase.
    Saturday, April 28, 12

    View full-size slide

  65. START RESIZING THE
    BROWSER.
    Saturday, April 28, 12

    View full-size slide

  66. ARE YOUR SITES RESPONSIVE?
    responsive.is
    Saturday, April 28, 12

    View full-size slide

  67. Saturday, April 28, 12

    View full-size slide

  68. Saturday, April 28, 12

    View full-size slide

  69. LEARN RWD DESIGN PATTERNS
    1. Mostly Fluid
    2. Column Drop
    3. Layout Shifter
    source: http://www.lukew.com/ff/entry.asp?1514
    From a recent Luke Wrobleski post:
    Saturday, April 28, 12

    View full-size slide

  70. GET IN THE LOOP
    • Read the Responsive Web Design ‘A Book Apart’ book by
    Ethan Marcotte
    • Follow @RWD on twitter
    • Check out www.mediaqueri.es
    Saturday, April 28, 12

    View full-size slide

  71. THANKS.
    DESIGN RESPONSIVELY.
    CONTACT ME:
    @TFEENER
    Saturday, April 28, 12

    View full-size slide