Intro to Responsive Web Design: RWD SF Meetup

Extremely similar to my previous Intro to Responsive Web Design presentation, just some slight tweaks.

Presented this in the kickoff of the new San Francisco RWD Meetup group at Tagged headquarters.

Responsive Web Design from 30, 000 feet. Breaking it down at a high level by the 5 W's.

The videos don't play in this speaker deck preso... but grab the URLS and go check out the sites yourself! Have fun resizing the browser :)

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