Frontend Best Practices
Jens Grochtdreis‣ Frontendentwickler‣ 10 Jahre Agenturerfahrung‣ 12 Jahre Arbeit im und fürs Web‣ Gründer der Webkrauts‣ B...
Die drei wichtigsten             Best PracticesNachdenken             Recherchieren            Experimentieren http://goo....
Das Web ist per se flexibel
„Responsive Design“ ist also    keine Neuerfindung
Der Konsument kannInformationen aus dem Internet   nutzen, wie er es möchte.
http://mediaqueri.es/
http://www.webdesignshock.com/responsive-design-problems/
wichtige Erkenntnis:Es kann nicht DIE EINEDarstellungsform geben!
http://shouldwebsiteslookthesameinallbrowsers.com/
Unser Layout ist nur eine      Empfehlung!
Frühzeitig aufEntwicklungsstrategie      einigen
IE ≠ modernhttp://css3generator.com/
Progressive Enhancement               ‣ Fokus ist auf den Content, denn um den geht                    es am Ende (fast) i...
Graceful Degredation                ‣ Fokus ist auf den modernsten Browsern                ‣ ältere Browser bekommen eine ...
Brutal Degredation          bis einschließlich IE8      moderne Browserhttp://www.fillerati.com/
http://workdiary.de/
Semantik
Ein Slider - Grobskizze                     IMAGE                                  IMAGE                                  ...
Mal ohne Semantik
Mal mit Semantik
Das falsche Element!
Warum keine Überschrift?http://www.faz.net/
neue semantische Elemente
An die Konsequenzen                          denken               ‣ HTML5-Seiten funktionieren in alten Browsern          ...
Mit Javascript
Ohne Javascript
Versteckspielhttp://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
http://yaccessibilityblog.com/library/css-clip-hidden-content.html
Erkenntnisse gelten selten     für alle Zeiten
‣ Das Drei-Schichten-Modell überlebt sich, denn                      HTML5 ist im Wesentlichen Javascript!               ‣...
Über Barrieren nachdenken
Keine vermeidbaren                              Barrieren                 ‣ Das Netz ermöglicht es                     ers...
mehr ...      mehr ...           mehr ... mehr ...
Konkretes Beispiel
Lösung dafür: WAI-ARIA
 Kleiner Bildschirm Keine Maus Keine Popups
Paradigmenwandel: Barrierefreiheit als                  nachträglicher Einfall, drangedübelthttp://www.flickr.com/photos/be...
Barrierefreiheit als integrales Elementhttp://www.flickr.com/photos/pixeldiva/2109688648/
http://www.flickr.com/photos/johnmcbride1109/2875819859/
Farbkontraste
http://www.ctrl-verlust.net/
https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose
http://snurl.com/t58gj
Fokus
So nicht!
Den Fokus nicht vergessen!
moderne Selektoren
‣ Können ältere IE (bis einschließlich Version 8)  nicht.‣ Ihnen kann mittels Javascript geholfen werden.‣ Wenn es sich um...
http://jsfiddle.net/Flocke/VCSEB/
DRY - Don‘t repeat yourself
„ If I can see further than anyoneelse, it is only because I am standing    on the shoulders of giants. “                 ...
Frameworks nutzen!
Nicht blind nutzen
‣ Plugins für jQuery, Wordpress, TYPO3 (...)  müssen nicht sinnvoll und gut sein.‣ Erst testen! Nicht unkritisch nutzen!
Nicht in Tools und Techniken     zu sehr verlieben
‣ Nach sinnvollen Einsatzzwecken von Techniken  suchen.‣ Nicht alles machen, weil es gerade möglich ist.‣ Immer an die Sem...
http://benthebodyguard.com/
http://jsfiddle.net/Flocke/e6KDU/
Realistische Dummy-Inhalte
Navigation
Vorsicht bei horizontaler                    Navigationhttp://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilderhttp://dummyimage.com/                 http://lorempixum.com/
Dummybilderhttp://placekitten.com/
http://www.blindtextgenerator.de/
http://bueltge.de/html-ipsum/
Was konnten wir bisher mit      CSS machen?
‣ Texte formatieren‣ Farben für Vorder- und Hintergründe‣ Positionierungen‣ Floats‣ Bilder werden für viele Lösungen benöt...
Welche Lücke füllt CSS3?
neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen       Verringerung des        Grafikeinsatzes            ...
Transparenz     mit rgba()                   runde Ecken                         Verläufe (gradient)Transitions           ...
Die Vorteile‣ Weniger Schmuckbilder werden benötigt.‣ Weniger Javascript wird benötigt.‣ Animationen und Transitionen sind...
Die NachteileEs gibt keine!
Oder doch einen kleinen
Individuelle Schriften mittels         @font-face
http://campwapo.org/
http://liechtenecker.at/leistungen/
‣ Alle Browser können es, auch der IE6!               ‣ Die eigentlich gedachte Syntax funktioniert                    nic...
http://www.fontsquirrel.com/
http://www.google.com/webfonts
Textersetzung und Cufon               ‣ Cufon funktioniert nur mit Javascript und ist                    ein Barrierefreih...
HTML5-Formularelemente
HTML5-Formularelemente
http://wufoo.com/html5/
Date             Chrome 15 dev   Firefox 5Opera 11.5
Das placeholder-Attributhttp://wufoo.com/html5/attributes/01-placeholder.html
Und wenn ein Browser dieneuen Elemente nicht kennt?
Dann werden die neuen  Input-Elemente zu <input type=“text“>
Eingebaute Validierung                                         Opera 11.5 Mac                                           Fi...
Und wenn der Browser die Validierung nicht kennt? ‣ Ignorieren ( = Progressive enhancement) ‣ JS-Alternativen bei Bedarf n...
Twitter: @FlockeSlideshare: Flocke669
Jens Grochtdreis                                                     http://grochtdreis.de                                ...
Frontend Best Practices
Frontend Best Practices
Frontend Best Practices
Frontend Best Practices
Frontend Best Practices
Nächste SlideShare
Wird geladen in …5
×

Frontend Best Practices

3.040 Aufrufe

Veröffentlicht am

Vortrag von der WebTech 2011 in Mainz - lose zusammengetragene Empfehlungen für bessere Ergebnisse im Frontend

Veröffentlicht in: Technologie
0 Kommentare
7 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.040
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
821
Aktionen
Geteilt
0
Downloads
37
Kommentare
0
Gefällt mir
7
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Frontend Best Practices

  1. 1. Frontend Best Practices
  2. 2. Jens Grochtdreis‣ Frontendentwickler‣ 10 Jahre Agenturerfahrung‣ 12 Jahre Arbeit im und fürs Web‣ Gründer der Webkrauts‣ Blogger‣ Autor für: PHPMagazin, PHPUser, T3N, Webstandards-Magazin‣ Fachliche Buchbetreuung bei Galileo, OReilly, MuT
  3. 3. Die drei wichtigsten Best PracticesNachdenken Recherchieren Experimentieren http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
  4. 4. Das Web ist per se flexibel
  5. 5. „Responsive Design“ ist also keine Neuerfindung
  6. 6. Der Konsument kannInformationen aus dem Internet nutzen, wie er es möchte.
  7. 7. http://mediaqueri.es/
  8. 8. http://www.webdesignshock.com/responsive-design-problems/
  9. 9. wichtige Erkenntnis:Es kann nicht DIE EINEDarstellungsform geben!
  10. 10. http://shouldwebsiteslookthesameinallbrowsers.com/
  11. 11. Unser Layout ist nur eine Empfehlung!
  12. 12. Frühzeitig aufEntwicklungsstrategie einigen
  13. 13. IE ≠ modernhttp://css3generator.com/
  14. 14. Progressive Enhancement ‣ Fokus ist auf den Content, denn um den geht es am Ende (fast) immerhttp://www.alistapart.com/articles/understandingprogressiveenhancement/
  15. 15. Graceful Degredation ‣ Fokus ist auf den modernsten Browsern ‣ ältere Browser bekommen eine abgespeckte Versionhttp://stuffandnonsense.co.uk/
  16. 16. Brutal Degredation bis einschließlich IE8 moderne Browserhttp://www.fillerati.com/
  17. 17. http://workdiary.de/
  18. 18. Semantik
  19. 19. Ein Slider - Grobskizze IMAGE IMAGE IMAGE  Kategorie Infos Kategorie Infos Kategorie Infos Überschrift Zusatzinfo1 Überschrift Zusatzinfo1 Überschrift Zusatzinfo1 Hier steht ein kurzer Zusatzinfo2 Hier steht ein kurzer Zusatzinfo2 Hier steht ein kurzer Zusatzinfo2 erklärender Text. erklärender Text. erklärender Text.
  20. 20. Mal ohne Semantik
  21. 21. Mal mit Semantik
  22. 22. Das falsche Element!
  23. 23. Warum keine Überschrift?http://www.faz.net/
  24. 24. neue semantische Elemente
  25. 25. An die Konsequenzen denken ‣ HTML5-Seiten funktionieren in alten Browsern nur mittels Javascript. Das betrifft im Wesentlichen IE bis einschließlich Version 8.http://code.google.com/p/html5shim/ http://www.modernizr.com/
  26. 26. Mit Javascript
  27. 27. Ohne Javascript
  28. 28. Versteckspielhttp://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
  29. 29. http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
  30. 30. http://yaccessibilityblog.com/library/css-clip-hidden-content.html
  31. 31. Erkenntnisse gelten selten für alle Zeiten
  32. 32. ‣ Das Drei-Schichten-Modell überlebt sich, denn HTML5 ist im Wesentlichen Javascript! ‣ Browser ändern sich. Deshalb ist es weniger wichtig, alle Javascripte in den Fuss der Seite zu platzieren.http://goo.gl/2h7TZ
  33. 33. Über Barrieren nachdenken
  34. 34. Keine vermeidbaren Barrieren ‣ Das Netz ermöglicht es erstmals, dass JEDER auf Informationen zugreifen kann und in Interaktion treten kann. ‣ Warum also sich selber und die Reichweite des eigenen Angebotes beschränken?http://failblog.org/2010/04/08/epic-fail-photos-hand-rail-fail/
  35. 35. mehr ... mehr ... mehr ... mehr ...
  36. 36. Konkretes Beispiel
  37. 37. Lösung dafür: WAI-ARIA
  38. 38.  Kleiner Bildschirm Keine Maus Keine Popups
  39. 39. Paradigmenwandel: Barrierefreiheit als nachträglicher Einfall, drangedübelthttp://www.flickr.com/photos/beelzebozo/1503756/
  40. 40. Barrierefreiheit als integrales Elementhttp://www.flickr.com/photos/pixeldiva/2109688648/
  41. 41. http://www.flickr.com/photos/johnmcbride1109/2875819859/
  42. 42. Farbkontraste
  43. 43. http://www.ctrl-verlust.net/
  44. 44. https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose
  45. 45. http://snurl.com/t58gj
  46. 46. Fokus
  47. 47. So nicht!
  48. 48. Den Fokus nicht vergessen!
  49. 49. moderne Selektoren
  50. 50. ‣ Können ältere IE (bis einschließlich Version 8) nicht.‣ Ihnen kann mittels Javascript geholfen werden.‣ Wenn es sich um keine „lebensnotwendigen“ Operationen handelt, ist eine Nachhilfe via Javascript okay.
  51. 51. http://jsfiddle.net/Flocke/VCSEB/
  52. 52. DRY - Don‘t repeat yourself
  53. 53. „ If I can see further than anyoneelse, it is only because I am standing on the shoulders of giants. “ Sir Isaac Newton
  54. 54. Frameworks nutzen!
  55. 55. Nicht blind nutzen
  56. 56. ‣ Plugins für jQuery, Wordpress, TYPO3 (...) müssen nicht sinnvoll und gut sein.‣ Erst testen! Nicht unkritisch nutzen!
  57. 57. Nicht in Tools und Techniken zu sehr verlieben
  58. 58. ‣ Nach sinnvollen Einsatzzwecken von Techniken suchen.‣ Nicht alles machen, weil es gerade möglich ist.‣ Immer an die Semantik denken.
  59. 59. http://benthebodyguard.com/
  60. 60. http://jsfiddle.net/Flocke/e6KDU/
  61. 61. Realistische Dummy-Inhalte
  62. 62. Navigation
  63. 63. Vorsicht bei horizontaler Navigationhttp://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
  64. 64. Dummybilderhttp://dummyimage.com/ http://lorempixum.com/
  65. 65. Dummybilderhttp://placekitten.com/
  66. 66. http://www.blindtextgenerator.de/
  67. 67. http://bueltge.de/html-ipsum/
  68. 68. Was konnten wir bisher mit CSS machen?
  69. 69. ‣ Texte formatieren‣ Farben für Vorder- und Hintergründe‣ Positionierungen‣ Floats‣ Bilder werden für viele Lösungen benötigt‣ Manchmal wird Extra-Markup für Bilder- Lösungen benötigt‣ Transparenz mit Nebenwirkungen
  70. 70. Welche Lücke füllt CSS3?
  71. 71. neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen Verringerung des Grafikeinsatzes Animationen neue Selektoren
  72. 72. Transparenz mit rgba() runde Ecken Verläufe (gradient)Transitions media-queries calc() mehrere Spalten
  73. 73. Die Vorteile‣ Weniger Schmuckbilder werden benötigt.‣ Weniger Javascript wird benötigt.‣ Animationen und Transitionen sind mittels CSS schneller, als mittels Javascript.‣ Es wird seltener Code nur für Optik benötigt, der Quellcode schmaler und lesbarer.
  74. 74. Die NachteileEs gibt keine!
  75. 75. Oder doch einen kleinen
  76. 76. Individuelle Schriften mittels @font-face
  77. 77. http://campwapo.org/
  78. 78. http://liechtenecker.at/leistungen/
  79. 79. ‣ Alle Browser können es, auch der IE6! ‣ Die eigentlich gedachte Syntax funktioniert nicht! ‣ Die Resultate sind unter Windows oft erbärmlich, da dessen Schriftrendering zu vielen Schriftarten nicht passt. ‣ Lizenzprobleme ‣ sehr viele freie Schriften ‣ einige gute Tools und Dienstehttp://www.delicious.com/Flocke/font-face
  80. 80. http://www.fontsquirrel.com/
  81. 81. http://www.google.com/webfonts
  82. 82. Textersetzung und Cufon ‣ Cufon funktioniert nur mit Javascript und ist ein Barrierefreiheitsproblem. Eine Seite mit Cufon ist nicht barrierefrei. [http://goo.gl/8HWIq] ‣ Alle CSS-Textersetzungstechniken haben irgendeinen Nachteil, auch bei Barrierefreiheit.http://www.paciellogroup.com/blog/2009/06/notes-accessibility-of-text-replacement-using-html5-canvas/
  83. 83. HTML5-Formularelemente
  84. 84. HTML5-Formularelemente
  85. 85. http://wufoo.com/html5/
  86. 86. Date Chrome 15 dev Firefox 5Opera 11.5
  87. 87. Das placeholder-Attributhttp://wufoo.com/html5/attributes/01-placeholder.html
  88. 88. Und wenn ein Browser dieneuen Elemente nicht kennt?
  89. 89. Dann werden die neuen Input-Elemente zu <input type=“text“>
  90. 90. Eingebaute Validierung Opera 11.5 Mac Firefox 5 Mac Chrome 15 dev MacChrome kommt mit skalierten Seiten nicht zurecht!
  91. 91. Und wenn der Browser die Validierung nicht kennt? ‣ Ignorieren ( = Progressive enhancement) ‣ JS-Alternativen bei Bedarf nachladen, bspw. mit Modernizr (http://modernizr.com) ‣ Polyfills verwenden ‣ https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyfills
  92. 92. Twitter: @FlockeSlideshare: Flocke669
  93. 93. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

×