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
