Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Jens Grochtdreis

November 26, 2012
Tweet

More Decks by Jens Grochtdreis

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ‣Frontendentwickler
    ‣seit 1999 Arbeit im und fürs Web
    ‣seit 2009 selbständig
    ‣Frontendentwicklung
    ‣Schulung
    ‣Beratung
    ‣@Flocke

    View full-size slide

  3. HTML ist simpel!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Das Endprodukt eines
    Frontendentwicklers ist nur
    ein Zwischenprodukt.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/PapierformateA0bisA8.jpg/1280px-PapierformateA0bisA8.jpg
    Photoshop und Word haben
    immer EIN Endprodukt.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Oft wird das Frontend
    nebenher gemacht

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Auch im Internet

    View full-size slide

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

    View full-size slide

  20. Wir sind in einer
    Übergangsphase

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  25. Gut: in Alternativen denken!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. CSS ist keine echte
    Layoutsprache.

    View full-size slide

  30. Deshalb lassen sich nicht
    alle wünschbaren Designs
    umsetzen.

    View full-size slide

  31. Testen hilft hier weiter, nicht
    das Design in Photoshop

    View full-size slide

  32. Hinter einer Webseite
    steckt eine Struktur.

    View full-size slide

  33. Hinter einem Photoshop-
    Design nur Pixel.

    View full-size slide

  34. Im Frontend läuft alles
    zusammen.

    View full-size slide

  35. Hier stellt sich heraus, ob
    das Design bedienbar und
    wartbar ist.

    View full-size slide

  36. Man erkennt, ob der
    Entwickler Ahnung und
    ausreichend Zeit hatte.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Voneinander lernen!

    View full-size slide

  40. Zusammenarbeiten!

    View full-size slide

  41. Es heißt http:// nicht psd:// !

    View full-size slide

  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/

    View full-size slide