Frontend Best Practices

Jens Grochtdreis‣ 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, OReilly, MuT

Die drei wichtigsten Best PracticesNachdenken Recherchieren Experimentieren http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq

Das Web ist per se ﬂexibel

„Responsive Design“ ist also keine Neuerﬁndung

Der Konsument kannInformationen aus dem Internet nutzen, wie er es möchte.

http://mediaqueri.es/

http://www.webdesignshock.com/responsive-design-problems/

wichtige Erkenntnis:Es kann nicht DIE EINEDarstellungsform geben!

http://shouldwebsiteslookthesameinallbrowsers.com/

Unser Layout ist nur eine Empfehlung!

Frühzeitig aufEntwicklungsstrategie einigen

IE ≠ modernhttp://css3generator.com/

Progressive Enhancement ‣ Fokus ist auf den Content, denn um den geht es am Ende (fast) immerhttp://www.alistapart.com/articles/understandingprogressiveenhancement/

Graceful Degredation ‣ Fokus ist auf den modernsten Browsern ‣ ältere Browser bekommen eine abgespeckte Versionhttp://stuffandnonsense.co.uk/

Brutal Degredation bis einschließlich IE8 moderne Browserhttp://www.ﬁllerati.com/

http://workdiary.de/

Semantik

Ein Slider - Grobskizze IMAGE IMAGE IMAGE  Kategorie Infos Kategorie Infos Kategorie Infos Überschrift Zusatzinfo1 Überschrift Zusatzinfo1 Überschrift Zusatzinfo1 Hier steht ein kurzer Zusatzinfo2 Hier steht ein kurzer Zusatzinfo2 Hier steht ein kurzer Zusatzinfo2 erklärender Text. erklärender Text. erklärender Text.

Mal ohne Semantik

Mal mit Semantik

Das falsche Element!

Warum keine Überschrift?http://www.faz.net/

neue semantische Elemente

An die Konsequenzen denken ‣ HTML5-Seiten funktionieren in alten Browsern nur mittels Javascript. Das betrifft im Wesentlichen IE bis einschließlich Version 8.http://code.google.com/p/html5shim/ http://www.modernizr.com/

Mit Javascript

Ohne Javascript

Versteckspielhttp://images.oddlyspeciﬁc.com/oddlyspeciﬁc/2009/11/fpthedevilyouknow.jpg

http://images.oddlyspeciﬁc.com/oddlyspeciﬁc/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 als nachträglicher Einfall, drangedübelthttp://www.ﬂickr.com/photos/beelzebozo/1503756/

Barrierefreiheit als integrales Elementhttp://www.ﬂickr.com/photos/pixeldiva/2109688648/

http://www.ﬂickr.com/photos/johnmcbride1109/2875819859/

Farbkontraste

http://www.ctrl-verlust.net/

https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose

http://snurl.com/t58gj

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://jsﬁddle.net/Flocke/VCSEB/

DRY - Don‘t repeat yourself

„ If I can see further than anyoneelse, 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://benthebodyguard.com/

http://jsﬁddle.net/Flocke/e6KDU/

Realistische Dummy-Inhalte

Navigation

Vorsicht bei horizontaler Navigationhttp://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/

Dummybilderhttp://dummyimage.com/ http://lorempixum.com/

Dummybilderhttp://placekitten.com/

http://www.blindtextgenerator.de/

http://bueltge.de/html-ipsum/

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?

neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen Verringerung des Graﬁkeinsatzes Animationen neue Selektoren

Transparenz mit rgba() runde Ecken Verläufe (gradient)Transitions media-queries calc() mehrere Spalten

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 NachteileEs gibt keine!

Oder doch einen kleinen

Individuelle Schriften mittels @font-face

http://campwapo.org/

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 Dienstehttp://www.delicious.com/Flocke/font-face

http://www.fontsquirrel.com/

http://www.google.com/webfonts

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

http://wufoo.com/html5/

Date Chrome 15 dev Firefox 5Opera 11.5

Das placeholder-Attributhttp://wufoo.com/html5/attributes/01-placeholder.html

Und wenn ein Browser dieneuen Elemente nicht kennt?

Dann werden die neuen Input-Elemente zu <input type=“text“>

Eingebaute Validierung Opera 11.5 Mac Firefox 5 Mac Chrome 15 dev MacChrome 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) ‣ Polyﬁlls verwenden ‣ https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyﬁlls

Twitter: @FlockeSlideshare: Flocke669

Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

http://grochtdreis.de	702
http://www.scoop.it	44
http://blog.grochtdreis.de	18
http://www.netvibes.com	2
http://127.0.0.1	1

Frontend Best Practices

by Jens Grochtdreis on Oct 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 767

Statistics

Frontend Best Practices — Presentation Transcript