38-mal heruntergeladen
![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/](https://image.slidesharecdn.com/best-practices-webtech-2011-111011021404-phpapp02/85/Frontend-Best-Practices-87-320.jpg)
Hochgeladen vonJens Grochtdreis
Frontend Best Practices
Die Präsentation von Jens Grochtdreis beschreibt bewährte Praktiken für die Frontend-Entwicklung, darunter die Bedeutung von responsivem Design, semantischer Markup, Barrierefreiheit und dem Einsatz moderner Webtechnologien wie HTML5 und CSS3. Grochtdreis betont die Notwendigkeit, den Fokus auf Inhalte zu legen und Technologien kritisch zu evaluieren, um die Benutzererfahrung zu optimieren. Zudem werden verschiedene Ansätze zur Gewährleistung der Kompatibilität mit unterschiedlichen Browsern und Geräten vorgestellt.
Weitere ähnliche Inhalte
Frontend Best Practices
- 1.
- 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 istper se flexibel
- 6. „Responsive Design“ istalso keine Neuerfindung
- 8. Der Konsument kann Informationenaus dem Internet nutzen, wie er es möchte.
- 9.
- 10.
- 11. wichtige Erkenntnis: Es kannnicht DIE EINE Darstellungsform geben!
- 12.
- 13. Unser Layout istnur eine Empfehlung!
- 14.
- 15.
- 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.
- 20.
- 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.
- 23.
- 24.
- 25.
- 26.
- 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.
- 29.
- 30.
- 31.
- 32.
- 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.
- 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.
- 39.
- 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 integralesElement http://www.flickr.com/photos/pixeldiva/2109688648/
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. Den Fokus nichtvergessen!
- 51.
- 52. ‣ Können ältereIE (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.
- 55. DRY - Don‘trepeat yourself
- 56. „ If Ican see further than anyone else, it is only because I am standing on the shoulders of giants. “ Sir Isaac Newton
- 57.
- 58.
- 59. ‣ Plugins fürjQuery, Wordpress, TYPO3 (...) müssen nicht sinnvoll und gut sein. ‣ Erst testen! Nicht unkritisch nutzen!
- 60. Nicht in Toolsund Techniken zu sehr verlieben
- 61. ‣ Nach sinnvollenEinsatzzwecken von Techniken suchen. ‣ Nicht alles machen, weil es gerade möglich ist. ‣ Immer an die Semantik denken.
- 62.
- 63.
- 64.
- 65.
- 66. Vorsicht bei horizontaler Navigation http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
- 67. Dummybilder http://dummyimage.com/ http://lorempixum.com/
- 68.
- 69.
- 70.
- 73. Was konnten wirbisher 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ülltCSS3?
- 76. neue Layoutmodelle mehr Möglichkeitenmit 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 ‣ WenigerSchmuckbilder 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 gibtkeine!
- 80. Oder doch einenkleinen
- 81. Individuelle Schriften mittels @font-face
- 82.
- 83.
- 84. ‣ Alle Browserkö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.
- 86.
- 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.
- 89.
- 90.
- 91. Date Chrome 15 dev Firefox 5 Opera 11.5
- 92.
- 93. Und wenn einBrowser die neuen Elemente nicht kennt?
- 94. Dann werden dieneuen 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 derBrowser 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.
- 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/