Am Ende ist doch alles HTML

Auf dem Webmontag in Karlsruhe habe ich darüber gesprochen, dass gutes Frontend nicht einfach ist und dass es von Spezialisten gemacht werden sollte. Es gab ein paar Beispiele für gute und schlechte Frontendentwicklung.

Transcript

1. Am Ende ist doch alles HTML - ein gutes Frontend ist wichtig Jens Grochtdreis
2. ‣Frontendentwickler ‣seit 1999 Arbeit im und fürs Web ‣seit 2009 selbständig ‣Frontendentwicklung ‣Schulung ‣Beratung ‣@Flocke
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. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/PapierformateA0bisA8.jpg/1280px-PapierformateA0bisA8.jpg Photoshop und Word haben immer EIN Endprodukt.
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. Oft wird das Frontend nebenher gemacht
15. 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.
16. Typische Frontendaufgaben ‣ source-order für SEO optimieren ‣ Theming ‣ auf mobile Geräte anpassen ‣ responsive Webdesign ‣ Performance ‣ leichte Wartbarkeit
17. Schlechte Qualität sieht man http://failblog.files.wordpress.com/2009/10/epic-fail-door-fail.jpg
18. Auch im Internet
19. Auch im Internet http://stern.de
20. Wir sind in einer Übergangsphase
21. http://thenewdesignguidelines.derekevanharms.com/ Opera Chrome Best viewed in ... (2012)
22. Problematische Strategie Irgendwie bekommen wir das geregelt ... http://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg
23. An ein Fallback denken! moderne Browser IE8 http://jsfiddle.net/Flocke/BEJRM/
24. Gutes Fallback http://jsfiddle.net/Flocke/VzSHG/ IE8 moderne Browser Diese Demo arbeitet mit einem CSS3-Selektor. oldIE kann man in diesem Falle mit JavaScript weiterhelfen.
25. Gut: in Alternativen denken!
26. http://www.deutsche-bank.de/pbc/pk-index.html
27. http://www.deutsche-bank.de/pbc/pk-index.html
28. http://jsfiddle.net/Flocke/azvGv/ CSS3-fähiger Browser IE8
29. CSS ist keine echte Layoutsprache.
30. Deshalb lassen sich nicht alle wünschbaren Designs umsetzen.
31. Testen hilft hier weiter, nicht das Design in Photoshop
32. Hinter einer Webseite steckt eine Struktur.
33. Hinter einem Photoshop- Design nur Pixel.
34. Im Frontend läuft alles zusammen.
35. Hier stellt sich heraus, ob das Design bedienbar und wartbar ist.
36. Man erkennt, ob der Entwickler Ahnung und ausreichend Zeit hatte.
37. http://www.flickr.com/photos/artrock2006/4177475479/ Alle Beteiligten sollten frühzeitig offen kommunizieren. http://www.flickr.com/photos/artrock2006/4177475479/
38. Nicht einfach Befehle empfangen. http://www.flickr.com/photos/soldiersmediacenter/3521607551/
39. Voneinander lernen!
40. Zusammenarbeiten!
41. Es heißt http:// nicht psd:// !
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/