Embed Size (px)
DESCRIPTION
Vortrag von der WebTech 2011 in Mainz - lose zusammengetragene Empfehlungen für bessere Ergebnisse im Frontend
Citation preview
Frontend Best Practices
‣Frontendentwickler
‣10 Jahre Agenturerfahrung
‣12 Jahre Arbeit im und fürs Web
‣Gründer der Webkrauts
‣Blogger
‣Autor für: PHPMagazin, PHPUser, T3N,Webstandards-Magazin
‣Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT
Jens Grochtdreis
Die drei wichtigsten Best Practices
Nachdenken Recherchieren
http://goo.gl/HbFx0http://goo.gl/NYGeI
Experimentieren
http://goo.gl/LohPq
Das Web ist per se flexibel
„Responsive Design“ ist also keine Neuerfindung
Der Konsument kann Informationen aus dem Internet
nutzen, wie er es möchte.
http://www.webdesignshock.com/responsive-design-problems/
wichtige Erkenntnis: Es kann nicht DIE EINE Darstellungsform geben!
http://shouldwebsiteslookthesameinallbrowsers.com/
Unser Layout ist nur eine Empfehlung!
Frühzeitig auf Entwicklungsstrategie
einigen
Progressive Enhancement
http://www.alistapart.com/articles/understandingprogressiveenhancement/
‣ Fokus ist auf den Content, denn um den geht es am Ende (fast) immer
Graceful Degredation
‣ Fokus ist auf den modernsten Browsern
‣ ältere Browser bekommen eine abgespeckte Version
http://stuffandnonsense.co.uk/
Brutal Degredation
bis einschließlich IE8 moderne Browser
http://www.fillerati.com/
Semantik
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!
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
Versteckspiel
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
http://yaccessibilityblog.com/library/css-clip-hidden-content.html
Erkenntnisse gelten selten für alle Zeiten
‣ Das Drei-Schichten-Modell überlebt sich, denn HTML5 ist im Wesentlichen Javascript!
‣ Browser ändern sich. Deshalb ist es weniger wichtig, alle Javascripte in den Fuss der Seite zu platzieren.
http://goo.gl/2h7TZ
Ü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!
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/
DRY - Don‘t repeat yourself
„ If I can see further than anyone else, it is only because I am standing
on the shoulders of giants. “
Sir Isaac Newton
Frameworks nutzen!
Nicht blind nutzen
‣ Plugins für jQuery, Wordpress, TYPO3 (...) müssen nicht sinnvoll und gut sein.
‣ Erst testen! Nicht unkritisch nutzen!
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/
Realistische Dummy-Inhalte
Navigation
Vorsicht bei horizontaler Navigation
http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilder
http://dummyimage.com/ http://lorempixum.com/
http://www.blindtextgenerator.de/
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
Individuelle Schriften mittels @font-face
http://liechtenecker.at/leistungen/
‣ Alle Browser können es, auch der IE6!
‣ Die eigentlich gedachte Syntax funktioniert nicht!
‣ Die Resultate sind unter Windows oft erbärmlich, da dessen Schriftrendering zu vielen Schriftarten nicht passt.
‣ Lizenzprobleme
‣ sehr viele freie Schriften
‣ einige gute Tools und Dienste
http://www.delicious.com/Flocke/font-face
Textersetzung und Cufon
‣ Cufon funktioniert nur mit Javascript und ist ein Barrierefreiheitsproblem. Eine Seite mit Cufon ist nicht barrierefrei. [http://goo.gl/8HWIq]
‣ Alle CSS-Textersetzungstechniken haben irgendeinen Nachteil, auch bei Barrierefreiheit.
http://www.paciellogroup.com/blog/2009/06/notes-accessibility-of-text-replacement-using-html5-canvas/
HTML5-Formularelemente
HTML5-Formularelemente
Date
Opera 11.5
Chrome 15 dev Firefox 5
http://wufoo.com/html5/attributes/01-placeholder.html
Das placeholder-Attribut
Und wenn ein Browser die neuen Elemente nicht kennt?
Dann werden die neuen Input-Elemente zu
<input type=“text“>
Eingebaute Validierung
Firefox 5 Mac
Opera 11.5 Mac
Chrome 15 dev Mac
Chrome kommt mit skalierten Seiten nicht zurecht!
Und wenn der Browser die Validierung nicht kennt? ‣ Ignorieren ( = Progressive enhancement)
‣ JS-Alternativen bei Bedarf nachladen, bspw. mit Modernizr (http://modernizr.com)
‣ Polyfills verwenden
‣ https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Twitter: @Flocke
Slideshare: Flocke669
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/
