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.

Transcript

1. Becoming Responsibly Responsive Or, How We Learned to Love the Browser May 10, 2012 Thursday, May 10, 12
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
3. The Rise of Mobile Thursday, May 10, 12
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
5. What’s a designer to do? Thursday, May 10, 12
6. Thursday, May 10, 12
7. A separate mobile site? Maybe. Thursday, May 10, 12
8. Mobile Template? Thursday, May 10, 12
9. How about the same HTML? Thursday, May 10, 12
10. CSS Zen Garden Thursday, May 10, 12
11. A new approach Thursday, May 10, 12
12. Enter Responsive Design Thursday, May 10, 12
13. Fluid Grids ‣ Been around for years ‣ Resizable browser windows ‣ Math! Thursday, May 10, 12
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
15. Flexible Images img, object { max-width: 100%; } Thursday, May 10, 12
16. Media Queries The secret sauce Thursday, May 10, 12
17. This may look familiar <link rel="stylesheet" type="text/css" href="print.css" media="print" /> Thursday, May 10, 12
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
19. Are we supposed to learn all of this?! Thursday, May 10, 12
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
21. Zurb Foundation Thursday, May 10, 12
22. Twitter Bootstrap Thursday, May 10, 12
23. But what about the design!? Thursday, May 10, 12
24. The Design & Process So has Responsive Design totally screwed up our whole process? In short: yes. Thursday, May 10, 12
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
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
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
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
29. Let’s do this for reals Thursday, May 10, 12
30. Phase One - IA and Introductions Good news? Been here before. Thursday, May 10, 12
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
32. Phase Two - Wireframing and UX This is familiar, too. I thought you said things were new?! Thursday, May 10, 12
33. Wireframing in the browser Twitter Bootstrap works great for this Thursday, May 10, 12
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
35. No! Thursday, May 10, 12
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
37. Hrm.... Thursday, May 10, 12
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
39. Thursday, May 10, 12
40. Thursday, May 10, 12
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
42. Thursday, May 10, 12
43. Designvelopment?! The most radical change to the process Thursday, May 10, 12
44. A mix between designer and developer Thursday, May 10, 12
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
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
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
48. Enter media queries What device size to target next? Thursday, May 10, 12
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
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
51. ‣ Added more images, such as the computer background image ‣ A more pleasing layout to larger screens ‣ Larger images Thursday, May 10, 12
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
53. Thursday, May 10, 12
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
55. Launch! ...and drink. Thursday, May 10, 12
56. A few caveats... Nothing is perfect... Thursday, May 10, 12
57. Advanced Responsive Design This stuff is getting easier by the day !!! Thursday, May 10, 12
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
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
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
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
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/ico-time@2x.png') no-repeat top left; } } Thursday, May 10, 12
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
64. Questions? Thursday, May 10, 12