The document discusses the rise of responsive web design. It notes that in 2012, there were over 367 million websites and responsive design was the top trend. It provides examples of websites that have implemented responsive design successfully. The document advocates for combining design and development into one process. It also discusses how responsive design aligns with delivering content across different sized screens from desktops to mobile devices with a single code base.

1. HUSET MARKEDSFØRING
RESPONSIVE
DESIGN
VED PETER SOLOW & HJØRDIS THORBORG

3. RESPONSIVE DESIGN 21. JUNI 2012

4. RESPONSIVE DESIGN 21. JUNI 2012
130 WEBSITES

5. RESPONSIVE DESIGN 21. JUNI 2012

6. RESPONSIVE DESIGN 21. JUNI 2012
2.738 WEBSITES

7. RESPONSIVE DESIGN 22. JUNI 2012
23.500 WEBSITES

8. RESPONSIVE DESIGN 21. JUNI 2012

10. RESPONSIVE DESIGN 21. JUNI 2012

11. RESPONSIVE DESIGN 21. JUNI 2012
~ 367.000.000 WEBSITES

12. RESPONSIVE DESIGN 21. JUNI 2012

13. RESPONSIVE WEB DESIGN
”AT IT’S MOST BASIC LEVEL,
RESPONSIVE DESIGN IS ABOUT
SERVING ONE HTML DOCUMENT
TO COUNTLESS BROWSERES AND
DEVICES...”
Ethan Marcotte,
Responsive web design

15. RESPONSIVE DESIGN 21. JUNI 2012

16. DESIGNOPMENT
”…COMBINING DESIGN AND
DEVELOPMENT INTO ONE HYBRID
PHASE, BRINGING THE TWO TEAMS
INTO ONE HIGHLY COLLABORATIVE
GROUP.”
Ethan Marcotte,
Responsive web design

17. RESPONSIVE DESIGN 21. JUNI 2012

18. RESPONSIVE DESIGN 21. JUNI 2012
MODUL IA

19. RESPONSIVE DESIGN 21. JUNI 2012
LIVE MOCKUP – BREAKPOINT IDENTIFIKATION
1240 PX 768 PX 320 PX

22. RESPONSIVE DESIGN 21. JUNI 2012

23. RESPONSIVE DESIGN 21. JUNI 2012

24. RESPONSIVE DESIGN 21. JUNI 2012
ET DESIGNBLIK PÅ
RESPONSIVE WEB
DESIGN

25. RESPONSIVE DESIGN 21. JUNI 2012
DESIGN + DEVELOPMENT
= DESIGNOPMENT

26. RESPONSIVE DESIGN 21. JUNI 2012
RESEARCH DESIGNER
STRATEGISK DESIGNER
UX-DESIGNER
INTERAKTIONSDESIGNER
CO-DESIGNER

28. RESPONSIVE DESIGN 21. JUNI 2012
WEB DESIGN TRENDS

29. RESPONSIVE DESIGN 21. JUNI 2012
WEB DESIGN TRENDS IN 2011
(WEB DESIGN LEDGER)

30. RESPONSIVE DESIGN

31. RESPONSIVE DESIGN 21. JUNI 2012
WEB DESIGN TRENDS 2011
1. MORE CSS3 + HTML5
2. SIMPLE COLOR SCHEMES
3. MOBILE READY
4. PARALLAX SCROLLING
5. DESIGNING FOR TOUCH SCREENS, NOT MICE
6. DEPTH PERCEPTION IN WEB DESIGN
7. LARGE PHOTOGRAPHIC BACKGROUNDS
8. ADVENTUROUS DOMAIN NAMES & INTEGRATION
9. QR: QUICK RESPONSE
10. THUMBNAIL DESIGN
11. CONSTANT CONNECTION/ LIFE STREAM

32. RESPONSIVE DESIGN 21. JUNI 2012
WEB DESIGN TRENDS IN 2012
(WEB DESIGN LEDGER)

33. RESPONSIVE DESIGN

34. RESPONSIVE DESIGN 21. JUNI 2012
WEB DESIGN TRENDS 2012
1. RESPONSIVE WEB DESIGN
2. FIXED-POSITION NAVIGATION
3. CIRCLES
4. BIG VECTOR ART
5. MULTI-COLUMN MENUS
6. JQUERY/CSS3/HTML5 ANIMATION
7. RIBBONS & BANNER GRAPHICS
8. CUSTOM FONT FACES
9. INFOGRAPHICS
10. FOCUS ON SIMPLICITY

35. RESPONSIVE DESIGN 21. JUNI 2012
CSS3 + HTML5
BÅNDBREDDE
BROWSERSTANDARDER
(SKÆRMSTØRRELSE)
KONVENSIONER

36. RESPONSIVE DESIGN 21. JUNI 2012
FORM FOLLOWS FUNCTION
FORM FOLLOWS MEANING
(KLAUS KRIPPENDORFF)

37. RESPONSIVE DESIGN 21. JUNI 2012
“YOU WANT [NEW TECHNOLOGY] TO
BECOME A MORE FUNDAMENTAL
PART OF YOUR LIFE, AND YOU WANT
PLEASURABLE THINGS … ARTWORKS,
AND PHOTOGRAPHS … WE WANT THAT
OUT OF OUR TECHNOLOGY TOO.”
(DONALD NORMAN)

38. RESPONSIVE DESIGN 21. JUNI 2012
WEB DESIGN TRENDS 2012
1. RESPONSIVE WEB DESIGN
2. FIXED-POSITION NAVIGATION
3. CIRCLES
4. BIG VECTOR ART
5. MULTI-COLUMN MENUS
6. JQUERY/CSS3/HTML5 ANIMATION
7. RIBBONS & BANNER GRAPHICS
8. CUSTOM FONT FACES
9. INFOGRAPHICS
10. FOCUS ON SIMPLICITY

39. RESPONSIVE DESIGN

40. RESPONSIVE DESIGN

41. RESPONSIVE DESIGN

42. RESPONSIVE DESIGN 21. JUNI 2012
15 TOP WEB DESIGN AND
DEVELOPMENT TRENDS FOR 2012
(.NET MAGAZINE)

43. RESPONSIVE DESIGN 21. JUNI 2012
WEB DESIGN AND DEVELOPMENT TRENDS 2012
1. PROGRESSIVE ENHANCEMENT
2. RESPONSIVE DESIGN
3. FLASH WILL SURVIVE
4. NATIVE SUPPORT FOR PLUG-IN FEATURES
5. APPIFICATION TAKES HOLD
6. WEB APP FRAGMENTATION
7. MOBILE GETS BIGGER
8. A DEVICE EXPLOSION
9. RESPECT BEYOND AESTHETICS
10. SOCIAL BATTLES HEAT UP
11. GROWTH OF THE TWO-SCREEN MODEL

44. RESPONSIVE DESIGN 21. JUNI 2012
“THE WEB HAS MOVED BEYOND
THE DESKTOP AND
IT’S NOT MOVING BACK”
(ETHAN MARCOTTE)

45. RESPONSIVE DESIGN 21. JUNI 2012
VISUEL IDENTITET PÅ
DIGITALE PRÆMISSER

46. RESPONSIVE DESIGN 21. JUNI 2012
CASES
RESPONSIVE WEB DESIGN

53. RESPONSIVE DESIGN 21. JUNI 2012
CASES
LOGO SOM MÆRKE

54. RESPONSIVE DESIGN 21. JUNI 2012

55. RESPONSIVE DESIGN 21. JUNI 2012

56. RESPONSIVE DESIGN 21. JUNI 2012

57. RESPONSIVE DESIGN 21. JUNI 2012

58. RESPONSIVE DESIGN 21. JUNI 2012

59. RESPONSIVE DESIGN 21. JUNI 2012
CASE
MIT MEDIA LAB

60. RESPONSIVE DESIGN 21. JUNI 2012

61. RESPONSIVE DESIGN 21. JUNI 2012

62. RESPONSIVE DESIGN 21. JUNI 2012

63. RESPONSIVE DESIGN 21. JUNI 2012
CASE
CX

64. RESPONSIVE DESIGN 21. JUNI 2012

65. RESPONSIVE DESIGN 21. JUNI 2012

66. RESPONSIVE DESIGN 21. JUNI 2012

67. CASE
WORDPRESS

70. RESPONSIVE DESIGN 21. JUNI 2012
BRANDING &
RESPONSIVE WEB
DESIGN

71. RESPONSIVE DESIGN 21. JUNI 2012
“WE CAN EMBRACE THE
FLEXIBILITY INHERENT TO THE
WEB, WITHOUT SURRENDERING
THE CONTROL WE REQUIRE
AS DESIGNERS”
(ETHAN MARCOTTE)

72. RESPONSIVE DESIGN 21. JUNI 2012
CASE
CBS

73. RESPONSIVE DESIGN

76. RESPONSIVE DESIGN 21. JUNI 2012

77. RESPONSIVE DESIGN 21. JUNI 2012

78. RESPONSIVE DESIGN 21. JUNI 2012

79. RESPONSIVE DESIGN 21. JUNI 2012

80. RESPONSIVE DESIGN 21. JUNI 2012

81. RESPONSIVE DESIGN 21. JUNI 2012

82. RESPONSIVE DESIGN 21. JUNI 2012

89. RESPONSIVE DESIGN

90. MORGENBOOSTER

91. RESPONSIVE DESIGN

92. RESPONSIVE DESIGN

93. RESPONSIVE DESIGN 21. JUNI 2012

94. RESPONSIVE DESIGN 21. JUNI 2012

98. “I THINK WHAT IS
HAPPENING ON THE WEB,
THE INTERNET,
IS THAT IN SOME SENSE IT’S
DISAPPEARING”
(DONALD NORMAN)

99. “I WOULD LIKE TO SEE
WEB DESIGNERS DISAPPEAR
AND BECOME DESIGNERS …
IT’S NOT WEB DESIGN, IT’S
INFORMATION DESIGN,
COMMUNICATION DESIGN.”
(DONALD NORMAN)

100. RESPONSIVE DESIGN 21. JUNI 2012
RESPONSIVE WEB
DESIGN SET FRA ET
KUNDEPERSPEKTIV

101. RESPONSIVE DESIGN 21. JUNI 2012
1. BETYDNING FOR TILBUD OG BUDGET
2. RESPONSIVE WEB DESIGN I ONLINE STRATEGI
3. DYNAMISKE PRINCIPPER I DESIGN KONCEPT
4. “LIVE” PROTOTYPE DEL AF DEN AGILE PROCES
5. “LIVE” VISNING PÅ DESIGN PRÆSENTATIONER
6. HTML SOM DESIGN LEVERANCE
7. TILPASNING TVÆRS AF DEVICES = VÆRDISKABELSE
8. FREMTIDSSIKRING

102. RESPONSIVE DESIGN 21. JUNI 2012
SPØRGSMÅL

103. RESPONSIVE DESIGN 21. JUNI 2012
..
TAK!