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
   

   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