SlideShare ist ein Scribd-Unternehmen logo
Web Design Trends 2011



                  Vitaly Friedman
        www.smashingmagazine.com
Web Design Trends 2011
Alte Trends = Neue Trends.
V. Friedman | Smashingmagazine.com   13

Empfohlen für Sie

Four pillars of visualization - by Noah Iliinsky
Four pillars of visualization - by Noah IliinskyFour pillars of visualization - by Noah Iliinsky
Four pillars of visualization - by Noah Iliinsky

This document outlines Noah Iliinsky's four pillars of visualization success: purpose, content, structure, and formatting. It discusses each pillar in detail and provides examples to illustrate how to apply the pillars when creating effective visualizations. The key aspects are having a clear purpose that dictates the relevant content, using appropriate structures like positioning and axes to reveal relationships in the data, and applying functional formatting for the intended audience.

noah iliinskyixda torontovisualization
MongoDB Aggregation MongoSF May 2011
MongoDB Aggregation MongoSF May 2011MongoDB Aggregation MongoSF May 2011
MongoDB Aggregation MongoSF May 2011

This document discusses MongoDB's new aggregation framework, which provides a more performant and declarative way to perform data aggregation tasks compared to MapReduce. The framework includes pipeline operations like $match, $project, and $group that allow filtering, reshaping, and grouping documents. It also features an expression language for computed fields. The initial release will support aggregation pipelines and sharding, with future plans to add more operations and expressions.

mongodbmongosfaggregation
How & where to start iOS development?
How & where to start iOS development?How & where to start iOS development?
How & where to start iOS development?

Overview of starting iOS development. Focused on beginners who want to develop iOS applications and don't know where to start?

ipadiosprogramming
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

4 pillars of visualization & communication by Noah Iliinsky
4 pillars of visualization & communication by Noah Iliinsky4 pillars of visualization & communication by Noah Iliinsky
4 pillars of visualization & communication by Noah Iliinsky

A version of my standard "how to do visualization" talk from summer 2016. This version points out that the same process works for most modes of communication as well.

audiencecustomervisualization
The Future Of Television
The Future Of TelevisionThe Future Of Television
The Future Of Television

With growing influence of web and more time spend by users staying connected - what would be the future of television? This is my guess how the Television will adapt to going influence of Internet.

 
von P J
future tvtelevision programminginternet tv
Selección de Proyectos de comunicación gráfica en estrategias de marketing
Selección de Proyectos de  comunicación gráfica en estrategias de marketingSelección de Proyectos de  comunicación gráfica en estrategias de marketing
Selección de Proyectos de comunicación gráfica en estrategias de marketing

Selección de proyectos de Sergio Escalona, especialista en comunicación gráfica de estrategias de marketing aplicadas al producto.

marketingpromocionescomunicación
Web Design Trends 2011
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.

Empfohlen für Sie

Migratie naar de Cloud (eMail)
Migratie naar de Cloud (eMail)Migratie naar de Cloud (eMail)
Migratie naar de Cloud (eMail)

Presentatie over het migreren van email naar Microsoft Office365 met praktische voorbeelden en cases gepresenteerd op I'MTECHReady sessie op 29/10/2013.

migration office365 cloud microsoft azure
Sulaimani dental journal vol1 issue1 2014
Sulaimani dental journal vol1 issue1 2014Sulaimani dental journal vol1 issue1 2014
Sulaimani dental journal vol1 issue1 2014

This document is the first issue of the Sulaimani Dental Journal, published by the University of Sulaimani School of Dentistry. It contains the editorial, instructions for authors, and table of contents for the first issue. The editorial expresses gratitude to contributors and calls for further research submissions. The instructions for authors section outlines the guidelines for submitting manuscripts, including formatting, sections, references style, figures/tables, and copyright. The table of contents lists the first five papers in the journal issue, which are brief research studies on various dental topics related to the local Kurdish population.

sulaimanidental journaldentistry.
Global Development Report 2015
Global Development Report 2015Global Development Report 2015
Global Development Report 2015

The document provides an overview of prime residential development trends and insights from a global perspective. It highlights key developments that are influencing trends in London and New York, noting that London saw a 138% increase in prime prices over 10 years while Miami boasts the highest gross residential yield of 6.1%. The report also discusses maximizing returns through Knight Frank's 10 step development process and compares market performance in various cities.

1.
 Responsive
 Web Design
“
    The Web’s greatest strength... is the
    nature of the Web to be flexible.


                      — John Allsopp, 2004
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Brand New Brands : ¿necesitamos nuevas marcas?
Brand New Brands : ¿necesitamos nuevas marcas?Brand New Brands : ¿necesitamos nuevas marcas?
Brand New Brands : ¿necesitamos nuevas marcas?

La conferencia discute la construcción de nuevas marcas y cómo hacerlo de manera más eficiente. Plantea que las marcas deben funcionar como "puentes" que facilitan la conexión entre las necesidades de los consumidores y las ofertas de productos y servicios. Las nuevas marcas sólo se necesitan cuando las marcas existentes ya no pueden satisfacer a los consumidores de manera efectiva, o cuando se están explorando nuevos territorios de mercado. El proceso de construcción de marcas debe centrarse en comprender a los consumidores y abordar sus expectativ

[Case study] Benton Public Utility District: Reducing labor costs while impro...
[Case study] Benton Public Utility District: Reducing labor costs while impro...[Case study] Benton Public Utility District: Reducing labor costs while impro...
[Case study] Benton Public Utility District: Reducing labor costs while impro...

Project Type: Operational utility solutions Applications: Provide a graphical view of a utility’s infrastructure and tools that support cost reduction through simplified planning, analysis and operational response times.

utilitiesarcfmgis
Applied Motion Products STM integrated motor product presentation march 2009
Applied Motion Products  STM integrated motor product presentation march 2009Applied Motion Products  STM integrated motor product presentation march 2009
Applied Motion Products STM integrated motor product presentation march 2009

The document provides an overview of the STM23 Series stepper motor drives. It describes that the STM23 drives have motor driver electronics mounted directly onto NEMA 23 stepper motors. It outlines the frame sizes, control options, stack lengths, communication ports, encoder options, part numbering system, inputs/outputs, and power supply voltage specifications of the STM23 drives.

servo systemsstepper systemsmachine control
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

Empfohlen für Sie

Historia De Los Ordenadores 2
Historia De Los Ordenadores 2Historia De Los Ordenadores 2
Historia De Los Ordenadores 2

El documento resume la historia del desarrollo de las calculadoras y los ordenadores, desde las primeras herramientas de cálculo manual hasta los ordenadores modernos. Comienza con las primeras calculadoras mecánicas en el siglo XVII y continúa describiendo hitos clave como la máquina analítica de Charles Babbage en 1834, la creación de IBM en 1924 y el desarrollo de los primeros ordenadores electrónicos como ENIAC en 1947. Finaliza describiendo las cinco generaciones de ordenadores y el aumento exponencial de la velocidad de pro

Curso Ventas con PNL Barcelona Talavera
Curso Ventas con PNL Barcelona TalaveraCurso Ventas con PNL Barcelona Talavera
Curso Ventas con PNL Barcelona Talavera

El documento resume un curso de ventas y excelencia comercial con PNL impartido en Castilla La Mancha. El curso enseñó a vendedores nuevas herramientas de la PNL para mejorar sus habilidades de ventas y ayudar a las empresas a aumentar sus ventas. Los participantes aprendieron cuatro herramientas básicas de la PNL y practicaron su aplicación. El curso fue un éxito y los organizadores planean ofrecer otra sesión pronto.

pnl ventaspnl ciebarcelonapnl
38th FARO - Brochure 2014
38th FARO - Brochure 201438th FARO - Brochure 2014
38th FARO - Brochure 2014

The document summarizes the International Commodities Club (FARO) conference taking place from April 3-4, 2014 in Maranello, Italy. FARO is an advisory group for commodities users that holds two main two-day meetings each year along with other seminars and webinars. The conference will include sessions on international metals markets, commodities outlook, macroeconomic context, and networking activities. Participants can also experience driving a Ferrari on a racetrack and participate in golf or gastronomy tours of the local area.

#museo_ferrari#meeting#faro
Was ist “Responsive Web Design”?

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.
Web Design Trends 2011

Empfohlen für Sie

Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014

This document provides an overview and analysis of web design trends for 2013-2014. It examines 11 major trends, including the era of content-centric design, storytelling, responsive websites, flat design, parallax scrolling, video backgrounds, and non-standard navigation. For each trend, 15 examples of websites demonstrating that trend are provided and analyzed. The document suggests that these trends reflect an increased focus on usability, content, and adapting to different devices and screen sizes. It aims to identify popular patterns that can inspire web designers.

design tutorialsgraphic designweb design ebook
Flow Fiber Ppt 2007
Flow  Fiber Ppt 2007Flow  Fiber Ppt 2007
Flow Fiber Ppt 2007

Propriatary technology for manufacture of solid or hollow optical fiber from a soft glass melt in arbitrary lengths appropriate for telcom or laser fabrication applications. Contact Flow Pharma, Inc. 650 462 1440

liquid extrusionpolycrystalline fiberhollow fiber
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process

Responsive Webdesign ist grad der heiße Scheiß, allerdings ist Responsive Webdesign mehr, als eine Desktopwebsite in eine mobile Ansicht zu quetschen. Es muss ein neuer Prozess her. Der alte Workflow "Auftrag bekommen > Recherche > Design erstellen > Abnahme > Design umsetzen" funktioniert so nicht mehr. Im Responsive-Webdesign-Prozess müssen alle Beteiligten eines Webprojekts von der ersten Sekunde an enger zusammenarbeiten. Zudem müssen frühzeitige und häufige Testphasen und Implementierungsstrategien gefunden werden.

workflowresponsive web designprocess
(Ja, IE 6 ist tot.)
Web Design Trends 2011
Aber zurück zum Thema...
Web Design Trends 2011

Empfohlen für Sie

Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube

Vortrag vom 18.07.2013 im Rahmen des Langen Donnerstags in Dortmund. Thema war die technische Seite von responsive Design, sowie das vorstellen nützlicher Tools und Seiten. Links zu den genannten Seiten und Tools gibt es gebündelt unter www.falconwhite.de/unter-der-haube

Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)

Das Whitepaper gibt einen Überblick über Chancen und Herausforderungen bei der Einführung von Reponsive Webdesign. Welche Möglichkeiten bringt die Anpassung eines Webauftritts an verschiedene Endgeräte mit sich? Wie kann ein einheitliches Nutzererlebnis geschaffen werden? Welche Besonderheiten bringen die einzelnen Projektphasen mit sich?

designresponsive designresponsive web design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design

Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte: 3 Implementierungsvarianten werden aufgezeigt & beurteilt: a) Responsive Design b) „Eigene“ mobile Website(s) und c) Mobile Applikation(en)

multichannelmobilecms
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011
Wie sieht es technisch aus?

Empfohlen für Sie

Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.

Namics Fachveranstaltung vom 3. März 2011. Next Generation Content Management. Mobile und Trends. Von: Johannes Waibel, Senior Consultant, Namics AG Marcel Albertin, CTO und Partner, Namics AG

namicsmobile und trendsfachveranstaltung
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters

Wie aus: "Wir wollen einen Relaunch" eine nutzerorientierte, responsive Website wird, und welche Herausforderungen dabei auftreten. Eine Betrachtung des Prozesse, der Tools und Ergebnisse aus Agentursicht. http://www.uxhh.de/roundtable/archiv/index.html#Feb14

ux roundtableuxhhconcept
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)

Was sind die Trends im Webdesign 2014? Die erste Ausgabe des datenwerk Kochbuchs gibt einen Überblick und zeigt Beispiele zu grundlegenden Trends im Webdesign der heutigen Zeit.

designdesigntrendstrends
Web Design Trends 2011
Responsive Design: Basics

Realisiert durch:
1. Fluid Layouts (etwa Fluid Grids)
2. Fluid Images
3. CSS3 Media Queries
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
CSS3 Media Queries: Basics

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

Empfohlen für Sie

Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
kirche im webkirche 2.0responisve webdesign
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot

Workshop auf der Jahrestagung 2014 des Bundesverbands Hochschulkommunikation in Konstanz, am 25.9.2014. Immer mehr Menschen sind unterwegs online. Muss deshalb jedes digitale Angebot auch mobil nutzbar sein? Langfristig: Ja! Mittel- und kurzfristig wäre es zwar wünschenswert, ist aber in vielen Hochschulen unrealistisch. Denn wer seinen letzten Website-Relaunch 2012 ins Netz gestellt hat, hatte das Thema bei Projektstart noch nicht auf dem Schirm. Heute bringt der massive Ruf nach „Mobilmachung“ viele Kommunikationsabteilungen unter Zugzwang. Was tun, wenn keine Mittel für einen erneuten Relaunch vorhanden sind? Wenn zudem die IT-Abteilung meldet, dass die technischen Grundlagen für responsives Design nicht gegeben sind? In unserem Workshop möchten wir verschiedene Wege zum mobilen Internetangebot vorstellen und miteinander vergleichen. Wir zeigen gelungene Beispiel und geben einen kurzen Einblick in die technischen Grundlagen, ohne zu sehr ins Detail zu gehen. Und wir diskutieren das Für und Wider pragmatischer Übergangslösungen.

hochschulemobilerwd
Responsive Design
Responsive DesignResponsive Design
Responsive Design

Präsentation vom 18. Webdev Fulda Treffen: http://webdevfulda.de/

csswebdesignresponsive
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; } }
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
px-basierte Media Queries sind
irgendwie nicht das Wahre...
Web Design Trends 2011

Empfohlen für Sie

Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das Web

Von der Werbestrategie zur Umsetzung von Erfolgreichen Webseits. Was muss ich bei Fotos, Inhalten, Usability, Text usw. beachten. Tipps für die Praxis. Viele Links und Hinweise. Vortrag für http://www.etourism-fitness.com. EU Projekt zur Förderung von eTourismus. Mehr Gäste durch das Web

unddasusability
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface

German Talk held at the iOS DevCon '12 in Berlin.

IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011

Praxis-Bericht über Entstehung der ImmobilienScout24-App. Präsentation-Inhalt lässt sich als Leitfaden für die Entwicklung von Apps im Allgemeinen verwenden.

appmobileimmobilien
Web Design Trends 2011
em: relative Einheit, bezogen auf die Schriftgröße
66 Zeichen ~ 28-30 em -> optimales Layout
Web Design Trends 2011
Erhöhe Abstände?...
Multi-Column-Layouts?...
Sidebar-Navigation?...

Empfohlen für Sie

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design

Responsive Web Design ist mehr als nur der Einsatz flexibler Raster und Break Points. Wir zeigen die Elemente von Responsive Web Design und erklären den Unterschied zum Adaptive Design. Wir zeigen den Responsive Design Prozess, der sich vom klassischen Designprozesses zum Beispiel durch "mobile first" und den iterativen und agilen Ablauf.

responsive web designagileuser experience
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile

Die Antwort auf die Herausforderungen des mobilen Webs ist Responsive Design. Doch was verbirgt sich hinter diesem neuen Design Ansatz und welches sind die Benefits die ich daraus ziehe? Referent: Dani Kalt (CEO, CS2 AG)

responsive web designcms|sessioncms
WCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der DingeWCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der Dinge

Slides meines Vortrags bei der ShareConf 2013 in Düsseldorf: Der Web Content Management (WCM) Markt wandelt sich 2013 wohl stärker denn je und die Rolle von WCM in der Unternehmens-IT wird an Gewicht gewinnen. Viele WCM-Verantwortliche suchen nach neuen Strategien und Produkten, um der veränderten Lage Rechnung zu tragen. WCM Produkte die sich nicht anpassen sind vom Aussterben bedroht. Der Vortrag will den aktuellen Stand im Markt aufzeigen, die Teilnehmer für die anstehende Herausforderungen sensibilisieren und Orientierungshilfen bieten.

computers and internetwcmfuture
Halbiere Abstände?..
Vergröße Buttons?..
Lineares Layout?..
Web Design Trends 2011
Responsible Responsive Design

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

In Praxis:
Breakpoint Graphs, Order-Independent Layouts,
Content Reference Wireframing.
Web Design Trends 2011

Empfohlen für Sie

SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD

Das Konzept: Für jeden verständlich und übersichtlich, gemacht für Designer, Template-Entwickler und IT. Alle Anforderungen, alle Besonderheiten für mobile Optimierung müssen spezifiziert sein und dabei soll alles auch noch so einfach wie möglich aufbereitet sein. Gar nicht so einfach, oder?

Web Content - Wer nichts zu sagen hat, bleibt draussen
Web Content - Wer nichts zu sagen hat, bleibt draussenWeb Content - Wer nichts zu sagen hat, bleibt draussen
Web Content - Wer nichts zu sagen hat, bleibt draussen

Dabei sein ist im Internet lange nicht mehr alles. Spätestens seit in sozialen Medien jeder Publizist sein kann und will, müssen wir als Leser laufend Relevantes von Irrelevantem trennen. Wir gehen radikaler und ungeduldiger mit Webinhalten um, und lassen alles links liegen, was werbend, nicht schnell erfassbar oder nicht zielführend ist. Selbst Suchmaschinen steigern Ihre Ansprüche. Für Unternehmen ist der Umgang mit Online-Inhalten oft eine neue Herausforderung: Heute werden Texte aus Print-Broschüren oder Katalogen 1:1 auf die Website kopiert. Webmaster sind aber oftmals nur für das Publizieren der Inhalte zuständig; was fehlt sind Redaktions-Ressourcen, Prozesse und das Wissen über Online-Texte.

web-contentwebtextentexten
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11

Planung, Konzeption und Umsetzung einer Mobilen Seite. Session vom Barcamp Hannover 2011

barcampconvisualmobile phone
Media Queries: Responsive Alles

Responsive Design bezieht sich nicht nur auf
Layouts und Bilder, sondern auch auf Videos,
Navigation, Buttons, Graphen, Tabellen...
Web Design Trends 2011
Web Design Trends 2011
Aber es gibt ein Problem mit
CSS3 Media Queries...

Empfohlen für Sie

WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010

Praxis-Bericht über Entstehung der ImmobilienScout24-App. Präsentation-Inhalt lässt sich als Leitfaden für die Entwicklung von Apps im Allgemeinen verwenden.

appwudmobile
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.
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>
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)
Wir entwickeln uns vom Design von Web-
Seiten über das Design von Komponenten
zum Design von adaptiven Systemen.

Empfohlen für Sie

Wie wäre es, wenn wir nicht in Pixel, sondern
in Systemen denken, bei denen Designs auf
Verhältnissen und Proportionen basieren?..
2.
 Web Design
 For Mobile
Web Design Trends 2011
Rasche Verbreitung von Mobile hat uns
vor neue Herausforderungen gestellt.

Empfohlen für Sie

Früher mussten wir nur für wenige
Geräte optimieren.
Web Design Trends 2011
Jetzt für viele.
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Alles ist kleiner:
Desktop ist XL, Laptop ist L, Mobile ist M.
Web Design Trends 2011
EffectiveUI Mobile Study, http://www.uxbooth.com/blog/12207/
EffectiveUI Mobile Study, http://www.uxbooth.com/blog/12207/

Empfohlen für Sie

Web Design Trends 2011
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
Mmm, wirklich?...
Web Design Trends 2011

Empfohlen für Sie

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.

Empfohlen für Sie

Mobile Version?... Aber Nutzer wollen doch
die “Full Version” haben?..
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
“
    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
:-(
:-)

Empfohlen für Sie

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

• 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
Und es gibt genug Tools, mit denen man
dies leicht bewerkstelligen kann.

Empfohlen für Sie

Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Mobile Websites brauchen oft neue,
intelligente Lösungsansätze.
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
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
Web Design Trends 2011
“
    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

Empfohlen für Sie

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

Empfohlen für Sie

“Online Nutzer lesen nicht. Sie scannen nur.”
Web Design Trends 2011
Web Design Trends 2011
Das stimmt so nicht.

Empfohlen für Sie

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
Was ist Online Content?

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

Empfohlen für Sie

Online Content: Merkmale

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: State of the Art

Online Content ist oft dreckig.
                      gefesselt.
                      versteckt.
                      kurzlebig.
                      verseucht.
                      zersplittert.
                      unbrauchbar.
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
Kunden haben sich dran
gewöhnt, dass sie
schlecht behandelt
werden.
Als Seitenbetreiber, müssen wir nicht mehr
Content, sondern besseren Content liefern...
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
Web Design Trends 2011
...oder unsere Kunden werden andere Wege
finden, um unsere Inhalte zu transformieren.
Web Design Trends 2011

Empfohlen für Sie

Similar to Flattr
Web Design Trends 2011
Similar to Flattr
Similar to Flattr

Empfohlen für Sie

Diese Entwicklung ist ein Zeichen der
Content Transformation im Web.
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”
Web Design Trends 2011
“
    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

Empfohlen für Sie

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
Web Design Trends 2011
Web Design Trends 2011
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

Empfohlen für Sie

Wie können wir Content verbessern?




Content Manager einstellen (!)
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”
3
.5
    Storytelling
“
    Instead of thinking in terms of
    shadows, gradients and rounded
    corners, maybe we should be thinking
    in terms of tension, timing and
    narrative.

Empfohlen für Sie

Content Design: Storytelling

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

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


• Technische Mitteln
 Bilder, Scrolling, Animation, 3D Video, Parallax,
 Background Video.
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
4   Unsichtbares
    Design
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

Empfohlen für Sie

http://www.ruhotenuf.ca/
http://www.ruhotenuf.ca/
http://www.ruhotenuf.ca/
Web Design Trends 2011

Empfohlen für Sie

http://www.ruhotenuf.ca/
Web Design Trends 2011
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.
“
    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

Empfohlen für Sie

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
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011
Web Design Trends 2011

Empfohlen für Sie

Web Design Trends 2011
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
Web Design Trends 2011

Empfohlen für Sie

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
Web Design Trends 2011
Danke
für Ihre Aufmerksamkeit!
@smashingmag

Empfohlen für Sie

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)

Weitere ähnliche Inhalte

Andere mochten auch

Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Design Trends 2008
Design Trends 2008Design Trends 2008
Design Trends 2008
frog
 
The Importance of Integrating Mobile
The Importance of Integrating MobileThe Importance of Integrating Mobile
The Importance of Integrating Mobile
fivebyfive
 
Four pillars of visualization - by Noah Iliinsky
Four pillars of visualization - by Noah IliinskyFour pillars of visualization - by Noah Iliinsky
Four pillars of visualization - by Noah Iliinsky
Cindy Xiao
 
MongoDB Aggregation MongoSF May 2011
MongoDB Aggregation MongoSF May 2011MongoDB Aggregation MongoSF May 2011
MongoDB Aggregation MongoSF May 2011
Chris Westin
 
How & where to start iOS development?
How & where to start iOS development?How & where to start iOS development?
How & where to start iOS development?
Kazi Mohammad Ekram
 
4 pillars of visualization & communication by Noah Iliinsky
4 pillars of visualization & communication by Noah Iliinsky4 pillars of visualization & communication by Noah Iliinsky
4 pillars of visualization & communication by Noah Iliinsky
iliinsky
 
The Future Of Television
The Future Of TelevisionThe Future Of Television
The Future Of Television
P J
 
Selección de Proyectos de comunicación gráfica en estrategias de marketing
Selección de Proyectos de  comunicación gráfica en estrategias de marketingSelección de Proyectos de  comunicación gráfica en estrategias de marketing
Selección de Proyectos de comunicación gráfica en estrategias de marketing
Sergio Escalona
 
Migratie naar de Cloud (eMail)
Migratie naar de Cloud (eMail)Migratie naar de Cloud (eMail)
Migratie naar de Cloud (eMail)
Edwin Kanis
 
Sulaimani dental journal vol1 issue1 2014
Sulaimani dental journal vol1 issue1 2014Sulaimani dental journal vol1 issue1 2014
Sulaimani dental journal vol1 issue1 2014
Sulaimani Dental Journal
 
Global Development Report 2015
Global Development Report 2015Global Development Report 2015
Global Development Report 2015
Johanna Cosham
 
Brand New Brands : ¿necesitamos nuevas marcas?
Brand New Brands : ¿necesitamos nuevas marcas?Brand New Brands : ¿necesitamos nuevas marcas?
Brand New Brands : ¿necesitamos nuevas marcas?
Brainventures
 
[Case study] Benton Public Utility District: Reducing labor costs while impro...
[Case study] Benton Public Utility District: Reducing labor costs while impro...[Case study] Benton Public Utility District: Reducing labor costs while impro...
[Case study] Benton Public Utility District: Reducing labor costs while impro...
Schneider Electric
 
Applied Motion Products STM integrated motor product presentation march 2009
Applied Motion Products  STM integrated motor product presentation march 2009Applied Motion Products  STM integrated motor product presentation march 2009
Applied Motion Products STM integrated motor product presentation march 2009
Servo2Go.com
 
Historia De Los Ordenadores 2
Historia De Los Ordenadores 2Historia De Los Ordenadores 2
Historia De Los Ordenadores 2
agustin4iscar
 
Curso Ventas con PNL Barcelona Talavera
Curso Ventas con PNL Barcelona TalaveraCurso Ventas con PNL Barcelona Talavera
Curso Ventas con PNL Barcelona Talavera
Cámara Internacional de Empresarios de Barcelona
 
38th FARO - Brochure 2014
38th FARO - Brochure 201438th FARO - Brochure 2014
38th FARO - Brochure 2014
FARO The International Commodities Club
 
Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014
Jessie Doan
 
Flow Fiber Ppt 2007
Flow  Fiber Ppt 2007Flow  Fiber Ppt 2007
Flow Fiber Ppt 2007
Reid Rubsamen, M.D.
 

Andere mochten auch (20)

Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Design Trends 2008
Design Trends 2008Design Trends 2008
Design Trends 2008
 
The Importance of Integrating Mobile
The Importance of Integrating MobileThe Importance of Integrating Mobile
The Importance of Integrating Mobile
 
Four pillars of visualization - by Noah Iliinsky
Four pillars of visualization - by Noah IliinskyFour pillars of visualization - by Noah Iliinsky
Four pillars of visualization - by Noah Iliinsky
 
MongoDB Aggregation MongoSF May 2011
MongoDB Aggregation MongoSF May 2011MongoDB Aggregation MongoSF May 2011
MongoDB Aggregation MongoSF May 2011
 
How & where to start iOS development?
How & where to start iOS development?How & where to start iOS development?
How & where to start iOS development?
 
4 pillars of visualization & communication by Noah Iliinsky
4 pillars of visualization & communication by Noah Iliinsky4 pillars of visualization & communication by Noah Iliinsky
4 pillars of visualization & communication by Noah Iliinsky
 
The Future Of Television
The Future Of TelevisionThe Future Of Television
The Future Of Television
 
Selección de Proyectos de comunicación gráfica en estrategias de marketing
Selección de Proyectos de  comunicación gráfica en estrategias de marketingSelección de Proyectos de  comunicación gráfica en estrategias de marketing
Selección de Proyectos de comunicación gráfica en estrategias de marketing
 
Migratie naar de Cloud (eMail)
Migratie naar de Cloud (eMail)Migratie naar de Cloud (eMail)
Migratie naar de Cloud (eMail)
 
Sulaimani dental journal vol1 issue1 2014
Sulaimani dental journal vol1 issue1 2014Sulaimani dental journal vol1 issue1 2014
Sulaimani dental journal vol1 issue1 2014
 
Global Development Report 2015
Global Development Report 2015Global Development Report 2015
Global Development Report 2015
 
Brand New Brands : ¿necesitamos nuevas marcas?
Brand New Brands : ¿necesitamos nuevas marcas?Brand New Brands : ¿necesitamos nuevas marcas?
Brand New Brands : ¿necesitamos nuevas marcas?
 
[Case study] Benton Public Utility District: Reducing labor costs while impro...
[Case study] Benton Public Utility District: Reducing labor costs while impro...[Case study] Benton Public Utility District: Reducing labor costs while impro...
[Case study] Benton Public Utility District: Reducing labor costs while impro...
 
Applied Motion Products STM integrated motor product presentation march 2009
Applied Motion Products  STM integrated motor product presentation march 2009Applied Motion Products  STM integrated motor product presentation march 2009
Applied Motion Products STM integrated motor product presentation march 2009
 
Historia De Los Ordenadores 2
Historia De Los Ordenadores 2Historia De Los Ordenadores 2
Historia De Los Ordenadores 2
 
Curso Ventas con PNL Barcelona Talavera
Curso Ventas con PNL Barcelona TalaveraCurso Ventas con PNL Barcelona Talavera
Curso Ventas con PNL Barcelona Talavera
 
38th FARO - Brochure 2014
38th FARO - Brochure 201438th FARO - Brochure 2014
38th FARO - Brochure 2014
 
Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014Web Design Book of Trend 2013 - 2014
Web Design Book of Trend 2013 - 2014
 
Flow Fiber Ppt 2007
Flow  Fiber Ppt 2007Flow  Fiber Ppt 2007
Flow Fiber Ppt 2007
 

Ähnlich wie Web Design Trends 2011

Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
denkwerk GmbH
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
Johannes Waibel
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
Namics – A Merkle Company
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
uxHH
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
Maria Herrmann
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Mann beißt Hund Agentur für Kommunikation
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Mario Fink
 
Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das Web
Angelika Röck
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Moritz Haarmann
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
think moto GmbH
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
CS2 AG
 
WCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der DingeWCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der Dinge
Bernd Burkert
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Web Content - Wer nichts zu sagen hat, bleibt draussen
Web Content - Wer nichts zu sagen hat, bleibt draussenWeb Content - Wer nichts zu sagen hat, bleibt draussen
Web Content - Wer nichts zu sagen hat, bleibt draussen
Michael Rottmann
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
Leif Janzik
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
Alexander Beck
 

Ähnlich wie Web Design Trends 2011 (20)

Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das Web
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
WCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der DingeWCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der Dinge
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Web Content - Wer nichts zu sagen hat, bleibt draussen
Web Content - Wer nichts zu sagen hat, bleibt draussenWeb Content - Wer nichts zu sagen hat, bleibt draussen
Web Content - Wer nichts zu sagen hat, bleibt draussen
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
 

Web Design Trends 2011

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