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 Slide

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

    View Slide

  3. HTML ist simpel!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Das Endprodukt eines
    Frontendentwicklers ist nur
    ein Zwischenprodukt.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. Oft wird das Frontend
    nebenher gemacht

    View 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 Slide

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

    View Slide

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

    View Slide

  18. Auch im Internet

    View Slide

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

    View Slide

  20. Wir sind in einer
    Übergangsphase

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

  25. Gut: in Alternativen denken!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. CSS ist keine echte
    Layoutsprache.

    View Slide

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

    View Slide

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

    View Slide

  32. Hinter einer Webseite
    steckt eine Struktur.

    View Slide

  33. Hinter einem Photoshop-
    Design nur Pixel.

    View Slide

  34. Im Frontend läuft alles
    zusammen.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. Voneinander lernen!

    View Slide

  40. Zusammenarbeiten!

    View Slide

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

    View 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 Slide