Fire On the Bay SF: Intro to Responsive Web Design

A presentation I gave to the Fire On the Bay SF group at Adobe on April 10th.

This is an introduction to responsive web design. The 5 W's. With example sites/resources to get started.

Video examples may/may not be working, so please visit any sample sites I list and resize your browser :)

Transcript

1. INTRO TO RESPONSIVE WEB DESIGN April 10, 2012 Saturday, April 28, 12
2. WHO AM I? • Software engineer at Adobe since 2006 • Working in the XD group as an Experience Developer • Experience Developer? You say? • Design savvy developer. Implementer of pixel perfect user interfaces and interactions. Saturday, April 28, 12
3. MY FOCUS Working with XD and the Web Platform group at Adobe to prototype experiences in the browser. http://blogs.adobe.com/webplatform/ Saturday, April 28, 12
4. Responsive Web Design. RWD. WHY? WHAT? WHO? WHERE? WHEN? Saturday, April 28, 12
5. WHY RESPONSIVE WEB DESIGN? Saturday, April 28, 12
6. How do we create a great experience which spans across multiple devices, different screen widths, different resolutions, etc? Saturday, April 28, 12
7. MOBILE VS NATIVE Saturday, April 28, 12
8. MOBILE Saturday, April 28, 12
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 Saturday, April 28, 12
10. I’M TOO LAZY FOR THAT. Saturday, April 28, 12
11. NATIVE Saturday, April 28, 12
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? Saturday, April 28, 12
13. Saturday, April 28, 12
14. WHAT’S INCONSISTENT ACROSS DEVICES? THE OS. Saturday, April 28, 12
15. WHAT’S INCONSISTENT ACROSS DEVICES? App stores. Saturday, April 28, 12
16. WHAT’S (MOSTLY) CONSISTENT ACROSS ALL OF THESE VARIOUS DEVICES? Saturday, April 28, 12
17. THE WEB, THE BROWSER. and Web Standards. Saturday, April 28, 12
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 Saturday, April 28, 12
19. SO WHY RESPONSIVE WEB DESIGN? Saturday, April 28, 12
20. ONE URL. http://www.myresponsivewebsite.com Saturday, April 28, 12
21. ACCESSIBLE FROM ANY DEVICE WITH A MODERN WEB BROWSER. Saturday, April 28, 12
22. WHAT IS RESPONSIVE WEB DESIGN? Saturday, April 28, 12
23. Saturday, April 28, 12
24. Saturday, April 28, 12
25. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA (IMAGES & TEXT) Saturday, April 28, 12
26. AS COINED BY ETHAN MARCOTTE. Saturday, April 28, 12
27. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA (IMAGES & TEXT) Saturday, April 28, 12
28. 1. FLEXIBLE GRID SYSTEM The static 960 grid 12 and 16 column layouts just doesn’t cut it anymore. Saturday, April 28, 12
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 Saturday, April 28, 12
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 Saturday, April 28, 12
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 Saturday, April 28, 12
32. 1. FLEXIBLE GRID SYSTEM target width/context width * 100 = % width 55px/848px * 100 = 6.485849056604% Saturday, April 28, 12
33. 1. FLEXIBLE GRID SYSTEM Twitter Bootstrap: http://twitter.github.com/bootstrap/ Saturday, April 28, 12
34. 1. FLEXIBLE GRID SYSTEM The Golden Grid system: goldengridsystem.com Saturday, April 28, 12
35. Saturday, April 28, 12
36. Saturday, April 28, 12
37. 1. FLEXIBLE GRID SYSTEM Skeleton: http://getskeleton.com/#grid Saturday, April 28, 12
38. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA (IMAGES & TEXT) Saturday, April 28, 12
39. 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. . Saturday, April 28, 12
40. 2. MEDIA QUERIES @media screen and (max-width: 960px) { // css here } Saturday, April 28, 12
41. 2. MEDIA QUERIES Saturday, April 28, 12
42. 2. MEDIA QUERIES @media screen and (max-width: 320px) { header img .logo { align: middle; } } @media screen and (max-width: 767px) { header img .logo { align: left; } } Saturday, April 28, 12
43. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA Saturday, April 28, 12
44. 3. FLUID MEDIA Fluid images and content. Saturday, April 28, 12
45. 3. FLUID MEDIA Saturday, April 28, 12
46. Saturday, April 28, 12
47. Saturday, April 28, 12
48. 3. FLUID MEDIA One trick to remember: img { max-width: 100%; } Saturday, April 28, 12
49. 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 Saturday, April 28, 12
50. 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. Saturday, April 28, 12
51. 1. FLEXIBLE GRID SYSTEM 2. MEDIA QUERIES 3. FLUID MEDIA (IMAGES & TEXT) Saturday, April 28, 12
52. WHERE IS RESPONSIVE WEB DESIGN BEING USED? Saturday, April 28, 12
53. PERSONAL SITES Saturday, April 28, 12
54. PERSONAL SITES Saturday, April 28, 12
55. Saturday, April 28, 12
56. Saturday, April 28, 12
57. CONSUMER SITES Saturday, April 28, 12
58. CONSUMER SITES Saturday, April 28, 12
59. CONTENT HEAVY SITES Saturday, April 28, 12
60. CONTENT HEAVY SITES Saturday, April 28, 12
61. WHO IS RESPONSIBLE FOR RESPONSIVE WEB DESIGN? Saturday, April 28, 12
62. DESIGNERS & DEVELOPERS Saturday, April 28, 12
63. 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. Saturday, April 28, 12
64. START THINKING RESPONSIVE. Think responsive web design at the sketching/prototyping/ ideation phase. Saturday, April 28, 12
65. START RESIZING THE BROWSER. Saturday, April 28, 12
66. ARE YOUR SITES RESPONSIVE? responsive.is Saturday, April 28, 12
67. Saturday, April 28, 12
68. Saturday, April 28, 12
69. 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: Saturday, April 28, 12
70. 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 Saturday, April 28, 12
71. THANKS. DESIGN RESPONSIVELY. CONTACT ME: @TFEENER Saturday, April 28, 12