Best practices im Frontend -Barcamp Mainz 2011

62
Frontend Best Practices

description

Kompakte

Transcript of Best practices im Frontend -Barcamp Mainz 2011

Page 1: Best practices im Frontend -Barcamp Mainz 2011

Frontend Best Practices

Page 2: Best practices im Frontend -Barcamp Mainz 2011

Die drei wichtigsten Best Practices

Nachdenken Recherchieren

http://goo.gl/HbFx0http://goo.gl/NYGeI

Experimentieren

http://goo.gl/LohPq

Page 3: Best practices im Frontend -Barcamp Mainz 2011

Semantik

Page 4: Best practices im Frontend -Barcamp Mainz 2011

Mangelnde Professionalität erzeugt in anderen Bereichen Spott

Page 6: Best practices im Frontend -Barcamp Mainz 2011

In unserer Profession wird das kritiklos hingenommen

Page 7: Best practices im Frontend -Barcamp Mainz 2011

Warum keine Überschrift?

http://www.faz.net/

Page 8: Best practices im Frontend -Barcamp Mainz 2011

Warum keine Überschrift?

http://www.sueddeutsche.de/

Page 9: Best practices im Frontend -Barcamp Mainz 2011

Warum keine Überschrift?

http://www.stern.de/

Page 10: Best practices im Frontend -Barcamp Mainz 2011

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

Page 11: Best practices im Frontend -Barcamp Mainz 2011

Mal ohne Semantik

Page 12: Best practices im Frontend -Barcamp Mainz 2011

Mal mit Semantik

Page 13: Best practices im Frontend -Barcamp Mainz 2011

Das falsche Element!

Page 16: Best practices im Frontend -Barcamp Mainz 2011

Über Barrieren nachdenken

Page 17: Best practices im Frontend -Barcamp Mainz 2011

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/

Page 18: Best practices im Frontend -Barcamp Mainz 2011

mehr ...

mehr ...

mehr ...

mehr ...

Page 19: Best practices im Frontend -Barcamp Mainz 2011

Konkretes Beispiel

Page 20: Best practices im Frontend -Barcamp Mainz 2011

Lösung dafür: WAI-ARIA

Page 21: Best practices im Frontend -Barcamp Mainz 2011

Kleiner Bildschirm

Keine Maus

Keine Popups

Page 22: Best practices im Frontend -Barcamp Mainz 2011

Paradigmenwandel: Barrierefreiheit alsnachträglicher Einfall, drangedübelt

http://www.flickr.com/photos/beelzebozo/1503756/

Page 23: Best practices im Frontend -Barcamp Mainz 2011

Barrierefreiheit als integrales Element

http://www.flickr.com/photos/pixeldiva/2109688648/

Page 25: Best practices im Frontend -Barcamp Mainz 2011

Farbkontraste

Page 26: Best practices im Frontend -Barcamp Mainz 2011

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

Page 28: Best practices im Frontend -Barcamp Mainz 2011

http://snurl.com/t58gj

Page 29: Best practices im Frontend -Barcamp Mainz 2011

Fokus

Page 30: Best practices im Frontend -Barcamp Mainz 2011

So nicht!

Page 31: Best practices im Frontend -Barcamp Mainz 2011

Den Fokus nicht vergessen!

Page 32: Best practices im Frontend -Barcamp Mainz 2011

Nicht in Tools und Techniken zu sehr verlieben

Page 33: Best practices im Frontend -Barcamp Mainz 2011

‣ Nach sinnvollen Einsatzzwecken von Techniken suchen.

‣ Nicht alles machen, weil es gerade möglich ist.

‣ Immer an die Semantik denken.

Page 34: Best practices im Frontend -Barcamp Mainz 2011

http://benthebodyguard.com/

Page 36: Best practices im Frontend -Barcamp Mainz 2011

moderne Selektoren

Page 37: Best practices im Frontend -Barcamp Mainz 2011

‣ 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.

Page 38: Best practices im Frontend -Barcamp Mainz 2011
Page 40: Best practices im Frontend -Barcamp Mainz 2011

neue semantische Elemente

Page 41: Best practices im Frontend -Barcamp Mainz 2011

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/

Page 42: Best practices im Frontend -Barcamp Mainz 2011

Mit Javascript

Page 43: Best practices im Frontend -Barcamp Mainz 2011

Ohne Javascript

Page 44: Best practices im Frontend -Barcamp Mainz 2011
Page 45: Best practices im Frontend -Barcamp Mainz 2011
Page 46: Best practices im Frontend -Barcamp Mainz 2011

Was konnten wir bisher mit CSS machen?

Page 47: Best practices im Frontend -Barcamp Mainz 2011

‣ 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

Page 48: Best practices im Frontend -Barcamp Mainz 2011

Welche Lücke füllt CSS3?

Page 49: Best practices im Frontend -Barcamp Mainz 2011

Animationen

Verringerung des Grafikeinsatzes

neue Layoutmodelle

mehr Möglichkeiten mit Rahmen und Hintergründen

neue Selektoren

Page 50: Best practices im Frontend -Barcamp Mainz 2011

runde Ecken

Verläufe (gradient)

Transitions

mehrere Spaltencalc()

Transparenz mit rgba()

media-queries

Page 51: Best practices im Frontend -Barcamp Mainz 2011

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.

Page 52: Best practices im Frontend -Barcamp Mainz 2011

Die Nachteile

Es gibt keine!

Page 53: Best practices im Frontend -Barcamp Mainz 2011

Oder doch einen kleinen

Page 54: Best practices im Frontend -Barcamp Mainz 2011

Realistische Dummy-Inhalte

Page 55: Best practices im Frontend -Barcamp Mainz 2011

Navigation

Page 56: Best practices im Frontend -Barcamp Mainz 2011

Vorsicht bei horizontaler Navigation

http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/

Page 57: Best practices im Frontend -Barcamp Mainz 2011

Dummybilder

http://dummyimage.com/ http://lorempixel.com/

Page 58: Best practices im Frontend -Barcamp Mainz 2011

Dummybilder

http://placekitten.com/

Page 60: Best practices im Frontend -Barcamp Mainz 2011

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

Page 62: Best practices im Frontend -Barcamp Mainz 2011

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/