Kurzvortrag über die Bedeutung des Frontends. Ich rege zu mehr und besserer Kommunikation an und gebe Beispiele für Verbesserungen durch moderne Techniken. Zuerst gehalten auf dem Webmontag in Marburg (30.07.2012)

1. Am Ende ist doch alles HTML -
ein gutes Frontend ist wichtig
Jens Grochtdreis

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

3. HTML ist simpel!

4. Im Vergleich zu PHP, Java,
Perl, Javascript ... stimmt das
sicher!

5. Nicht die Sprache selbst ist
das Problem. Es ist die
Umgebung!

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

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

8. Das Endprodukt eines
Frontendentwicklers ist nur
ein Zwischenprodukt.

9. Wir wissen nicht, in welcher
Umgebung und in welcher Form
unser Endprodukt konsumiert wird.

10. Für Projektmanager und
Designer ist das
unvorstellbar.

11. Photoshop und Word haben
immer EIN Endprodukt.
http://www.flickr.com/photos/wanhoff/356677564/

12. Wir haben viele
Endprodukte
http://www.flickr.com/photos/danm_cool/3163625498/

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

14. Alle Beteiligten sollten frühzeitig
offen kommunizieren.
http://www.flickr.com/photos/artrock2006/4177475479/
http://www.flickr.com/photos/artrock2006/4177475479/

15. Nicht einfach Befehle empfangen.
http://www.flickr.com/photos/soldiersmediacenter/3521607551/

16. Voneinander lernen!

17. Oft wird das Frontend
nebenher gemacht

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

19. Typische Frontendaufgaben
‣ source-order für SEO optimieren
‣ Theming
‣ auf mobile Geräte anpassen
‣ responsive Webdesign
‣ Performance
‣ leichte Wartbarkeit

20. Schlechte Qualität sieht man
http://failblog.files.wordpress.com/2009/10/epic-fail-door-fail.jpg

21. Auch im Internet

22. Auch im Internet
http://stern.de

23. Wir sind in einer
Übergangsphase

24. Best viewed in ... (2012)
Opera
Chrome
http://thenewdesignguidelines.derekevanharms.com/

25. Problematische Strategie
Irgendwie bekommen wir das geregelt ...
http://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg

26. An ein Fallback denken!
moderne
Browser
IE8
http://jsfiddle.net/Flocke/BEJRM/

27. Gutes Fallback
moderne Browser IE8
Diese Demo arbeitet mit einem CSS3-Selektor.
oldIE kann man in diesem Falle mit JavaScript weiterhelfen.
http://jsfiddle.net/Flocke/VzSHG/

28. Gut: in Alternativen denken!

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

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

35. Zeitersparnis, weil alles in
einer Hand ist!

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

37. ‣ runde Ecken
‣ linear-gradient
‣ transform
‣ box-shadow
‣ text-shadow
‣ content-Generierung mit :after und :before
http://jsfiddle.net/Flocke/azvGv/

38. CSS3-fähiger Browser IE8
http://jsfiddle.net/Flocke/azvGv/

39. Buttons mit CSS3

40. Skalieren mit Inhalt und mit
der Seite.

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

42. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/