Internettet er tilgængeligt overalt. Er dit website også? Eller hænger det gevaldigt i bremsen udenfor de trygge rammer af en gammeldags PC-browser? Lær hvordan du bygger websites, der er bedre, mere simple, mere tilgængelige og mere brugbare end dine konkurrenters sløve gamle desktop mastodonter.

1. Websites, der virker overalt
@clausstadel #mc14dk

4. Responsive web design

7. Mobile matters

8. Global trafikandel fra mobile devices
0 %
10 %
20 %
30 %
2008 Q4 2010 Q3 2012 Q2 2014 Q1
gs.statcounter.com

9. Global trafikandel fra mobile devices
0 %
10 %
20 %
30 %
2008 Q4 2010 Q3 2012 Q2 2014 Q1
gs.statcounter.com

10. pureawesomeness.com

11. pureawesomeness.comm.

13. 77% af mobile Google søgninger
foretages hjemme eller på arbejde
Google/Nielsen Life360 Mobile Search Moments Q4 2012

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

20. web designResponsive

21. web designAdaptive

22. web designBest practice

23. Web design

24. UX på det moderne web

25. Learning by doing

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

27. Retrofitting

28. Mobile first

29. Så bredt er dit website

30. Lidt er aldrig lidt nok

31. Hvor er jeg og hvor
kan jeg komme hen?
Hvad kan jeg på
denne side?
Hvad får jeg hvis jeg
scroller?

32. Hvor er jeg og hvor
kan jeg komme hen?
Hvad kan jeg på
denne side?
Hvad får jeg hvis jeg
scroller?

33. Hvor er jeg og hvor
kan jeg komme hen?
Hvad kan jeg på
denne side?
Hvad får jeg hvis jeg
scroller?

34. Lister Tilbage i tiden Fordybelse

35. Performance by design

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

37. WiFi

38. 3G

39. Building the damn thing

41. UX designer Visuel designer Udvikler

42. UX designer
Visuel designer
Udvikler

44. HTML + CSS

45. Klik

46. Tryk

48. 44px

49. delay: 300ms

50. fastclick.js

51. Billeder

52. PNG

53. JPEG

54. Retina

55. Low
Hi
325x225 px
650x450 px
29 kB
Kvalitet 80
Kvalitet 30
27 kB

56. PNG

57. SVG

58. Scalable Vector Graphics

59. Kittyshop
PNG
SVG
3 kB
1 kB

60. Tabeller

61. Tabeller er et hack

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

63. 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.

64. Flat is better

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

66. Click me

67. Click me

68. Edge Relflow

69. 320px
568px
768px
1280px

70. Deviceagnostisk

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

72. Dit content afgør dine breakpoints

73. Test på rigtige devices

74. Test på rigtigt gamle devices

75. Edge Inspect

76. Mobile first
Performance by design
Farvel Photoshop. Hallo HTML + CSS.
44x44px links med fastclick.js
JPEG og SVG i stedet for PNG
Content-baserede breakpoints
Test på rigtige devices

77. Ha’ det sjovt og lav noget fedt

78. @clausstadel clausstadel.comclaus.stadel@gmail.com