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

1. Frontend Best Practices

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, O'Reilly, MuT

4. Die drei wichtigsten
Best Practices
Nachdenken Recherchieren Experimentieren
http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq

5. Das Web ist per se flexibel

6. „Responsive Design“ ist also
keine Neuerfindung

8. Der Konsument kann
Informationen aus dem Internet
nutzen, wie er es möchte.

9. http://mediaqueri.es/

10. http://www.webdesignshock.com/responsive-design-problems/

11. wichtige Erkenntnis:
Es kann nicht DIE EINE
Darstellungsform geben!

12. http://shouldwebsiteslookthesameinallbrowsers.com/

13. Unser Layout ist nur eine
Empfehlung!

14. Frühzeitig auf
Entwicklungsstrategie
einigen

15. IE ≠ modern
http://css3generator.com/

16. Progressive Enhancement
‣ Fokus ist auf den Content, denn um den geht
es am Ende (fast) immer
http://www.alistapart.com/articles/understandingprogressiveenhancement/

17. Graceful Degredation
‣ Fokus ist auf den modernsten Browsern
‣ ältere Browser bekommen eine abgespeckte
Version
http://stuffandnonsense.co.uk/

18. Brutal Degredation
bis einschließlich IE8 moderne Browser
http://www.fillerati.com/

19. http://workdiary.de/

20. Semantik

21. 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.

22. Mal ohne Semantik

23. Mal mit Semantik

24. Das falsche Element!

25. Warum keine Überschrift?
http://www.faz.net/

26. neue semantische Elemente

27. 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/

28. Mit Javascript

29. Ohne Javascript

30. Versteckspiel
http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg

31. http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg

32. http://yaccessibilityblog.com/library/css-clip-hidden-content.html

33. Erkenntnisse gelten selten
für alle Zeiten

34. ‣ 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

35. Über Barrieren nachdenken

36. 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/

37. mehr ...
mehr ...
mehr ...
mehr ...

38. Konkretes Beispiel

39. Lösung dafür: WAI-ARIA

40.  Kleiner Bildschirm
 Keine Maus
 Keine Popups

41. Paradigmenwandel: Barrierefreiheit als
nachträglicher Einfall, drangedübelt
http://www.flickr.com/photos/beelzebozo/1503756/

42. Barrierefreiheit als integrales Element
http://www.flickr.com/photos/pixeldiva/2109688648/

43. http://www.flickr.com/photos/johnmcbride1109/2875819859/

44. Farbkontraste

45. http://www.ctrl-verlust.net/

46. https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose

47. http://snurl.com/t58gj

48. Fokus

49. So nicht!

50. Den Fokus nicht vergessen!

51. moderne Selektoren

52. ‣ 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.

54. http://jsfiddle.net/Flocke/VCSEB/

55. DRY - Don‘t repeat yourself

56. „ If I can see further than anyone
else, it is only because I am standing
on the shoulders of giants. “
Sir Isaac Newton

57. Frameworks nutzen!

58. Nicht blind nutzen

59. ‣ Plugins für jQuery, Wordpress, TYPO3 (...)
müssen nicht sinnvoll und gut sein.
‣ Erst testen! Nicht unkritisch nutzen!

60. Nicht in Tools und Techniken
zu sehr verlieben

61. ‣ Nach sinnvollen Einsatzzwecken von Techniken
suchen.
‣ Nicht alles machen, weil es gerade möglich ist.
‣ Immer an die Semantik denken.

62. http://benthebodyguard.com/

63. http://jsfiddle.net/Flocke/e6KDU/

64. Realistische Dummy-Inhalte

65. Navigation

66. Vorsicht bei horizontaler
Navigation
http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/

67. Dummybilder
http://dummyimage.com/ http://lorempixum.com/

68. Dummybilder
http://placekitten.com/

69. http://www.blindtextgenerator.de/

70. http://bueltge.de/html-ipsum/

73. Was konnten wir bisher mit
CSS machen?

74. ‣ 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

75. Welche Lücke füllt CSS3?

76. neue Layoutmodelle
mehr Möglichkeiten mit Rahmen und Hintergründen
Verringerung des
Grafikeinsatzes
Animationen
neue Selektoren

77. Transparenz
mit rgba() runde Ecken
Verläufe (gradient)
Transitions
media-queries
calc() mehrere Spalten

78. 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.

79. Die Nachteile
Es gibt keine!

80. Oder doch einen kleinen

81. Individuelle Schriften mittels
@font-face

82. http://campwapo.org/

83. http://liechtenecker.at/leistungen/

84. ‣ 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 Dienste
http://www.delicious.com/Flocke/font-face

85. http://www.fontsquirrel.com/

86. http://www.google.com/webfonts

87. 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/

88. HTML5-Formularelemente

89. HTML5-Formularelemente

90. http://wufoo.com/html5/

91. Date
Chrome 15 dev Firefox 5
Opera 11.5

92. Das placeholder-Attribut
http://wufoo.com/html5/attributes/01-placeholder.html

93. Und wenn ein Browser die
neuen Elemente nicht kennt?

94. Dann werden die neuen
Input-Elemente zu
<input type=“text“>

95. Eingebaute Validierung
Opera 11.5 Mac
Firefox 5 Mac
Chrome 15
dev Mac
Chrome kommt mit skalierten Seiten nicht zurecht!

96. 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

97. Twitter: @Flocke
Slideshare: Flocke669

98. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
http://slideshare.net/Flocke669
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/