Die Gefahren von Webdesign Trends.@MadeMyDay(//(Marc(Hinse(//(Webkongress(Erlangen(21.03.2014

Was heißt hier „Trends“?

ParallaxWebfonts

HTML5CSS3

Flat Design

Responsive

StorytellingOnepager

backgroundVideosHeroe Areas

große Typographie

Was schief gehen kann…

geht schief.

180 Requests.

EINHUNDERTACHTZIG!

> 32MB.

ZWEIUNDDREISSIG!

180 Requests.EINHUNDERTACHTZIG!

> 32MB.ZWEIUNDDREISSIG!

PArallax.

Seit ca. 2008 verbreitet. Echt jetzt.

Aber erst in letzter Zeit der richtig heisse scheiss.

Flash ist tot und begraben.

…und wir graben die verweste Leiche wieder aus

parallax.Pros: [

“dezentes(!) Enhancement“,

“räumlicher Eindruck“,

“WOW-Effekt“,

“einfache Implementierung“

]

Parallax.Contras: [

“Ladezeit“,

“Performance“,

“Ablenkung vom Content“,

“Responsive?“]

Was tun, wenn der DEsigner oder Kunde unbedingt Parallax will?

Nachdenken!

Dev Tools nutzen.

Tipps.Parallax.allgemein: [“Konzept prüfen. Oder besser: überhaupt mal eine Konzeption machen (lorem ipsum ZEUGT NICHT VON KONZEPTION)“,

“weniger ist mehr“,

“unterstützt der Effekt meinen Content oder lenkt er ab?“

]

Tipps.Parallax.css: [“3D-Beschleunigung nutzen (transform3d statt position)“,

“position: fixed ist kritisch“,

“Touch-Gerät? Grundregel: bleiben lassen“]

Tipps.Parallax.js: [“RequestAnimationFrame statt onScroll“,

“window.pageYOffset statt offset().top“,

“Kalkulationen der Positionen speichern“,

“nur das Animieren, was auch zu sehen ist“

]

backgroundvideos.

Was ist mit Smartphones?

Backgroundvideos.Pros: [

“Aufmerksamkeit“,

“erzeugt Stimmung“,

“WOW-Effekt“,

“einfache Implementierung“

]

Backgroundvideos.Contras: [

“Ladezeit“,

“Performance“,

“Ablenkung vom Content“,

“Touchgeräte?“

]

Was tun, wenn der DEsigner oder Kunde unbedingt backgroundVideos will?

Nachdenken!

Tipps.backgroundVideos.allgemein: [

“Nur Deko, kein wichtiger Inhalt (klingt blöd, ist aber so)“,

“darf nicht ablenken“,

“muss zum Website-Thema passen“

]

Tipps.backgroundVideos.technik: [“Komprimieren!“,

“Pattern drüberlegen.“,

“Flash-Fallback? Weglassen!“,

“Touchgerät? Weglassen!“,

“out of Viewport? pausieren!“,

“HTML5 Video erlaubt media queries!“

]

Responsive Webdesign.

Kein Trend, sondern Notwendigkeit.

missverstaendnisse.responsive: [

“muss trotzdem alles laden / blendet vermeintlich unwichtiges einfach aus“,

“sieht langweilig aus.“,

“kein Platz für Corporate Design“

]

responsive.Pros: [

“eine Website“,

“ein CMS“,

“einmal Content (Text)“,

“einmal Medien (Bilder)“,

“eine Redaktion“

]

responsive.Contras: [

]

“umdenken“,

“nachdenken“,

“testen“

Tipps.responsive.allgemein: [

“Sinnvolle Konzeption unabdingbar (Content first)“,

„es gibt nicht nur das iPhone“,

“mobile first ist mehr als ein Buzzword“,

“Breakpoints sinnvoll wählen“]

Bilder verursachen über 50% des Traffics.

Frech geklaut bei @maddesigns

Lösung: Responsive Images.

Tipps.responsive.css: [

“mobile first ist mehr als ein Buzzword“,

“Präprozessoren helfen“,

“Breakpoints sinnvoll wählen“

]

Tipps.responsive.js: [

“nur laden was nötig ist (Beispiel enquire.js)“,

“Polyfills (Fluch und Segen)“

]

Typographie (Webfonts).

Das web besteht nicht mehr nur aus Arial und verdana.

…zum Glück.

webfonts.pro: [

“dem Einheitsbrei entfliehen“,

“Corporate Schrift nutzen“,

“Typographie als gestalterisches Element“

]

webfonts.contra: [“müssen erst geladen werden“,

“sehen teilweise scheiße aus im IE“,

“Größen stimmen mit Fallbackschrift nicht überein“,

“Kommerzielle Fonts i.d.R. nur als SaaS“

]

Tipps.webfonts: [“Größe Fallbackschrift über extra Klasse definieren“,

“Während Konzeption im IE testen“,

“Größen im Auge behalten“,

“Nur die Schnitte/Characters laden, die man auch wirklich braucht“

]

Flat design.

Remarkable!

Vorteile_Nachteile_Tipps.Flat_design: [

“austauschbar, aber User sieht vertraute UI“,

“passt nicht immer (Konzeption!)“,

“Gestaltung lässt sich fast ausschließlich über CSS steuern“

]

Noch Zeit? Noch Wach?

Allgemeine Tipps

Nachdenken!

Hungrig sein!

Verstehen (wollen)!

Eigenen Kram schreiben

…und wenns mal wieder nicht klappt, was fertiges nehmen.

yay \o/

Fail. Fail often. Fail hard.

…and learn.

Fragen?

Danke �@MadeMyDay

http://siebennull.com

http://mademyday.de