Post on 22-May-2015
description
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
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/