Am Ende ist doch alles HTML - ein gutes Frontend ist wichtig

Jens Grochtdreis

‣ Selbständiger Frontendentwickler

‣ Fachgutachter für Qualitätssicherung

‣ 10 Jahre Agenturerfahrung

‣ 13 Jahre Arbeit im und fürs Web

‣ Gründer der Webkrauts

‣ Blogger (http://grochtdreis.de/weblog)

‣ Autor u.a. PHPMagazin, Webstandards-Magazin, Screenguide

‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

Jens Grochtdreis

HTML ist simpel!

Im Vergleich zu PHP, Java, Perl, Javascript ... stimmt das

sicher!

Nicht die Sprache selbst ist das Problem. Es ist die

Umgebung!

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

Das Endprodukt eines Frontendentwicklers ist nur

ein Zwischenprodukt.

Wir wissen nicht, in welcher Umgebung und in welcher Form

unser Endprodukt konsumiert wird.

Für Projektmanager und Designer ist das unvorstellbar.

http://www.flickr.com/photos/wanhoff/356677564/

Photoshop und Word haben immer EIN Endprodukt.

Wir haben viele Endprodukte

http://www.flickr.com/photos/danm_cool/3163625498/

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://www.flickr.com/photos/artrock2006/4177475479/

Alle Beteiligten sollten frühzeitig offen kommunizieren.

http://www.flickr.com/photos/artrock2006/4177475479/

Nicht einfach Befehle empfangen.

http://www.flickr.com/photos/soldiersmediacenter/3521607551/

Voneinander lernen!

Oft wird das Frontend nebenher gemacht

Frontend ist wichtig

‣ Beim Endkunden kommen HTML, CSS und Javascript an, nicht PHP, Java oder Ruby.

‣ Das Frontend beeinflusst die Performance sehr stark, stärker als das Backend.

Typische Frontendaufgaben

‣ source-order für SEO optimieren

‣ Theming

‣ auf mobile Geräte anpassen

‣ responsive Webdesign

‣ Performance

‣ leichte Wartbarkeit

Schlechte Qualität sieht man

http://failblog.files.wordpress.com/2009/10/epic-fail-door-fail.jpg

Auch im Internet

Auch im Internet

http://stern.de

Wir sind in einer Übergangsphase

http://thenewdesignguidelines.derekevanharms.com/

Opera

Chrome

Best viewed in ... (2012)

Problematische Strategie

Irgendwie bekommen wir das geregelt ...

http://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg

An ein Fallback denken!

moderne Browser

IE8

http://jsfiddle.net/Flocke/BEJRM/

Gutes Fallback

http://jsfiddle.net/Flocke/VzSHG/

IE8moderne Browser

Diese Demo arbeitet mit einem CSS3-Selektor. oldIE kann man in diesem Falle mit JavaScript weiterhelfen.

Gut: in Alternativen denken!

http://www.deutsche-bank.de/pbc/pk-index.html

http://www.deutsche-bank.de/pbc/pk-index.html

Zeitersparnis, weil alles in einer Hand ist!

http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html

‣ runde Ecken

‣ linear-gradient

‣ transform

‣ box-shadow

‣ text-shadow

‣ content-Generierung mit :after und :before

http://jsfiddle.net/Flocke/azvGv/

http://jsfiddle.net/Flocke/azvGv/

CSS3-fähiger Browser IE8

Buttons mit CSS3

Skalieren mit Inhalt und mit der Seite.

http://www.webdesignerwall.com/demo/css-buttons.html

Jens Grochtdreishttp://grochtdreis.dehttp://twitter.com/Flockehttp://webkrauts.de

Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/