1. Web Design Trends 2011
Vitaly Friedman
www.smashingmagazine.com

3. Alte Trends = Neue Trends.

4. V. Friedman | Smashingmagazine.com 13

10. Darum geht es heute nicht.

11. “
...I see the Web getting more focused
on ideas and moving away from
technologies as the primary focus.
Now we’re able to engage in
questions about concept, ideas,
delivery, experience.
— Matthew Smith, SquaredEye

12. Es geht um neue Denkweisen und
neue Designansätze.

13. 1.
Responsive
Web Design

14. “
The Web’s greatest strength... is the
nature of the Web to be flexible.
— John Allsopp, 2004

17. Das ist nicht mehr zeitgemäß.

18. Umgebungen, in der Webseiten
dargestellt werden können, sind nicht
mehr überschaubar.

19. Wir können nicht für jedes Gerät eine
zugeschnittene Version der Webseite
basteln.

20. “
Instead of building separate sites for
each device, we build one site that
adapts to each device. That’s the idea
behind Responsive Design.
— Chris Armstrong

21. Was ist “Responsive Web Design”?
Eine Technik, mit der Webseiten sich an die
verfügbare Umgebung anpassen lassen.

22. Was ist “Responsive Web Design”?
Umgebung ist gegeben durch Viewport,
Ausgabegerät und seine Orientierung.

23. Was ist “Responsive Web Design”?
Technisch gesehen: fluides Layout mit einer
erweiterten progressiven Verbesserung.

25. (Ja, IE 6 ist tot.)

27. Aber zurück zum Thema...

32. Wie sieht es technisch aus?

34. Responsive Design: Basics
Realisiert durch:
1. Fluid Layouts (etwa Fluid Grids)
2. Fluid Images
3. CSS3 Media Queries

35. Fluid Images
• Wir liefern Bilder in der maximalen Größe
und skalieren sie für jeweilge Auflösungen.
HTML: <img src="image.jpg" alt="Desc" />
CSS: img { max-width: 100%; }
ie.css: img { width: 100%; }
• Weitere Ansätze:
Sliding Composite Images (Zomigi.com), Image Crop
(Zomigi.com), ResponsiveImages.js, ResponsiveImages-alt

36. CSS3 Media Queries: Basics
Mit Media Queries kann man u.a. Breite,
Höhe und Orieniterung des Geräts “abfragen”.

37. CSS3 Media Queries: Basics
• In HTML:
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (max-
width: 450px)" href="small.css" />
• Oder in CSS (Inline CSS?):
@media screen and (orientation: landscape) {
.iPadLandscape {
width: 685px; } }

38. CSS3 Media Queries: Support
IE 9.0+ iOS Safari 3.2+
Firefox 3.5+ Opera Mini 5.0+ Opera
Safari 4.0+ Mobile 10.0+
Chrome 9.0+ Android Browser 2.1+
Opera 10.6+
Legacy browsers: JavaScript-Bibliotheken, wie etwa
css3-mediaqueries.js, respond.js

39. px-basierte Media Queries sind
irgendwie nicht das Wahre...

42. em: relative Einheit, bezogen auf die Schriftgröße
66 Zeichen ~ 28-30 em -> optimales Layout

44. Erhöhe Abstände?...
Multi-Column-Layouts?...
Sidebar-Navigation?...

45. Halbiere Abstände?..
Vergröße Buttons?..
Lineares Layout?..

47. Responsible Responsive Design
“Befreites Design”: es macht keinerlei
Annahmen über die verfügbare Umgebung.
In Praxis:
Breakpoint Graphs, Order-Independent Layouts,
Content Reference Wireframing.

49. Media Queries: Responsive Alles
Responsive Design bezieht sich nicht nur auf
Layouts und Bilder, sondern auch auf Videos,
Navigation, Buttons, Graphen, Tabellen...

52. Aber es gibt ein Problem mit
CSS3 Media Queries...

53. Media Query ist nicht gut genug
Da Media Queries CSS sind, werden alle
Seiteninhalte immer heruntergeladen, auch
wenn sie nicht angezeigt werden.
U.a. auch Flash und HD-Filme sowie JavaScripts und große Bilder. Bis auf Opera, laden Browser immer
Elemente, die mit display: none ausgeblendet werden.

54. Theoretische Lösung...
<img alt="Blume im Garten">
<source src="blume-klein.svg" width="150" height="100"
attr="max-device-width: 320px" />
<source src="blume.jpg" width="295" height="200" />
<source src="blume-gross.jpg" width="420" height="277"
attr="min-width: 900px" />
</img>

55. Server-Side Media Queries
Lösung: Client-side Media Queries + Server-
side Media Queries.
Erste Ansätze:
ResponsiveImages.js (.htaccess, data-fullsrc)
ResponsiveImages-Alt (cookies)

56. Wir entwickeln uns vom Design von Web-
Seiten über das Design von Komponenten
zum Design von adaptiven Systemen.

57. Wie wäre es, wenn wir nicht in Pixel, sondern
in Systemen denken, bei denen Designs auf
Verhältnissen und Proportionen basieren?..

58. 2.
Web Design
For Mobile

60. Rasche Verbreitung von Mobile hat uns
vor neue Herausforderungen gestellt.

61. Früher mussten wir nur für wenige
Geräte optimieren.

63. Jetzt für viele.

69. Alles ist kleiner:
Desktop ist XL, Laptop ist L, Mobile ist M.

71. EffectiveUI Mobile Study, http://www.uxbooth.com/blog/12207/

72. EffectiveUI Mobile Study, http://www.uxbooth.com/blog/12207/

74. Mobile Web ist (viel) anders
• Mobile Nutzung ist (oft) schwierig
- Begrenzte Aufmerksamkeit
- Eingabe schwierig
- Schlechte Verbindung
- Beschränkte Bandbreite
- Kein Stromanschluss
- Physischer Kontext
• Aktive Nutzung in der “Zwischenzeit”
Zuhause (84%), Warteschlangen (80%), Unterwegs

75. Mmm, wirklich?...

77. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

78. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

79. Unter welchen Bedingungen mobile
Geräte benutzt werden, lässt sich nicht
vorhersagen.

80. Mobile ist da. Wir müssen es
akzeptieren und in Webdesign (mal
wieder) umdenken. Wir müssen
anfangen, uns Gedanken über
mobile Nutzer zu machen.

81. Mobile Version?... Aber Nutzer wollen doch
die “Full Version” haben?..

90. “
Most websites, especially informa-
tional ones, focus more on what they
want to show rather than what the
user wants to see when they get there.
— Chris Coyier

91. :-(

92. :-)

93. Design for Mobile in Praxis
• Der Weg sollte einfach sein:
Desktop version + Media Queries = Mobile version
• Aber viele Geräte unterstützen Queries nicht...
Desktop version = Mobile version (Ouch!)
• ...Aber ist es überhaupt der richtige Ansatz?

94. Wie wäre es, wenn wir immer mit einer
mobilen Version anfangen?..

95. Mobile First
• Allgemeine Konzeption der Website
1. Mobile-first layout und IA
2. Grundlegendes CSS Gerüst
3. Enhanced CSS mit JavaScript back-up
4. Baue die Desktop-Version auf (ggf. neue Features)
5. Responsive Content (Bilder, Tabellen, Werbung)
6. Performance Optimierung (display: none ist böse)
7. Testing ist müüüüüüühsam
• Neuer Content wird erst in Mobile eingefügt

96. Und es gibt genug Tools, mit denen man
dies leicht bewerkstelligen kann.

101. Mobile Websites brauchen oft neue,
intelligente Lösungsansätze.

106. Mobile First: Nützliche Tools
• Prioritized Features List
Weise Features Priorität zu, ohne Layout zu betrachten
• Mobile UI Design Patterns
Mobile-Patterns.com, Pttrns.com, Androidpatterns.com

108. “
Losing 80% of your screen space forces
you to focus. You need to make sure
that what stays on the screen is the
most important set of features. There
simply isn’t room for content of
questionable value. You need to know
what matters most.
— Mike Rundle

109. Mobile Web ist innovativ
• Neue Gesichtspunkte
- Bildschirmauflösung und Pixeldichte
- Touch targets and sizes
- Push: Real-time notifications
- Gesten, Biometrik, Haptik
- Application Cache und Local Storage
- Geolocation, Gyroscope, Accelerometer
Bald mit HTML5 Device APIs möglich!

110. Der wachsende mobile Markt benötigt
optimierte mobile Webseiten.

111. Mobile First hilft, gleich am Anfang den
Fokus auf die Nutzererfahrung zu setzen und
geräte-unabhängige Websites zu entwickeln.

112. 3 Content
Design

113. “Online Nutzer lesen nicht. Sie scannen nur.”

116. Das stimmt so nicht.

117. Nutzer lesen Inhalte, die für sie
interessant sind; der Rest wird gescannt.

118. Doch dafür müssen Inhalte auf ihren
Geräten vernünftig präsentiert werden.

119. “
2011 is the year of the reader. If so, we
can also expect an overdue backlash
against reader-hostile practices like
splitting content across multiple
pages and intrusive advertising.
— Cennydd Bowles

120. Was ist Online Content?
Im Web, Content ist alles was Nutzern
sinnvolle Informationen bereitstellt.

121. Online Content: Merkmale
Es ist flüssig: lässt sich veformen und passt
sich beliebig an (Fluid pixels).

122. Online Content: Merkmale
Content ist fragil. Es braucht Sorgfalt, Pflege
und Aufmerksamkeit.

123. Online Content: State of the Art
Online Content ist oft dreckig.
gefesselt.
versteckt.
kurzlebig.
verseucht.
zersplittert.
unbrauchbar.

126. Kunden haben sich dran
gewöhnt, dass sie
schlecht behandelt
werden.

127. Als Seitenbetreiber, müssen wir nicht mehr
Content, sondern besseren Content liefern...

135. ...oder unsere Kunden werden andere Wege
finden, um unsere Inhalte zu transformieren.

137. Similar to Flattr

139. Similar to Flattr

140. Similar to Flattr

141. Diese Entwicklung ist ein Zeichen der
Content Transformation im Web.

142. Content Transformation im Web
• Leser entfesseln Content auf eigene Faust
Instapaper, Readability, Flipboard
• In Social Media kursieren oft m.-Links
Desktop-Traffic sinkt
• Online Branding transformiert sich
“Go where the users go”

144. “
The existence of these new reader-
empowering tools should be taken as
a warning …and a challenge—how
can we design for our content in such
a way that the reader won’t need or
want to reach for Readability or
Instapaper?
— Jeremy Keith

145. Wie können wir Content verbessern?
Adaptive UX (“Content ist eine App”)
Baseline erstellen + Kontextauswahl bereitstellen:
• Low Bandwidth Mode
• Stress Mode (Zeitdruck, Akku fast leer)
• Thumb Mode
• Distraction Mode
• Privacy Mode
• Verschiedene Lesepräferenzen
• ePUB, Mobipocket-Versionen

148. Wie können wir Content verbessern?
Content First
Maximum Content, Minimum Everything Else
• Nützliche und attraktive Inhalte
für die Zielgruppe produzieren
• Sorgfältige Aufbereitung und Produktion
• Weniger Marketing, mehr Klartext
• Publishing Policy erarbeiten
• Editorial Work, Guidelines and Styleguides

149. Wie können wir Content verbessern?
Content Manager einstellen (!)

150. Prinzipien des guten Content
Designs
Guter Content ist passend.
gepflegt.
nützlich.
deutlich.
skalierbar.
konsistent.
benutzerfreundlich.
• Bücher
Erin Kissane, “The Elements of Content Strategy”
Kristina Halvorson, “Content Strategy for the Web”

151. 3
.5
Storytelling

152. “
Instead of thinking in terms of
shadows, gradients and rounded
corners, maybe we should be thinking
in terms of tension, timing and
narrative.

153. Content Design: Storytelling
Neue Möglichkeit der Content Darstellung.
Inhalte werden in einer Erzählform mithilfe
visueller Mitteln präsentiert.

154. Content Design: Storytelling
• Prinzip: Do make users think!
Interesse wecken, langsames Tempo, Gimmicks.
• Technische Mitteln
Bilder, Scrolling, Animation, 3D Video, Parallax,
Background Video.

162. 4 Unsichtbares
Design

163. Design, das nicht im Wege steht und
Nutzer führt und unterstützt.

164. “
Good design, when it’s done well,
becomes invisible. It’s only when it’s
done poorly that we notice it.
— Jared Spool

165. http://www.ruhotenuf.ca/

166. http://www.ruhotenuf.ca/

167. http://www.ruhotenuf.ca/

169. http://www.ruhotenuf.ca/

171. Sichtbares Design
• Visuelle Kommunikation
Ziel: Inhalte durch emotionale Reize unterstützen
• ...oft auf Kosten der Angemessenheit.
“Trends Trap”, “Design for Design”
• Wirkt sehr dominant und einprägend
...und kann deshalb sein Ziel leicht verfehlen.

172. “
The unhealthy preoccupation with
contests and awards is a common
mistake that leads designers into
unprofessional practices and distorts
functional ideals. [...] Most of this
activity hovers around decoration
and daring.
— Andy Rutledge

173. Unsichtbares Design
• Fokus auf Lösung von Problemen
Trends werden gezielt ignoriert, Usability first
• “Design the experience, visual is an afterthought”
Strikte Trennung von Funktion und Darstellung
• Redesign nur wenn absolut notwendig
Erzwinge, dass das Design unsichtbar wird

182. Unsichtbares Design löst Probleme.
Dies reicht jedoch nicht immer aus.

183. “
Good designers can see both the forest
and the trees, the visible and invisible
halves of design.
— Francisco Inchauste

185. Zusammenfassung
• Responsive Web Design
• Media Queries (client-side, server-side)
• Goldlöckchen und die drei Bären
• Design von adaptiven Systemen
• Mobile First
• Maximum Content, Minimum Navigation
• Storytelling
• Unsichtbares Design

187. Danke
für Ihre Aufmerksamkeit!

188. @smashingmag

189. Credits
• Hauptbild: Craig Henry, http://cargocollective.com/
hellocraig#1315128/Battle-at-Meiji-Temples
• Stephen Hay, “Meta layout: a closer look at media queries”,
http://www.slideshare.net/stephenhay/mobilism2011
• “What a difference Cantilever Shoes make (Mar, 1922) “- http://
blog.modernmechanix.com/2011/04/28/what-a-difference-cantilever-
shoes-make/
• Wiremolecules, http://wireframes.linowski.ca/2010/05/
wiremolecules/
• Luke Wroblewski’s Slides (http://www.lukew.com)
• Yiibu Mobile Slides (http://www.slideshare.net/yiibu)