web design trends 2011
DESCRIPTION
Slides to Vitaly Friedman's talk on Web Design Trends 2011 in Berlin, Germany at Webinale.TRANSCRIPT
![Page 1: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/1.jpg)
Vitaly Friedmanwww.smashingmagazine.com
Web Design Trends 2011
![Page 2: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/2.jpg)
![Page 3: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/3.jpg)
Alte Trends = Neue Trends.
![Page 4: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/4.jpg)
V. Friedman | Smashingmagazine.com 13
![Page 5: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/5.jpg)
![Page 6: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/6.jpg)
![Page 7: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/7.jpg)
![Page 8: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/8.jpg)
![Page 9: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/9.jpg)
![Page 10: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/10.jpg)
Darum geht es heute nicht.
![Page 11: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/11.jpg)
...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
“
![Page 12: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/12.jpg)
Es geht um neue Denkweisen und neue Designansätze.
![Page 13: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/13.jpg)
1.ResponsiveWeb Design
![Page 14: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/14.jpg)
The Web’s greatest strength... is the nature of the Web to be flexible.
— John Allsopp, 2004
“
![Page 15: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/15.jpg)
![Page 16: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/16.jpg)
![Page 17: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/17.jpg)
Das ist nicht mehr zeitgemäß.
![Page 18: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/18.jpg)
Umgebungen, in der Webseiten dargestellt werden können, sind nicht mehr überschaubar.
![Page 19: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/19.jpg)
Wir können nicht für jedes Gerät eine zugeschnittene Version der Webseite basteln.
![Page 20: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/20.jpg)
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
“
![Page 21: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/21.jpg)
Eine Technik, mit der Webseiten sich an die verfügbare Umgebung anpassen lassen.
Was ist “Responsive Web Design”?
![Page 22: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/22.jpg)
Umgebung ist gegeben durch Viewport, Ausgabegerät und seine Orientierung.
Was ist “Responsive Web Design”?
![Page 23: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/23.jpg)
Technisch gesehen: fluides Layout mit einer erweiterten progressiven Verbesserung.
Was ist “Responsive Web Design”?
![Page 24: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/24.jpg)
![Page 25: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/25.jpg)
(Ja, IE 6 ist tot.)
![Page 26: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/26.jpg)
![Page 27: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/27.jpg)
Aber zurück zum Thema...
![Page 28: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/28.jpg)
![Page 29: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/29.jpg)
![Page 30: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/30.jpg)
![Page 31: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/31.jpg)
![Page 32: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/32.jpg)
Wie sieht es technisch aus?
![Page 33: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/33.jpg)
![Page 34: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/34.jpg)
Realisiert durch:1. Fluid Layouts (etwa Fluid Grids)2. Fluid Images3. CSS3 Media Queries
Responsive Design: Basics
![Page 35: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/35.jpg)
• Wir liefern Bilder in der maximalen Größe und skalieren sie für jeweilge Auflösungen.
Fluid Images
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
![Page 36: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/36.jpg)
CSS3 Media Queries: Basics
Mit Media Queries kann man u.a. Breite, Höhe und Orieniterung des Geräts “abfragen”.
![Page 37: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/37.jpg)
• In HTML:<meta name="viewport"content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (max-width: 450px)" href="small.css" />
CSS3 Media Queries: Basics
• Oder in CSS (Inline CSS?):@media screen and (orientation: landscape) {
.iPadLandscape {
width: 685px; } }
![Page 38: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/38.jpg)
IE 9.0+Firefox 3.5+Safari 4.0+Chrome 9.0+Opera 10.6+
iOS Safari 3.2+Opera Mini 5.0+ Opera Mobile 10.0+Android Browser 2.1+
Legacy browsers: JavaScript-Bibliotheken, wie etwa css3-mediaqueries.js, respond.js
CSS3 Media Queries: Support
![Page 39: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/39.jpg)
px-basierte Media Queries sind irgendwie nicht das Wahre...
![Page 40: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/40.jpg)
![Page 41: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/41.jpg)
![Page 42: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/42.jpg)
em: relative Einheit, bezogen auf die Schriftgröße66 Zeichen ~ 28-30 em -> optimales Layout
![Page 43: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/43.jpg)
![Page 44: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/44.jpg)
Erhöhe Abstände?...Multi-Column-Layouts?...Sidebar-Navigation?...
![Page 45: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/45.jpg)
Halbiere Abstände?..Vergröße Buttons?..Lineares Layout?..
![Page 46: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/46.jpg)
![Page 47: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/47.jpg)
“Befreites Design”: es macht keinerlei Annahmen über die verfügbare Umgebung.
Responsible Responsive Design
In Praxis:Breakpoint Graphs, Order-Independent Layouts, Content Reference Wireframing.
![Page 48: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/48.jpg)
![Page 49: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/49.jpg)
Responsive Design bezieht sich nicht nur auf Layouts und Bilder, sondern auch auf Videos, Navigation, Buttons, Graphen, Tabellen...
Media Queries: Responsive Alles
![Page 50: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/50.jpg)
![Page 51: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/51.jpg)
![Page 52: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/52.jpg)
Aber es gibt ein Problem mitCSS3 Media Queries...
![Page 53: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/53.jpg)
Da Media Queries CSS sind, werden alle Seiteninhalte immer heruntergeladen, auch wenn sie nicht angezeigt werden.
Media Query ist nicht gut genug
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.
![Page 54: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/54.jpg)
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>
![Page 55: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/55.jpg)
Lösung: Client-side Media Queries + Server-side Media Queries.
Server-Side Media Queries
Erste Ansätze:ResponsiveImages.js (.htaccess, data-fullsrc)
ResponsiveImages-Alt (cookies)
![Page 56: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/56.jpg)
Wir entwickeln uns vom Design von Web- Seiten über das Design von Komponenten zum Design von adaptiven Systemen.
![Page 57: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/57.jpg)
Wie wäre es, wenn wir nicht in Pixel, sondern in Systemen denken, bei denen Designs auf Verhältnissen und Proportionen basieren?..
![Page 58: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/58.jpg)
2.Web DesignFor Mobile
![Page 59: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/59.jpg)
![Page 60: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/60.jpg)
Rasche Verbreitung von Mobile hat uns vor neue Herausforderungen gestellt.
![Page 61: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/61.jpg)
Früher mussten wir nur für wenige Geräte optimieren.
![Page 62: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/62.jpg)
![Page 63: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/63.jpg)
Jetzt für viele.
![Page 64: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/64.jpg)
![Page 65: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/65.jpg)
![Page 66: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/66.jpg)
![Page 67: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/67.jpg)
![Page 68: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/68.jpg)
![Page 69: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/69.jpg)
Alles ist kleiner:Desktop ist XL, Laptop ist L, Mobile ist M.
![Page 70: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/70.jpg)
![Page 71: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/71.jpg)
EffectiveUI Mobile Study, http://www.uxbooth.com/blog/12207/
![Page 72: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/72.jpg)
EffectiveUI Mobile Study, http://www.uxbooth.com/blog/12207/
![Page 73: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/73.jpg)
![Page 74: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/74.jpg)
Mobile Web ist (viel) anders
• Aktive Nutzung in der “Zwischenzeit”Zuhause (84%), Warteschlangen (80%), Unterwegs
• Mobile Nutzung ist (oft) schwierig- Begrenzte Aufmerksamkeit
- Eingabe schwierig
- Schlechte Verbindung
- Beschränkte Bandbreite
- Kein Stromanschluss
- Physischer Kontext
![Page 75: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/75.jpg)
Mmm, wirklich?...
![Page 76: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/76.jpg)
![Page 77: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/77.jpg)
http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
![Page 78: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/78.jpg)
http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
![Page 79: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/79.jpg)
Unter welchen Bedingungen mobile Geräte benutzt werden, lässt sich nicht vorhersagen.
![Page 80: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/80.jpg)
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.
![Page 81: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/81.jpg)
Mobile Version?... Aber Nutzer wollen doch die “Full Version” haben?..
![Page 82: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/82.jpg)
![Page 83: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/83.jpg)
![Page 84: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/84.jpg)
![Page 85: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/85.jpg)
![Page 86: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/86.jpg)
![Page 87: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/87.jpg)
![Page 88: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/88.jpg)
![Page 89: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/89.jpg)
![Page 90: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/90.jpg)
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
“
![Page 91: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/91.jpg)
:-(
![Page 92: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/92.jpg)
:-)
![Page 93: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/93.jpg)
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?
![Page 94: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/94.jpg)
Wie wäre es, wenn wir immer mit einer mobilen Version anfangen?..
![Page 95: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/95.jpg)
Mobile First
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
• Allgemeine Konzeption der Website
![Page 96: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/96.jpg)
Und es gibt genug Tools, mit denen man dies leicht bewerkstelligen kann.
![Page 97: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/97.jpg)
![Page 98: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/98.jpg)
![Page 99: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/99.jpg)
![Page 100: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/100.jpg)
![Page 101: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/101.jpg)
Mobile Websites brauchen oft neue, intelligente Lösungsansätze.
![Page 102: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/102.jpg)
![Page 103: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/103.jpg)
![Page 104: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/104.jpg)
![Page 105: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/105.jpg)
![Page 106: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/106.jpg)
Mobile First: Nützliche Tools
• Mobile UI Design PatternsMobile-Patterns.com, Pttrns.com, Androidpatterns.com
• Prioritized Features ListWeise Features Priorität zu, ohne Layout zu betrachten
![Page 107: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/107.jpg)
![Page 108: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/108.jpg)
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
“
![Page 109: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/109.jpg)
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!
![Page 110: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/110.jpg)
Der wachsende mobile Markt benötigt optimierte mobile Webseiten.
![Page 111: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/111.jpg)
Mobile First hilft, gleich am Anfang den Fokus auf die Nutzererfahrung zu setzen und geräte-unabhängige Websites zu entwickeln.
![Page 112: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/112.jpg)
3 Content Design
![Page 113: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/113.jpg)
“Online Nutzer lesen nicht. Sie scannen nur.”
![Page 114: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/114.jpg)
![Page 115: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/115.jpg)
![Page 116: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/116.jpg)
Das stimmt so nicht.
![Page 117: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/117.jpg)
Nutzer lesen Inhalte, die für sie interessant sind; der Rest wird gescannt.
![Page 118: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/118.jpg)
Doch dafür müssen Inhalte auf ihren Geräten vernünftig präsentiert werden.
![Page 119: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/119.jpg)
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
“
![Page 120: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/120.jpg)
Im Web, Content ist alles was Nutzern sinnvolle Informationen bereitstellt.
Was ist Online Content?
![Page 121: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/121.jpg)
Es ist flüssig: lässt sich veformen und passt sich beliebig an (Fluid pixels).
Online Content: Merkmale
![Page 122: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/122.jpg)
Content ist fragil. Es braucht Sorgfalt, Pflege und Aufmerksamkeit.
Online Content: Merkmale
![Page 123: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/123.jpg)
Online Content ist oft
Online Content: State of the Art
dreckig.
gefesselt.
versteckt.
kurzlebig.
verseucht.
zersplittert.
unbrauchbar.
![Page 124: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/124.jpg)
![Page 125: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/125.jpg)
![Page 126: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/126.jpg)
Kunden haben sich dran gewöhnt, dass sie schlecht behandelt werden.
![Page 127: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/127.jpg)
Als Seitenbetreiber, müssen wir nicht mehr Content, sondern besseren Content liefern...
![Page 128: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/128.jpg)
![Page 129: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/129.jpg)
![Page 130: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/130.jpg)
![Page 131: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/131.jpg)
![Page 132: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/132.jpg)
![Page 133: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/133.jpg)
![Page 134: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/134.jpg)
![Page 135: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/135.jpg)
...oder unsere Kunden werden andere Wege finden, um unsere Inhalte zu transformieren.
![Page 136: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/136.jpg)
![Page 137: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/137.jpg)
Similar to Flattr
![Page 138: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/138.jpg)
![Page 139: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/139.jpg)
Similar to Flattr
![Page 140: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/140.jpg)
Similar to Flattr
![Page 141: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/141.jpg)
Diese Entwicklung ist ein Zeichen der Content Transformation im Web.
![Page 142: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/142.jpg)
Content Transformation im Web
• Leser entfesseln Content auf eigene FaustInstapaper, Readability, Flipboard
• In Social Media kursieren oft m.-LinksDesktop-Traffic sinkt
• Online Branding transformiert sich“Go where the users go”
![Page 143: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/143.jpg)
![Page 144: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/144.jpg)
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
“
![Page 145: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/145.jpg)
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
![Page 146: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/146.jpg)
![Page 147: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/147.jpg)
![Page 148: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/148.jpg)
Wie können wir Content verbessern?
Content FirstMaximum Content, Minimum Everything Else
• Nützliche und attraktive Inhaltefür die Zielgruppe produzieren
• Sorgfältige Aufbereitung und Produktion
• Weniger Marketing, mehr Klartext
• Publishing Policy erarbeiten
• Editorial Work, Guidelines and Styleguides
![Page 149: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/149.jpg)
Content Manager einstellen (!)
Wie können wir Content verbessern?
![Page 150: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/150.jpg)
Guter Content ist
Prinzipien des guten Content Designs
passend.
gepflegt.
nützlich.
deutlich.
skalierbar.
konsistent.
benutzerfreundlich.
• BücherErin Kissane, “The Elements of Content Strategy”Kristina Halvorson, “Content Strategy for the Web”
![Page 151: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/151.jpg)
3 Storytelling.5
![Page 152: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/152.jpg)
Instead of thinking in terms of shadows, gradients and rounded corners, maybe we should be thinking in terms of tension, timing and narrative.
“
![Page 153: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/153.jpg)
Content Design: Storytelling
Neue Möglichkeit der Content Darstellung.Inhalte werden in einer Erzählform mithilfe visueller Mitteln präsentiert.
![Page 154: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/154.jpg)
Content Design: Storytelling
• Technische MittelnBilder, Scrolling, Animation, 3D Video, Parallax,Background Video.
• Prinzip: Do make users think!Interesse wecken, langsames Tempo, Gimmicks.
![Page 155: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/155.jpg)
![Page 156: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/156.jpg)
![Page 157: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/157.jpg)
![Page 158: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/158.jpg)
![Page 159: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/159.jpg)
![Page 160: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/160.jpg)
![Page 161: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/161.jpg)
![Page 162: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/162.jpg)
4 UnsichtbaresDesign
![Page 163: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/163.jpg)
Design, das nicht im Wege steht und Nutzer führt und unterstützt.
![Page 164: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/164.jpg)
Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.
— Jared Spool
“
![Page 168: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/168.jpg)
![Page 170: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/170.jpg)
![Page 171: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/171.jpg)
Sichtbares Design
• ...oft auf Kosten der Angemessenheit.“Trends Trap”, “Design for Design”
• Visuelle KommunikationZiel: Inhalte durch emotionale Reize unterstützen
• Wirkt sehr dominant und einprägend...und kann deshalb sein Ziel leicht verfehlen.
![Page 172: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/172.jpg)
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
“
![Page 173: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/173.jpg)
Unsichtbares Design
• Fokus auf Lösung von ProblemenTrends werden gezielt ignoriert, Usability first
• Redesign nur wenn absolut notwendigErzwinge, dass das Design unsichtbar wird
• “Design the experience, visual is an afterthought”Strikte Trennung von Funktion und Darstellung
![Page 174: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/174.jpg)
![Page 175: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/175.jpg)
![Page 176: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/176.jpg)
![Page 177: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/177.jpg)
![Page 178: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/178.jpg)
![Page 179: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/179.jpg)
![Page 180: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/180.jpg)
![Page 181: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/181.jpg)
![Page 182: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/182.jpg)
Unsichtbares Design löst Probleme.Dies reicht jedoch nicht immer aus.
![Page 183: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/183.jpg)
Good designers can see both the forest and the trees, the visible and invisible halves of design.
— Francisco Inchauste
“
![Page 184: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/184.jpg)
![Page 185: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/185.jpg)
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
![Page 186: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/186.jpg)
![Page 187: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/187.jpg)
Danke
für Ihre Aufmerksamkeit!
![Page 188: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/188.jpg)
@smashingmag
![Page 189: Web Design Trends 2011](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7ee244a795921328b463b/html5/thumbnails/189.jpg)
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)