Am Ende ist doch alles HTML

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

November 26, 2012
Tweet

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/