$30 off During Our Annual Pro Sale. View Details »

Am Ende ist doch alles HTML

Am Ende ist doch alles HTML

Vor der JavaUG Hessen in Kassel sprach ich über die sehr speziellen Herausforderungen und Eigenheiten der Frontendentwicklung. Dieser Bereich wird allzu oft auf die leichte Schulter genommen und zu oft von wenig Kundigen betreut. Dabei darf man die Bedeutung eines guten Frontends nicht unterschätzen.

Jens Grochtdreis

January 19, 2015
Tweet

More Decks by Jens Grochtdreis

Other Decks in Technology

Transcript

  1. The browser is a really hostile programming environment. Douglas Crockford

    https://www.flickr.com/photos/clement127/15348079616
  2. Frontend ist wichtig ‣ Beim Endkunden kommen HTML, CSS und

    Javascript an, nicht PHP, Java oder Ruby. ‣ Das Frontend beeinflusst die erlebte Performance sehr stark, stärker als das Backend.
  3. Typische Frontendaufgaben ‣ source-order für SEO optimieren ‣ Theming ‣

    auf mobile Geräte anpassen ‣ responsive Webdesign ‣ Performance ‣ leichte Wartbarkeit
  4. Alles sollte Sinn haben ‣ Ein Link wird mit einem

    DIV kombiniert. ‣ Der Link soll eine Checkbox imitieren, die nebenbei auch existiert, aber ausgeblendet ist. ‣ Das DIV soll ein Label imititieren. https://twitter.com/tcaspers/status/506036082295988224
  5. Ein Slider - Grobskizze   IMAGE Kategorie Überschrift Hier

    steht ein kurzer erklärender Text. Infos Zusatzinfo1 Zusatzinfo2 IMAGE Kategorie Überschrift Hier steht ein kurzer erklärender Text. Infos Zusatzinfo1 Zusatzinfo2 IMAGE Kategorie Überschrift Hier steht ein kurzer erklärender Text. Infos Zusatzinfo1 Zusatzinfo2
  6. Mögliche Strategie ‣ Genauer definieren, welche Zusatzaufwände eine möglichst gute

    Simulation moderner Techniken für den IE bedeutet. ‣ runde Ecken und Schatten für die gesamte Site ‣ mit CSS3: 30 Minuten, 1 Frontendentwickler ‣ für oldIE: ca. 4 bis 5 Stunden für den Frontendentwickler, mindestens die gleiche Zeit für Grafik und Backend
  7. Graceful Degredation ‣ Fokus ist auf den modernsten Browsern ‣

    ältere Browser bekommen eine abgespeckte Version http://stuffandnonsense.co.uk/ - alte version
  8. 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.
  9. ‣ runde Ecken ‣ linear-gradient ‣ transform ‣ box-shadow ‣

    text-shadow ‣ content-Generierung mit :after und :before
  10. Einfacher Test ‣ Folgendes in unterschiedlichen Browsern auf Windows und

    Mac OSX anschauen: ‣ beliebige Webfonts ‣ alle Formularelemente - ungestylt ‣ Checkbox & Radiobutton padding geben ‣ Windows mal eine andere Oberfläche geben!
  11. Der IE macht viel Arbeit ‣ Je älter der IE

    wird, umso mehr muss man sich Zeit für seine Fehler nehmen. ‣ Erst ab Version 9 werden moderne Techniken unterstützt. Für ältere Versionen brauchen wir Tricks oder Polyfills. Da kostet nicht nur das Testen Zeit.
  12. An die Konsequenzen denken http://code.google.com/p/html5shim/ http://www.modernizr.com/ ‣ HTML5-Seiten funktionieren in

    alten Browsern nur mittels Javascript. Das betrifft im Wesentlichen IE bis einschließlich Version 8.
  13. 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/