Intro to Responsive Web Design: RWD SF Meetup

Transcript

1. INTRO TO RESPONSIVE WEB DESIGN Responsive Web Design SF Meetup

   June 14, 2012 Friday, June 15, 2012

2. WHO AM I? • Software engineer at Adobe since 2006

   • Working in the XD group as a Senior Experience Developer • Experience Developer? You say? • Design savvy developer. Implementer of pixel perfect user interfaces and interactions. Friday, June 15, 2012

3. MY FOCUS Working with XD and the Web Platform group

   at Adobe to prototype experiences in the browser. http://blogs.adobe.com/webplatform/ Friday, June 15, 2012

4. Responsive Web Design. RWD. WHY? WHAT? WHO? WHERE? WHEN? Friday,

   June 15, 2012

5. WHY RESPONSIVE WEB DESIGN? Friday, June 15, 2012

6. How do we create a great experience which spans across

   multiple devices, different screen widths, different resolutions, etc? Friday, June 15, 2012

7. MOBILE VS NATIVE Friday, June 15, 2012

8. MOBILE Friday, June 15, 2012

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 Friday, June 15, 2012

10. I’M TOO LAZY FOR THAT. Friday, June 15, 2012

11. NATIVE Friday, June 15, 2012

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? Friday, June 15, 2012

13. Friday, June 15, 2012

14. WHAT’S INCONSISTENT ACROSS DEVICES? THE OS. Friday, June 15, 2012

15. WHAT’S INCONSISTENT ACROSS DEVICES? App stores. Friday, June 15, 2012

16. WHAT’S (MOSTLY) CONSISTENT ACROSS ALL OF THESE VARIOUS DEVICES? Friday,

    June 15, 2012

17. THE WEB, THE BROWSER. and Web Standards. Friday, June 15,

    2012

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 Friday, June 15, 2012

19. SO WHY RESPONSIVE WEB DESIGN? Friday, June 15, 2012

20. ONE URL. http://www.myresponsivewebsite.com Friday, June 15, 2012

21. ACCESSIBLE FROM ANY DEVICE WITH A MODERN WEB BROWSER. Friday,

    June 15, 2012

22. WHAT IS RESPONSIVE WEB DESIGN? Friday, June 15, 2012

23. Friday, June 15, 2012

24. Friday, June 15, 2012

25. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA

    (IMAGES & TEXT) Friday, June 15, 2012

26. AS COINED BY ETHAN MARCOTTE. Friday, June 15, 2012

27. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA

    (IMAGES & TEXT) Friday, June 15, 2012

28. 1. FLEXIBLE GRID SYSTEM The static 960 grid 12 and

    16 column layouts just doesn’t cut it anymore. Friday, June 15, 2012

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 Friday, June 15, 2012

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 Friday, June 15, 2012

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 Friday, June 15, 2012

32. 1. FLEXIBLE GRID SYSTEM target width/context width * 100 =

    % width 55px/848px * 100 = 6.485849056604% Friday, June 15, 2012

33. 1. FLEXIBLE GRID SYSTEM Twitter Bootstrap: http://twitter.github.com/bootstrap/ Friday, June 15,

    2012

34. 1. FLEXIBLE GRID SYSTEM The Golden Grid system: goldengridsystem.com Friday,

    June 15, 2012

35. Friday, June 15, 2012

36. Friday, June 15, 2012

37. 1. FLEXIBLE GRID SYSTEM Skeleton: http://getskeleton.com/#grid Friday, June 15, 2012

38. 1. FLEXIBLE GRID SYSTEM Gridset App: http://www.gridsetapp.com Friday, June 15,

    2012

39. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA

    (IMAGES & TEXT) Friday, June 15, 2012

40. 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. . Friday, June 15, 2012

41. 2. MEDIA QUERIES @media screen and (min-width: 480px) { //

    css here } Friday, June 15, 2012

42. 2. MEDIA QUERIES Friday, June 15, 2012

43. 2. MEDIA QUERIES @media screen and (min-width: 320px) { header

    img .logo { align: middle; } } @media screen and (min-width: 767px) { header img .logo { align: left; } } Friday, June 15, 2012

44. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA

    Friday, June 15, 2012

45. 3. FLUID MEDIA Fluid images and content. Friday, June 15,

    2012

46. 3. FLUID MEDIA Friday, June 15, 2012

47. Friday, June 15, 2012

48. Friday, June 15, 2012

49. 3. FLUID MEDIA One trick to remember: img { max-width:

    100%; } *This trick is wasteful. There’s an ongoing debate and lots of activity happening in this area. So lets tackle Responsive Images next time, shall we? Friday, June 15, 2012

50. 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 <body> and <html> defined font-size Friday, June 15, 2012

51. 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. Friday, June 15, 2012

52. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA

    (IMAGES & TEXT) Friday, June 15, 2012

53. WHERE IS RESPONSIVE WEB DESIGN BEING USED? Friday, June 15,

    2012

54. PERSONAL SITES Friday, June 15, 2012

55. PERSONAL SITES Friday, June 15, 2012

56. Friday, June 15, 2012

57. Friday, June 15, 2012

58. CONSUMER SITES Friday, June 15, 2012

59. CONSUMER SITES Friday, June 15, 2012

60. CONTENT HEAVY SITES Friday, June 15, 2012

61. CONTENT HEAVY SITES Friday, June 15, 2012

62. WHO IS RESPONSIBLE FOR RESPONSIVE WEB DESIGN? Friday, June 15,

    2012

63. DESIGNERS & DEVELOPERS Friday, June 15, 2012

64. 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. Friday, June 15, 2012

65. START THINKING RESPONSIVE. Think responsive web design at the sketching/prototyping/

    ideation phase. Friday, June 15, 2012

66. START RESIZING THE BROWSER. Friday, June 15, 2012

67. ARE YOUR SITES RESPONSIVE? responsive.is Friday, June 15, 2012

68. Friday, June 15, 2012

69. Friday, June 15, 2012

70. RESPONSINATOR.COM Friday, June 15, 2012

71. 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: Friday, June 15, 2012

72. 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 Friday, June 15, 2012

73. We’re hiring Javascript Ninjas for some seriously cool projects happening

    in SF. Come talk to me if you’re interested. Friday, June 15, 2012

74. We want your feedback to help influence the products you

    use every day! Participate in Adobe User Research. www.adobe.com/userresearch Friday, June 15, 2012

75. THANKS. DESIGN RESPONSIVELY. CONTACT ME: @TFEENER Friday, June 15, 2012