Responsive Web Design: Everything has Changed

Presentation by @htmlboy at Drupal Developers Day Barcelona 2012.

Transcript

1. RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN everything has changed Javier Usobiaga #DrupalDevDays
2. @htmlboy @htmlboy @htmlboy I work at Swwweet.com
3. WHAT IS responsive web design? WHAT IS responsive web design? WHAT IS respoNsive web design?
4. WHAT IS THE web? WHAT IS THE web? WHAT IS THE web?
5. CONTROL CONTROL CONTROL a tale of obsession
6. 1990s 1990s 1990s the web is 800px wide
7. 2000s 2000s 2000s the web is 1024px wide
8. 2007 2007 2007 + the web is 1024px & 320px wide
9. 2010 2010 2010 + + the web is 1200px & 320px & 768px wide
10. 2012 2012 2012 + + the web is 1200px & 320px & 768px & 1800px wide +
11. 2012 2012 2012 + + 320px? +
12. 2012 2012 2012 the web is 256px & 320px & 426px & 480px & 560px & 640px & 768px & 800px & 960px & 1024px & 1280px & 1440px & 1600px & 1800px… + + + +
13. ENOUGH! ENOUGH! ENOUGH!
14. ENOUGH! ENOUGH! ENOUGH! it’s time to accept the web’s nature
15. THE WEB IS THE WEB IS THE WEB IS fluid universal multidevice
16. first act RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN
17. 2012.dconstruct.org
18. mediaqueri.es
19. BUT HOW? BUT HOW? BUT HOW? flexible grids flexible media @media queries
20. GRIDS GRIDS GRIDS 16% 16% 16% 16% 16% 16% 16% 16%
21. target context ÷ result GRIDS GRIDS GRIDS
22. .grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%} GRIDS GRIDS GRIDS
23. MEDIA MEDIA MEDIA img, video{ max-width:100% }
24. MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES @media screen and (max-width:320px){ .side_column{ width: 100%; float: none; } }
25. MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES change the layout change the styles increase the font size
26. RESPoNSIVE challenges RESPoNSIVE challenges Responsive challenges second act
27. Navigation Navigation Navigation
28. Navigation Navigation Navigation menu contact work about contact work about
29. bit.ly/rwd-nav
30. LAYOUT LAYOUT layout 1 2 3 4 6 5
31. 3 2 LAYOUT LAYOUT layout 1 3 1 2 4 5 6
32. LAYOUT LAYOUT layout
33. IMAGES IMAGES images wide screens high-res screens small screens
34. IMAGES IMAGES images bigger images javascript loading sever-side solutions
35. bit.ly/rwd-images
36. IMAGES IMAGES images CSS3 SVG icon fonts
37. workflow workflow workflow third act
38. WATERFALL WATERFALL WATERFALL UX / IA DESIGN VISUAL DESIGN DEV BOSS
39. Hi, I want a website… WATERFALL WATERFALL WATERFALL
40. Sure thing! WATERFALL WATERFALL WATERFALL
41. First things first. We’ll need some wireframes to set the structure. WATERFALL WATERFALL WATERFALL
42. Some color and shiny things… WATERFALL WATERFALL WATERFALL
43. A bit of CSS, a dash of JS... And voilà, our job here is done! WATERFALL WATERFALL WATERFALL
44. Er... guys... WATERFALL WATERFALL WATERFALL
45. FAIL fail Fail
46. responsive responsive Responsive
47. ten tips ten tips ten tips fourth act
48. 1. Communication Between the whole team, during the whole project.
49. 2. Design & dev, together A lot of decissions have to be taken along the way.
50. 3. Micro-deliveries Client takes part actively and makes decisions.
51. 4. Content first Make an inventory of the content and find its limitations.
52. 5. Find the critical points Navigation, images, ads, information hierarchy…
53. 6. Mobile first The small screen is the first limit.
54. 7. Reference sketches Make basic sketches to help with the hierarchy of the content.
55. 8. Prototype fast The sooner you start coding your HTML, the better.
56. 9. Design in the browser Make design decisions as you see the result on the browser.
57. 10. All screens at once When developing, always think about all screen sizes.
58. TO RECAP TO RECAP TO RECAP
59. TO RECAP TO RECAP TO RECAP you can’t control the web
60. TO RECAP TO RECAP TO RECAP you can’t control the web RWD is a viable solution
61. TO RECAP TO RECAP TO RECAP you can’t control the web RWD is a viable solution if we change our mentality
62. thanks! thanks! thanks! Javier Usobiaga · http://Swwweet.com · @htmlboy