$30 off During Our Annual Pro Sale. View Details »

Responsibly Responsive Web Design

Responsibly Responsive Web Design

So you understand the technical basics of Responsive Web Design, including media queries, fluid grids and images, but are grappling at how to apply it to your workflow. Should we be designing in the browser, or making static comps of different screen widths? We're all struggling at how to best refine our process for a new generation of web design and development in order to accommodate today's array of devices without pointless rework.

In this workshop, we'll give a brief background of what Responsive Web Design is and delve further into how Responsive Web Design is changing the process of designing and developing for today's web. We'll also offer techniques and solutions to expedite time and help pitch this process to the client by walking through an example site from start to finish.

Ryan Merrill

May 13, 2012
Tweet

Other Decks in Design

Transcript

  1. Becoming Responsibly
    Responsive
    Or, How We Learned to Love the Browser
    May 10, 2012
    Thursday, May 10, 12

    View Slide

  2. Ryan Merrill
    Bobby Uhlenbrock,
    Partner/Developer
    http://uhlenbrock.us/
    Bobby Uhlenbrock
    Who We Are
    Ryan Merrill, Developer
    http://ryanmerrill.net/
    Ample is a small-batch digital agency in Cincinnati and
    an organizer of QC Merge.
    http://helloample.com/
    Taylor MacDonald, Developer
    http://tcmacdonald.com/
    Taylor MacDonald
    Thursday, May 10, 12

    View Slide

  3. The Rise of Mobile
    Thursday, May 10, 12

    View Slide

  4. What does this mean for us?
    ‣ A range of devices and new ones coming out weekly
    ‣ A ton of different mobile web browsers.
    ‣ Each device has a different screen size
    ‣ New browser wars? We don't want to go back to 1999, please.
    Thursday, May 10, 12

    View Slide

  5. What’s a
    designer
    to do?
    Thursday, May 10, 12

    View Slide

  6. Thursday, May 10, 12

    View Slide

  7. A separate mobile site? Maybe.
    Thursday, May 10, 12

    View Slide

  8. Mobile Template?
    Thursday, May 10, 12

    View Slide

  9. How about the same HTML?
    Thursday, May 10, 12

    View Slide

  10. CSS Zen Garden
    Thursday, May 10, 12

    View Slide

  11. A new approach
    Thursday, May 10, 12

    View Slide

  12. Enter Responsive
    Design
    Thursday, May 10, 12

    View Slide

  13. Fluid Grids
    ‣ Been around for years
    ‣ Resizable browser windows
    ‣ Math!
    Thursday, May 10, 12

    View Slide

  14. Target / Context = Result
    Or, how to turn pixels into percentages and ems
    h1 {
    font-family: Georgia, serif;
    width: 25%; /* 100px / 25px */
    font-size: 1.5em; /* 24px / 16px = 1.5em */
    }
    Thursday, May 10, 12

    View Slide

  15. Flexible Images
    img,
    object {
    max-width: 100%;
    }
    Thursday, May 10, 12

    View Slide

  16. Media Queries
    The secret sauce
    Thursday, May 10, 12

    View Slide

  17. This may look familiar
    media="print" />
    Thursday, May 10, 12

    View Slide

  18. But they come in a lot more flavors, too
    @media screen and (min-width: 600px) {}
    @media handheld and (min-width: 320px) {}
    @media projection and (min-width: 600px) {}
    @media screen and (max-width: 600px) {}
    @media handheld and (orientation: portrait) {}
    and on, and on, and on, and on...
    Thursday, May 10, 12

    View Slide

  19. Are we supposed to
    learn all of this?!
    Thursday, May 10, 12

    View Slide

  20. Frameworks and other helpers
    ‣ Twitter Bootstrap (http://twitter.github.com/bootstrap/)
    ‣ Zurb Foundation (http://foundation.zurb.com/)
    ‣ Compass (http://compass-style.org/)
    ‣ Susy Grid (http://susy.oddbird.net/)
    ‣ FitText & FitVid: (http://fittextjs.com/ & http://fitvidsjs.com/)
    ‣ Adobe Shadow (http://labs.adobe.com/technologies/shadow/)
    ‣ Retina.js (http://retinajs.com/)
    Thursday, May 10, 12

    View Slide

  21. Zurb Foundation
    Thursday, May 10, 12

    View Slide

  22. Twitter Bootstrap
    Thursday, May 10, 12

    View Slide

  23. But what about
    the design!?
    Thursday, May 10, 12

    View Slide

  24. The Design & Process
    So has Responsive Design totally screwed up our
    whole process? In short: yes.
    Thursday, May 10, 12

    View Slide

  25. This doesn’t work any more
    ‣ Too resource intensive to create multiple static comps at
    different widths in Photoshop
    ‣ Literally throwing away these hours spent. No tangible product
    produced.
    ‣ Miscommunication between the client, designer and
    development team
    Thursday, May 10, 12

    View Slide

  26. A new way of doing things
    ‣ The designer is the developer
    ‣ More collaboration between developers and designers
    ‣ Developers are integrated in the entire process
    Thursday, May 10, 12

    View Slide

  27. Mobile first web design
    ‣ Popularized by Luke Wroblewski
    ‣ Let’s the designer focus on the
    most important areas of the site
    ‣ A mobile-first mindset is something
    everyone needs to practice
    Thursday, May 10, 12

    View Slide

  28. Advanced
    Responsive Design
    Southwest.com
    ‣ Too cluttered, not focused
    ‣ Why is the mobile site better than
    the desktop?!
    ‣ Rip out needless stuff
    ‣ Better user experience overall
    Source: http://chicago2011.drupal.org/sessions/designing-mobile
    Thursday, May 10, 12

    View Slide

  29. Let’s do this for reals
    Thursday, May 10, 12

    View Slide

  30. Phase One - IA and Introductions
    Good news? Been here before.
    Thursday, May 10, 12

    View Slide

  31. RefreshCincy, our client, wants:
    ‣ A clean site
    ‣ Relevant information
    ‣ Wants to attract local technologists, writers, hackers, designers
    ‣ Should be easily accessible on any device
    Thursday, May 10, 12

    View Slide

  32. Phase Two - Wireframing and UX
    This is familiar, too. I thought you said things were new?!
    Thursday, May 10, 12

    View Slide

  33. Wireframing in the browser
    Twitter Bootstrap works great for this
    Thursday, May 10, 12

    View Slide

  34. Phase Three - Design
    ‣ But wait... how do we design for a fluid grid and layout
    capabilities?
    ‣ Tons and tons of mockups?!
    Thursday, May 10, 12

    View Slide

  35. No!
    Thursday, May 10, 12

    View Slide

  36. Forget your old way of working, for now.
    ‣ Practically impossible for a designer to work this way
    ‣ Need the ability to present multiple ideas to a client
    ‣ Need to set the look and feel of a site, though
    Thursday, May 10, 12

    View Slide

  37. Hrm....
    Thursday, May 10, 12

    View Slide

  38. Enter Style Tiles
    ‣ Popularized by Samantha Warren
    ‣ Style tiles allow the client to focus on
    the look and feel of the site
    ‣ More detailed than mood boards
    ‣ Help reinforce a visual identity without
    focusing on layout
    Thursday, May 10, 12

    View Slide

  39. Thursday, May 10, 12

    View Slide

  40. Thursday, May 10, 12

    View Slide

  41. Tough client? Style tiles not for you?
    ‣ Style tiles take an extremely forward-thinking client
    ‣ It’s OK to create a full-page mockup in Photoshop
    ‣ Emphasize that things are going to change along the way
    Thursday, May 10, 12

    View Slide

  42. Thursday, May 10, 12

    View Slide

  43. Designvelopment?!
    The most radical change to the process
    Thursday, May 10, 12

    View Slide

  44. A mix between designer and developer
    Thursday, May 10, 12

    View Slide

  45. Why the client loves this, too
    ‣ Allows the client to interact with something and see how their
    content flows on a page
    ‣ More hands-on than static PDFs
    Thursday, May 10, 12

    View Slide

  46. Less is more. Start with mobile.
    ‣ Start with a mobile-first stylesheet
    ‣ Base styles should be for the smallest screen
    ‣ Starting with mobile-first allows older browsers to degrade
    gracefully
    ‣ Mobile and small screen devices do not load large images
    ‣ Build up from there
    Thursday, May 10, 12

    View Slide

  47. ‣ All of these styles and images will be
    carried out through the rest of the design
    ‣ No superfluous images
    ‣ Only display the relevant information
    ‣ Clean and simple
    ‣ Direct
    Thursday, May 10, 12

    View Slide

  48. Enter media queries
    What device size to target next?
    Thursday, May 10, 12

    View Slide

  49. Middle of the road devices? Why not.
    ‣ Larger than most mobile phones
    ‣ Allows us to float content left and right
    ‣ Allows more images to be loaded to enhance design
    ‣ Larger text and images
    Thursday, May 10, 12

    View Slide

  50. Our humble media query
    @media screen and (min-width: 560px) {
    h1 {
    font-size: 1.5em;
    }
    .event-description {
    float: left;
    width: 33% /* target / context = result! */
    }
    ...
    }
    Thursday, May 10, 12

    View Slide

  51. ‣ Added more images, such as the
    computer background image
    ‣ A more pleasing layout to larger
    screens
    ‣ Larger images
    Thursday, May 10, 12

    View Slide

  52. Let’s go a little bit bigger, shall we?
    1.@media screen and (min-width: 940px) {
    h1 {
    font-size: 2.5em;
    }
    .event-description {
    float: left;
    width: 63.6123% /* target / context = result! */
    }
    ...
    }
    Thursday, May 10, 12

    View Slide

  53. Thursday, May 10, 12

    View Slide

  54. Final changes and browser test
    ‣ There shouldn’t be a ton of changes from the client
    ‣ Been involved in the whole process
    ‣ Browser testing should be minimal if a mobile-first mindset was
    maintained throughout the project
    Thursday, May 10, 12

    View Slide

  55. Launch!
    ...and drink.
    Thursday, May 10, 12

    View Slide

  56. A few caveats...
    Nothing is perfect...
    Thursday, May 10, 12

    View Slide

  57. Advanced
    Responsive Design
    This stuff is getting easier by the day
    !!!
    Thursday, May 10, 12

    View Slide

  58. CSS Pre-Processors
    ‣ SASS & LESS has greatly improved the way we’re doing things
    as front-end developers
    ‣ Nestable declarations
    ‣ Ability to create mixins, or functions to speed up development
    ‣ Reusable code and variables help maintain readability
    Thursday, May 10, 12

    View Slide

  59. Code Examples
    $breakSmall: 320px;
    $breakMedium: 560px;
    $breakLarge: 940px;
    @mixin respond-to($media) {
    @if $media == tiny-screens {
    @media only screen and (max-width: $breakSmall) { @content; }
    }
    @else if $media == small-screens {
    @media only screen and (min-width: $breakSmall + 1) { @content; }
    }
    @else if $media == medium-screens {
    @media only screen and (min-width: $breakMedium + 1) { @content; }
    }
    @else if $media == wide-screens {
    @media only screen and (min-width: $breakLarge) { @content; }
    }
    }
    Thursday, May 10, 12

    View Slide

  60. Whoa, this is easy
    .event-details {
    width: 100%;
    float: none;
    /* Media Queries */
    @include respond-to(medium-screens) {
    float: left;
    width: 63%;
    } //medium-screen
    @include respond-to(wide-screens) {
    width: 83%;
    } //wide-screens
    } //event-details
    Thursday, May 10, 12

    View Slide

  61. Let’s go even further with Retina images
    @mixin retina-image($width, $height) {
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    @content;
    -webkit-background-size: $width $height;
    }
    }
    Thursday, May 10, 12

    View Slide

  62. Which in practice, looks like:
    .event-time {
    background: url('parts/ico-time.png') no-repeat top left;
    @include retina-image(41px, 48px) {
    background: url('parts/[email protected]') no-repeat top left;
    }
    }
    Thursday, May 10, 12

    View Slide

  63. Going forward
    ‣ RefreshCincy’s first meetup will be announced for June
    ‣ Checkout the RefreshCincy site as a start on Github:
    https://github.com/ample/qc-merge
    Thursday, May 10, 12

    View Slide

  64. Questions?
    Thursday, May 10, 12

    View Slide