This document discusses responsive web design and some of the challenges that have arisen from it. It notes that responsive design has led to large pages with significant CSS and JavaScript to solve problems of serving different images sizes and formats to various device types. It critiques current design practices, noting that design schools still teach print rather than responsive design and that designs should be tested across real browsers and devices rather than just resizing screens. The document advocates for mobile-first design, prioritizing user needs over marketers, ensuring speed, and developing and testing on multiple real devices and browsers.

1. Wilfred Nas - front end developer / @wnas / wnas.nl
1 / 83

2. What has
responsive
web design
done for us,
so far…

3. It creates big
pages

4. With loads of css
and javascript

5. All to solve self
inflicted
problems

6. Let’s just pick
one

7. Images
What kind of image to serve

8. Retina or non
retina

9. And how to
serve it

10. The <img> tag
doesn't cut it

11. In comes
<picture>

12. (again)

13. Devices
To what kind of device

14. Mobile

15. Tablet

16. Phablet

17. TV’s

18. Consoles

19. Fridges

20. Desktop

21. Desknot

22. Touch

23. Touch is mobile

24. Or is touch
desktop?

25. Or no touch

26. Size matters…

27. 320

28. 480

29. 800

30. 440

31. 768

32. 1024

33. 1280

34. 632

35. 1920

36. 2560

37. 240

38. The web is text…

39. So why do we do
pixels?

40. Use font sizes
instead…

42. Media queries to
the rescue

43. Even for tables

44. Data tables,
that is

45. Or do we use
javascript for
those?

46. Or not?

47. Breakpoints?

48. We don’t need
breakpoints…

49. “It's what happens
between the
breakpoints that
matters the most”
–Wilfred Nas

50. Tweakpoints

51. Haypoint

52. But

53. But

54. The web IS
responsive

55. At least

56. Before we
developers and
designer killed it
(as a developer I would love to put the sole blame on
designers, but we have to take some of the blame)

57. Designers

58. Design schools
still don't teach
anything but
print design

59. Photoshop is
NOT a design
tool
it's for sketching

60. You should
design in the
browser

61. and most importantly

62. present in the
browser

63. Or better yet,
present on
different
browsers

64. And different
devices

65. And different
browsers on
those devices

67. Developers

68. Test and develop
on multiple
devices

69. And browsers of
course

70. But you already did that, right?

71. Don't just resize
your screen

72. Get those
screens filthy

73. Use tools like
ghost lab

74. Really test on
multiple devices

75. Use standards

76. Start with the
information

77. Never the
presentation

78. Mobile first lets
you focus

79. Never listen to marketeers,
ever
That gets us only more carousels

80. Only listen to
users

81. Speed is the
only thing that
matters

82. Thank you for
listening to my
rant

83. Wilfred Nas - front end developer / @wnas / wnas.nl