Vitaly Friedmanwww.smashingmagazine.com

Web Design Trends 2011

Alte Trends = Neue Trends.

V. Friedman | Smashingmagazine.com 13

Darum geht es heute nicht.

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

“

Es geht um neue Denkweisen und neue Designansätze.

1.ResponsiveWeb Design

The Web’s greatest strength... is the nature of the Web to be flexible.

— John Allsopp, 2004

“

Das ist nicht mehr zeitgemäß.

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

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

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

“

Eine Technik, mit der Webseiten sich an die verfügbare Umgebung anpassen lassen.

Was ist “Responsive Web Design”?

Umgebung ist gegeben durch Viewport, Ausgabegerät und seine Orientierung.

Was ist “Responsive Web Design”?

Technisch gesehen: fluides Layout mit einer erweiterten progressiven Verbesserung.

Was ist “Responsive Web Design”?

(Ja, IE 6 ist tot.)

Aber zurück zum Thema...

Wie sieht es technisch aus?

Realisiert durch:1. Fluid Layouts (etwa Fluid Grids)2. Fluid Images3. CSS3 Media Queries

Responsive Design: Basics

• 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

CSS3 Media Queries: Basics

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

• 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; } }

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

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

em: relative Einheit, bezogen auf die Schriftgröße66 Zeichen ~ 28-30 em -> optimales Layout

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

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

“Befreites Design”: es macht keinerlei Annahmen über die verfügbare Umgebung.

Responsible Responsive Design

In Praxis:Breakpoint Graphs, Order-Independent Layouts, Content Reference Wireframing.

Responsive Design bezieht sich nicht nur auf Layouts und Bilder, sondern auch auf Videos, Navigation, Buttons, Graphen, Tabellen...

Media Queries: Responsive Alles

Aber es gibt ein Problem mitCSS3 Media Queries...

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.

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>

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)

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

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

2.Web DesignFor Mobile

Rasche Verbreitung von Mobile hat uns vor neue Herausforderungen gestellt.

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

Jetzt für viele.

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

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

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

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

Mmm, wirklich?...

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

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

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

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.

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

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

“

:-(

:-)

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?

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

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

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

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

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

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

“

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!

Der wachsende mobile Markt benötigt optimierte mobile Webseiten.

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

3 Content Design

“Online Nutzer lesen nicht. Sie scannen nur.”

Das stimmt so nicht.

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

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

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

“

Im Web, Content ist alles was Nutzern sinnvolle Informationen bereitstellt.

Was ist Online Content?

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

Online Content: Merkmale

Content ist fragil. Es braucht Sorgfalt, Pflege und Aufmerksamkeit.

Online Content: Merkmale

Online Content ist oft

Online Content: State of the Art

dreckig.

gefesselt.

versteckt.

kurzlebig.

verseucht.

zersplittert.

unbrauchbar.

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

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

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

Similar to Flattr

Similar to Flattr

Similar to Flattr

Diese Entwicklung ist ein Zeichen der Content Transformation im Web.

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”

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

“

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

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

Content Manager einstellen (!)

Wie können wir Content verbessern?

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”

3 Storytelling.5

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

“

Content Design: Storytelling

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

Content Design: Storytelling

• Technische MittelnBilder, Scrolling, Animation, 3D Video, Parallax,Background Video.

• Prinzip: Do make users think!Interesse wecken, langsames Tempo, Gimmicks.

4 UnsichtbaresDesign

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

Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.

— Jared Spool

“

http://www.ruhotenuf.ca/

http://www.ruhotenuf.ca/

http://www.ruhotenuf.ca/

http://www.ruhotenuf.ca/

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.

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

“

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

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

Good designers can see both the forest and the trees, the visible and invisible halves of design.

— Francisco Inchauste

“

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

Danke

für Ihre Aufmerksamkeit!

@smashingmag

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)