My talk from Digital Marketing 2013 (http://dm13.dk). Making a fluid layout with Responsive web design is just a small part of creating a design, that works and looks stunningly across all devices. Good, modern web design is about so much more. It's about getting rid of clutter and unnecessary content, about optimized images for better performance, about changing the way you work and the tools you use, and a lot more.

1. Responsive web design

6. Mobile matters

7. Global traffic share from mobile devices
18 %
12 %
6 %
0 %
2008 Q4
gs.statcounter.com
2010 Q1
2011 Q2
2012 Q3
2013 Q3

8. pureawesomeness.com

9. m.pureawesomeness.com

11. 77% of mobile Google searches
take place at home or work
Google/Nielsen Life360 Mobile Search Moments Q4 2012

14. Whether you like it or not, if you're a
web designer, you're also a mobile
web designer.
Brad Frost

18. Responsive web design

19. Adaptive web design

20. Best practice web design

21. Web design

22. UX of the modern web

23. Learning by doing

24. Introducing multiple content types
further down the page requires users to
go on a scavenger hunt to find them.
Brad Frost

25. Retrofitting

26. Mobile first

27. Your website is this wide

28. Less is never less enough

30. Where am I and
where can I go?
What can I do on this
page?
What will I get if I
scroll?

31. Where am I and
where can I go?
What can I do on this
page?
What will I get if I
scroll?

32. Where am I and
where can I go?
What can I do on this
page?
What will I get if I
scroll?

33. Lists
Back in time
Immersion

34. Performance by design

35. If your website is 15MB it’s not HTML5,
it’s stupid.
Christian Heilmann

36. WiFi

37. 3G

38. Building the damn thing

39. UX designer
Visual designer
Developer

40. Visual designer
UX designer
Developer

42. HTML + CSS

43. Click

44. Tap

46. 44px

47. delay: 300ms

48. fastclick.js

49. Images

50. PNG

51. JPEG

52. Retina

53. Quality 80
29 kB
325x225 px
Low
Hi
650x450 px
27 kB
Quality 30

54. PNG

55. SVG

56. Scalable Vector Graphics

57. PNG
SVG
K ittyshop

58. 3 kB
PNG
SVG
1 kB
Kittysh op

59. Tables

60. Tables are a hack

61. body {
font-size: 16px;
}

62. I think there is a profound and enduring beauty in
simplicity. In clarity. In efficiency. True simplicity is derived
from so much more than just the absence of clutter and
ornamentation. It’s about bringing order to complexity.

63. Flat is better

64. .nifty-box {
border-radius: 1em;
box-shadow: 0 0 1em black;
background: url(‘pattern.png’);
}

65. Click me

66. Click me

67. Edge Relflow

68. 768px
1280px
320px
568px

69. Deviceagnostic

70. Start with the small screen first, then
expand until it looks like shit. Time for a
breakpoint!
Stephen Hay

71. Your content defines
your breakpoints

72. Test on real devices

73. Test on really old devices

74. Edge Inspect

75. Respect the browser
Don’t do stupid shit

76. Email

77. claus.stadel@gmail.com

78. Email

79. Email

80. Mobile first
Performance by design
Bye bye Photoshop. Hello HTML + CSS.
44x44 px links with fastclick.js
Replace PNGs with JPEGs and SVGs
Content based breakpoints
Test on real devices

81. Have fun and make something cool

82. claus.stadel@gmail.com
@clausstadel
clausstadel.com