Responsive Web Design: Everything has Changed

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