Was ist Responsive Web Design? Welche Probleme werden damit gelöst? Wie geht man an ein Responsive Web Design Projekt heran? Input für Konzeption, Technik und Design.

1. Pulpmedia intern
18. Juni 2013
PULP ACADEMY
RESPONSIVE WEB DESIGN

2. WTFISTRWD?

3. RWD=RESPONSIVE
WEBDESIGN
ACHTUNG: NICHT RESPONSIVE WEBSITE!

4. DER GRAFISCHE
AUFBAU EINER „RESPONSIVEN“
WEBSEITE ERFOLGT ANHAND DER
ANFORDERUNGEN DES JEWEILIGEN
GERÄTES, MIT DEM DIE SEITE
BETRACHTET WIRD.
Quelle: wikipedia

5. HOCH- & QUERFORMAT!
HOCH- & QUERFORMAT!

6. FINGER FRIENDLY
FINGER FRIENDLY

7. GIBT’S BIS RIESENGROSS!

8. 320PX
2560PX
768PX
1280PX
HI-RESHI-RESHI-RES

9. LÖSUNGSANSÄTZE

10. ANSATZ1:
DERKLEINSTE
GEMEINSAME
NENNER

11. ANGEPASST AUF KLEINSTE AUFLÖSUNG

12. HALLO!
ICH BIN EIN BAUM!

13. ANSATZ2:
DERDESIGNER
ANSATZ
NO OFFENSE!

14. DESIGN AUF IMAC 27”

16. ICH BIN EIGENTLICH EIN SCHÖNER, GROSSER BAUM!

17. ANSATZ3:
JEDEMDASSEINE

19. IMAC
MACBOOK
IPAD
IPHONE
GALAXY NOTE?KINDLE FIRE?DELL NOTEBOOK?SAMSUNG SMART TV?

20. EIGENTLICH BIN ICH JA EIN BAUM, KEIN WALD!

21. ANSATZ4:
EINES,DASSICH
ANPASST

23. 100%
70%
40%
25%

24. HALT!
ICH BIN KEIN BAUM
ICH BIN AUCH KEIN BILD VON EINEM BAUM
ICH BIN EIN PLATZHALTER
FÜR EIN LAYOUT

25. ICH BIN EIN LAYOUT

26. EIN LAYOUT, DAS SICH ANPASST

27. (NOCH) STANDARD
4 Lösungsansätze
FRÜHER COMMON SENSEDER KLEINSTE GEMEINSAME NENNER
DESIGNER ANSATZ
ANPASSUNG RESPONSIVE WEB DESIGN
JEDEM DAS SEINE Z.B. M.FACEBOOK.COM

28. COOL

29. FUTUREPROOF

30. FUTUREFRIENDLY

31. WIEGEHEN
WIR’SAN?

32. KONZEPT

33. CONTENT
INVENTORY

34. CONTENT?
1. WELCHER
NEWS
NAVIGATION
LOGO
EYECATCHER
SOCIAL MEDIABLOGPOST
SITEMAP
HIGHLIGHT BOXEN
SUBMENÜ
SUBSUBMENÜ
SUCHE
LOGIN
LATEST TWEETS
FACEBOOK SOCIAL BOX
SOCIAL SHARE
ADRESSE
TESTIMONIALS
FORMULAR

35. PRIORISIERUNG
2. CONTENT

36. GRAFIK
KLEIN
ÜBERSCHRIFT
Datum
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas
nisi velit, gravida at sem et, interdum
cursus nibh. Mehr lesen ...
10 Kommentare Kategorie
GRAFIK GROSS
ÜBERSCHRIFT
Datum
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Maecenas nisi velit, gravida at sem et, interdum
cursus nibh. Mauris sagittis ullamcorper gravida. In
hac habitasse platea dictumst. Mehr lesen ...
SOCIAL SHARE10 Kommentare Kategorie
GRAFIK
KLEIN
ÜBERSCHRIFT
Datum
Kategorie
DESKTOP TABLET
PHONE

37. BIG SCREEN
DESKTOP
TABLET PHONE

38. DESKTOP
PHONE
PASSWORT
LOGIN
BENUTZERNAME

39. DESKTOP PHONE
SUCHENSUCHE:

40. PHONE
DESKTOP

41. HEADER
MENU
SOCIAL MEDIA
BLOGPOST
FOOTER
BLOGPOST
BLOGPOST

42. DESKTOP TABLET PHONE WIDE PHONE
HEADER
NAVIGATION
BLOGPOST
SOCIAL MEDIA
FOOTER
Großer Eycatcher
Mittlerer
Eyecatcher
Nur Logo Nur Logo
Volles Menü Volles Menü Icon Icon
Großes Bild,
Überschrift, Teaser
Großes Bild,
Überschrift, Teaser
Kleines Bild,
Überschrift, Teaser
Kleines Bild,
Überschrift
Facebook Box,
Latest Tweets
Facebook Likes,
Twitter Icon
Icons Icons
Adresse, Sitemap Adresse, Sitemap Adresse Adresse

45. NEW STUFF
LOGO NAVIGATION S SOCIAL L
NEXT BIG THING WHAT’S HOT
SUCHE LOGIN

46. KEIN WHAT’S HOT KEIN NEXT BIG THING
KEIN SOCIAL
NAVIGATION-ICONZUSÄTZLICHE MENÜEINTRÄGE HINTER “MEHR”
NUR ÜBERSCHRIFTEN
DESKTOP TABLET PHONE WIDE PHONE

48. DESKTOP TABLET PHONE WIDE PHONE
LOGO
NAVIGATION
SUCHE
SOCIAL
LOGIN
NEW STUFF
NEXT BIG THING
WHAT’S HOT
✔ ✔ ✔ ✔
✔ “Mehr...” Icon Icon
✔ ✔ ✔ ✔
✔ ✔ ✘ ✘
✔ ✔ ✔ ✔
✔ ✔ ✔ Nur Überschriften
✔ ✔ ✘ ✘
✔ ✘ ✘ ✘

49. PROJEKTPROZESS

50. CONTENT STRATEGY
SKETCH
WIREFRAME DESIGN
PROTOTYPE
TEST
RWD PROTOTYPE
Quelle: Pon Kattera, http://www.slideshare.net/pkattera

51. A PROTOTYPE
NOTHING BEATS
IN THE CLIENTS HAND
Quelle: Pon Kattera, http://www.slideshare.net/pkattera

52. TECHNIK

53. CSS=CASCADING
STYLESHEET

54. CSS
FARBEN
SCHRIFTEN
AUSRICHTUNG
...

55. HTML
CSS

56. 1024PXBIG SCREEN NORMAL PHONE WIDE 480PXTABLET1280PX 768PX PHONE 320PX
DEFINITION IM CSS ÜBER @MEDIA

57. /* Default Layout: 992px. */
body {
width: 896px;
padding: 72px 48px 84px;
background: rgb(232,232,232);
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
width: 712px;
padding: 48px 28px 60px;
}
}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
body {
width: 436px;
padding: 36px 22px 48px;
}
}

58. NICHT IN PIXEL!FARBEN
@mediaGlobale Definitionen
POSITIONIERUNG
SCHRIFTGRÖSSEN
GRAFIKEN UNTERSCHIEDLICHE GRÖSSEN
SCHRIFTARTEN
EIN-/AUSBLENDEN... ACHTUNG BEI BILDERN!

59. PHONE-AUFLÖSUNG
»MAX-WIDTH: 100%«
TECH-TIPP 1
FÜR IMAGES AUF

60. VERHINDERT NICHT
»DISPLAY: NONE«
DEN BILDDOWNLOAD!
TECH-TIPP 2

61. WEBSPEEDTEST

62. Quelle: http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

63. HTTP://FPT.PINGDOM.COM
DESKTOP
MOBILE

64. WATERFALL CHART
FINDE BOTTLENECKS
TESTE ANDERE AUFLÖSUNGEN
RÜCKSICHT AUF MOBILE CONNECTIONS
VS

65. WAS IST MIT HI-RES DEVICES (RETINA DISPLAY)?
EIGENES CSS
EIGENE DESIGN-GRAFIKEN
DON’T DESIGN JUST FOR HI-RES!

66. 4FACHE AUFLÖSUNG!
ACHTUNG: HI-RES HAT

67. 72 DPI
HI-RES
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Mauris scelerisque dui id mi
blandit congue. Nulla nec tellus est. Nullam
ornare rutrum metus, et sodales magna
consectetur quis. Pellentesque sit amet rutrum
ligula, et molestie lectus. Nam malesuada magna
sed felis tempus vehicula. Mauris sed volutpat
magna, ac accumsan augue. Pellentesque ut
laoreet lorem. Nam lacinia ipsum mauris, vitae
ultrices justo molestie sit amet. Praesent
vulputate magna sapien, sed tincidunt elit
pellentesque id. Aenean sit amet sagittis tortor.
Pellentesque mattis id ante eget volutpat. Mauris
elit dolor, malesuada sit amet ornare et, varius a
mi. Fusce pretium ipsum id eros pellentesque
rutrum vitae id elit. Integer nibh tortor, porta ac
rhoncus ut, pharetra vel est. Duis congue leo
non sapien molestie tristique. Morbi ornare,
tortor in consequat ornare, sem mauris tincidunt
neque, sed ullamcorper risus erat in turpis.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Mauris scelerisque dui id mi
blandit congue. Nulla nec tellus est. Nullam
ornare rutrum metus, et sodales magna
consectetur quis. Pellentesque sit amet rutrum
ligula, et molestie lectus. Nam malesuada
magna sed felis tempus vehicula. Mauris sed
volutpat magna, ac accumsan augue.
Pellentesque ut laoreet lorem. Nam lacinia
ipsum mauris, vitae ultrices justo molestie sit
amet. Praesent vulputate magna sapien, sed
tincidunt elit pellentesque id. Aenean sit amet
sagittis tortor. Pellentesque mattis id ante eget
volutpat. Mauris elit dolor, malesuada sit amet
ornare et, varius a mi. Fusce pretium ipsum id
eros pellentesque rutrum vitae id elit. Integer
nibh tortor, porta ac rhoncus ut, pharetra vel
est. Duis congue leo non sapien molestie
tristique. Morbi ornare, tortor in consequat
ornare, sem mauris tincidunt neque, sed
ullamcorper risus erat in turpis.
NICHT FINGER FRIENDLY
NICHT MEHR LESERLICH

68. EMPFOHELENE ICON-GRÖSSE: 44X44 PX
Quelle: iPhone Human Interface Guidelines
HI-RES: 88X88 PX

69. WIRKLICH NÖTIG?
IST HI-RES
VIELLEICHT IN ZUKUNFT AUSSCHLIESSLICH

70. GENUGTECH-TALK
WASISTMITDESIGN?

71. ANSATZ1:
LIQUIDDESIGN

72. NÜTZT IMMER VOLLE BREITE AUS

74. SINNVOLL BEI “TILES”

75. NICHT SINNVOLL BEI TEXT

76. ANSATZ2:
FIXESLAYOUTJE
NACHAUFLÖSUNG

77. ELEMENTE HABEN FIXE BREITE
CONTENT FIXE BREITE MIT ZENTRIERTER AUSRICHTUNG

78. MAXIMALE BREITE: 1660 PX AB 1250 PX: 840 PX AB 950 PX: 556 PX AB 590 PX: 320 PX
JE NACH AUFLÖSUNG SPRINGT LAYOUT UM

79. DEMO

80. ANSATZ3:
COLUMNGRID

81. 12SPALTEN

83. 1/21/2

84. 1/43/4

85. 1/32/3

86. 1/4 1/41/2

87. 1/4 1/67/12

88. EMPFEHLUNG:
960PX-GRID

89. 60PXJESPALTE
20PXSPACE

94. 1280 PX?

95. SPALTE: 80PX

102. RESPONSIVE
COLUMNLAYOUT

103. 960PX
GRUNDLAYOUT
FÜRDESIGNER

104. TECHNISCHE
UMSETZUNG
INPROZENT

107. BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE

108. BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE

109. MAXIMALE BREITE: 1240 PX
ZENTRIERTE AUSRICHTUNG

110. 1/3 1/3 1/3
1/1
5/12 1/4 1/3

111. <
1/6 1/6 1/6
1/6 2/3 1/6
1/2 1/2
1/2

112. 1/2 1/2
1/1

113. 1/1
1/1
1/1

114. TAKEAWAYS

115. CONTENT
INVENTORY
MITPRIORISIERUNG

116. RWDPROTOTYPING

117. WEBSPEEDTEST
PINGDOM.COM

118. BIGSCREEN:1280PX
NORMAL:1024PX
TABLET:768PX
PHONEWIDE:480PX
PHONE:320PX

119. FINGER-FRIENDLY
ICONS:44X44PX

120. LIQUIDLAYOUT
FÜRTILES

121. 12COLUMNLAYOUT
SPALTE60PX
SPACE20PX

122. FRAGEN?

123. @pulpmedia facebook.com/pulpmedia pulpmedia.at