Responsibly Responsive Web Design

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/[email protected]') 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