Post on 22-May-2015
description
Frontend Best Practices
Die drei wichtigsten Best Practices
Nachdenken Recherchieren
http://goo.gl/HbFx0http://goo.gl/NYGeI
Experimentieren
http://goo.gl/LohPq
Semantik
Mangelnde Professionalität erzeugt in anderen Bereichen Spott
http://blog.zdf.de/zdfdasblog/2011/10/31/55-milliarden-zu-viele-nullen/
In unserer Profession wird das kritiklos hingenommen
Warum keine Überschrift?
http://www.sueddeutsche.de/
Ein Slider - Grobskizze
IMAGE
KategorieÜberschriftHier steht ein kurzer erklärender Text.
InfosZusatzinfo1Zusatzinfo2
IMAGE
KategorieÜberschriftHier steht ein kurzer erklärender Text.
InfosZusatzinfo1Zusatzinfo2
IMAGE
KategorieÜberschriftHier steht ein kurzer erklärender Text.
InfosZusatzinfo1Zusatzinfo2
Mal ohne Semantik
Mal mit Semantik
Das falsche Element!
Versteckspiel
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
Über Barrieren nachdenken
Keine vermeidbaren Barrieren
‣ Das Netz ermöglicht es erstmals, dass JEDER auf Informationen zugreifen kann und in Interaktion treten kann.
‣ Warum also sich selber und die Reichweite des eigenen Angebotes beschränken?
http://failblog.org/2010/04/08/epic-fail-photos-hand-rail-fail/
mehr ...
mehr ...
mehr ...
mehr ...
Konkretes Beispiel
Lösung dafür: WAI-ARIA
Kleiner Bildschirm
Keine Maus
Keine Popups
Paradigmenwandel: Barrierefreiheit alsnachträglicher Einfall, drangedübelt
http://www.flickr.com/photos/beelzebozo/1503756/
Barrierefreiheit als integrales Element
http://www.flickr.com/photos/pixeldiva/2109688648/
http://www.flickr.com/photos/johnmcbride1109/2875819859/
Farbkontraste
https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose
Fokus
So nicht!
Den Fokus nicht vergessen!
Nicht in Tools und Techniken zu sehr verlieben
‣ Nach sinnvollen Einsatzzwecken von Techniken suchen.
‣ Nicht alles machen, weil es gerade möglich ist.
‣ Immer an die Semantik denken.
http://jsfiddle.net/Flocke/e6KDU/
moderne Selektoren
‣ Können ältere IE (bis einschließlich Version 8) nicht.
‣ Ihnen kann mittels Javascript geholfen werden.
‣Wenn es sich um keine „lebensnotwendigen“ Operationen handelt, ist eine Nachhilfe via Javascript okay.
http://jsfiddle.net/Flocke/VCSEB/
neue semantische Elemente
An die Konsequenzen denken
http://code.google.com/p/html5shim/
‣ HTML5-Seiten funktionieren in alten Browsern nur mittels Javascript. Das betrifft im Wesentlichen IE bis einschließlich Version 8.
http://www.modernizr.com/
Mit Javascript
Ohne Javascript
Was konnten wir bisher mit CSS machen?
‣ Texte formatieren
‣ Farben für Vorder- und Hintergründe
‣ Positionierungen
‣ Floats
‣ Bilder werden für viele Lösungen benötigt
‣ Manchmal wird Extra-Markup für Bilder-Lösungen benötigt
‣ Transparenz mit Nebenwirkungen
Welche Lücke füllt CSS3?
Animationen
Verringerung des Grafikeinsatzes
neue Layoutmodelle
mehr Möglichkeiten mit Rahmen und Hintergründen
neue Selektoren
runde Ecken
Verläufe (gradient)
Transitions
mehrere Spaltencalc()
Transparenz mit rgba()
media-queries
Die Vorteile
‣Weniger Schmuckbilder werden benötigt.
‣Weniger Javascript wird benötigt.
‣ Animationen und Transitionen sind mittels CSS schneller, als mittels Javascript.
‣ Es wird seltener Code nur für Optik benötigt, der Quellcode schmaler und lesbarer.
Die Nachteile
Es gibt keine!
Oder doch einen kleinen
Realistische Dummy-Inhalte
Navigation
Vorsicht bei horizontaler Navigation
http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilder
http://dummyimage.com/ http://lorempixel.com/
http://www.blindtextgenerator.de/
http://geekandpoke.typepad.com/geekandpoke/2009/07/geeks.html
Jens Grochtdreishttp://grochtdreis.de
http://twitter.com/Flockehttp://webkrauts.de
http://slideshare.net/Flocke669
Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/