SlideShare ist ein Scribd-Unternehmen logo
Frontend Best Practices
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
Die drei wichtigsten
             Best Practices




Nachdenken             Recherchieren            Experimentieren
 http://goo.gl/NYGeI      http://goo.gl/HbFx0      http://goo.gl/LohPq
Das Web ist per se flexibel
„Responsive Design“ ist also
    keine Neuerfindung
Der Konsument kann
Informationen 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 EINE
Darstellungsform geben!
http://shouldwebsiteslookthesameinallbrowsers.com/
Unser Layout ist nur eine
      Empfehlung!
Frühzeitig auf
Entwicklungsstrategie
      einigen
IE ≠ modern




http://css3generator.com/
Progressive Enhancement

               ‣ Fokus ist auf den Content, denn um den geht
                    es am Ende (fast) immer




http://www.alistapart.com/articles/understandingprogressiveenhancement/
Graceful Degredation

                ‣ Fokus ist auf den modernsten Browsern
                ‣ ältere Browser bekommen eine abgespeckte
                     Version




http://stuffandnonsense.co.uk/
Brutal Degredation




          bis einschließlich IE8      moderne Browser


http://www.fillerati.com/
http://workdiary.de/
Semantik
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.
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
                    nur mittels Javascript. Das betrifft im
                    Wesentlichen IE bis einschließlich Version 8.




http://code.google.com/p/html5shim/                           http://www.modernizr.com/
Mit Javascript
Ohne Javascript
Versteckspiel



http://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!
               ‣ Browser ändern sich. Deshalb ist es weniger
                      wichtig, alle Javascripte in den Fuss der Seite zu
                      platzieren.




http://goo.gl/2h7TZ
Über Barrieren nachdenken
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/
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übelt
http://www.flickr.com/photos/beelzebozo/1503756/
Barrierefreiheit als integrales Element




http://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 keine „lebensnotwendigen“
  Operationen handelt, ist eine Nachhilfe via
  Javascript okay.
http://jsfiddle.net/Flocke/VCSEB/
DRY - Don‘t repeat yourself
„ If I can see further than anyone
else, it is only because I am standing
    on the shoulders of giants. “
                            Sir Isaac Newton
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 Semantik denken.
http://benthebodyguard.com/
http://jsfiddle.net/Flocke/e6KDU/
Realistische Dummy-Inhalte
Navigation
Vorsicht bei horizontaler
                    Navigation




http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilder




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




http://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ötigt
‣ Manchmal wird Extra-Markup für Bilder-
  Lösungen benötigt
‣ Transparenz mit Nebenwirkungen
Welche Lücke füllt CSS3?
neue Layoutmodelle

mehr Möglichkeiten mit Rahmen und Hintergründen


       Verringerung des
        Grafikeinsatzes
                              Animationen
 neue Selektoren
Transparenz
     mit rgba()                   runde Ecken



                         Verläufe (gradient)

Transitions

                  media-queries

         calc()                   mehrere Spalten
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.
Die Nachteile


Es 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
                    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
http://www.fontsquirrel.com/
http://www.google.com/webfonts
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/
HTML5-Formularelemente
HTML5-Formularelemente
http://wufoo.com/html5/
Date

             Chrome 15 dev   Firefox 5




Opera 11.5
Das placeholder-Attribut




http://wufoo.com/html5/attributes/01-placeholder.html
Und wenn ein Browser die
neuen Elemente nicht kennt?
Dann werden die neuen
  Input-Elemente zu
 <input type=“text“>
Eingebaute Validierung

                                         Opera 11.5 Mac


                                           Firefox 5 Mac


                                           Chrome 15
                                            dev Mac

Chrome kommt mit skalierten Seiten nicht zurecht!
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
Twitter: @Flocke
Slideshare: Flocke669
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/

Weitere ähnliche Inhalte

Was ist angesagt?

Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
Jens Grochtdreis
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Mayflower GmbH
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Jens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Tomas Caspers
 
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPConCross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Christian Heilmann
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
ETH-Bibliothek
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototypingHausammann
 
Testgetriebene Entwicklung mit JavaScript - JAX 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011Testgetriebene Entwicklung mit JavaScript - JAX 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011
Sebastian Sanitz
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner Frontendentwicklung
Jens Grochtdreis
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
Mayflower GmbH
 
Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008
Christian Heilmann
 
„Wieso, läuft doch!?“
„Wieso, läuft doch!?“„Wieso, läuft doch!?“
„Wieso, läuft doch!?“
Lennard Timm
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
Smart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextSmart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextJanGroenefeld
 
36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger
Nicolai Schwarz
 
Präsentation im Rahmen des Live Event zur Accessbility Blog Parade
Präsentation im Rahmen des Live Event zur Accessbility Blog ParadePräsentation im Rahmen des Live Event zur Accessbility Blog Parade
Präsentation im Rahmen des Live Event zur Accessbility Blog Parade
Robert Lender
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
WebGL - An Overview
WebGL - An OverviewWebGL - An Overview
WebGL - An Overview
Jens Arps
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
Francesco Schwarz
 

Was ist angesagt? (20)

Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPConCross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototyping
 
Testgetriebene Entwicklung mit JavaScript - JAX 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011Testgetriebene Entwicklung mit JavaScript - JAX 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner Frontendentwicklung
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008
 
„Wieso, läuft doch!?“
„Wieso, läuft doch!?“„Wieso, läuft doch!?“
„Wieso, läuft doch!?“
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Smart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextSmart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web Context
 
36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger
 
Präsentation im Rahmen des Live Event zur Accessbility Blog Parade
Präsentation im Rahmen des Live Event zur Accessbility Blog ParadePräsentation im Rahmen des Live Event zur Accessbility Blog Parade
Präsentation im Rahmen des Live Event zur Accessbility Blog Parade
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
WebGL - An Overview
WebGL - An OverviewWebGL - An Overview
WebGL - An Overview
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 

Andere mochten auch

96884029 trabajo-ntic-s
96884029 trabajo-ntic-s96884029 trabajo-ntic-s
96884029 trabajo-ntic-s
wilson manobanda
 
rebista
rebistarebista
rebista
Daniel-Juarez
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
Jens Grochtdreis
 
Victlusiones opticas
Victlusiones opticasVictlusiones opticas
Victlusiones opticas
mijv96
 
Correo elctronico
Correo elctronicoCorreo elctronico
Correo elctronico
FRANYGEMMA
 
Ventanas emergentes
Ventanas emergentesVentanas emergentes
Ventanas emergentes
Laboratorio Médico del Chopo
 
El equipo en el sitio de investigación
 El equipo en el sitio de investigación El equipo en el sitio de investigación
El equipo en el sitio de investigación
Jorge Velasco Zamora
 
Los perros
Los perrosLos perros
Los perros
maria_arenas
 
Coworking im Ferienparadies #cowork2015
Coworking im Ferienparadies #cowork2015Coworking im Ferienparadies #cowork2015
Coworking im Ferienparadies #cowork2015
Doris Schuppe
 
Actividad 1
Actividad 1Actividad 1
Dislexiaaa 2
Dislexiaaa 2Dislexiaaa 2
Dislexiaaa 2
Sol Gonzalez
 
8b edward ricardo herrera muños anderson franco la evolucion de la in...
8b edward  ricardo  herrera muños  anderson  franco  la  evolucion de  la  in...8b edward  ricardo  herrera muños  anderson  franco  la  evolucion de  la  in...
8b edward ricardo herrera muños anderson franco la evolucion de la in...
Daniel Herrera
 
Investigacion
InvestigacionInvestigacion
Sistemas sostenibles de produccion pecuaria
Sistemas sostenibles de produccion pecuariaSistemas sostenibles de produccion pecuaria
Sistemas sostenibles de produccion pecuaria
agroecologicojjrg
 
La innovación técnica y el desarrollo sustentable en
La innovación técnica y el desarrollo sustentable enLa innovación técnica y el desarrollo sustentable en
La innovación técnica y el desarrollo sustentable en
33300991
 
Trabajo ntic-s
Trabajo ntic-sTrabajo ntic-s
Trabajo ntic-s
wilson manobanda
 
eStrategy-Magazin - Ausgabe 3 - Leseprobe
eStrategy-Magazin - Ausgabe 3 - LeseprobeeStrategy-Magazin - Ausgabe 3 - Leseprobe
eStrategy-Magazin - Ausgabe 3 - LeseprobeTechDivision GmbH
 
DB-Fahrkartenautomat-Redesign Entwurfslinie A 2006-01-17
DB-Fahrkartenautomat-Redesign Entwurfslinie A 2006-01-17DB-Fahrkartenautomat-Redesign Entwurfslinie A 2006-01-17
DB-Fahrkartenautomat-Redesign Entwurfslinie A 2006-01-17
Tobias Jordans
 
Fassathlon - Laufen - Tutorium
Fassathlon - Laufen - TutoriumFassathlon - Laufen - Tutorium
Fassathlon - Laufen - Tutorium
Sascha Fuchs
 
Conditional project adil
Conditional project adilConditional project adil
Conditional project adil
adiliko7
 

Andere mochten auch (20)

96884029 trabajo-ntic-s
96884029 trabajo-ntic-s96884029 trabajo-ntic-s
96884029 trabajo-ntic-s
 
rebista
rebistarebista
rebista
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
 
Victlusiones opticas
Victlusiones opticasVictlusiones opticas
Victlusiones opticas
 
Correo elctronico
Correo elctronicoCorreo elctronico
Correo elctronico
 
Ventanas emergentes
Ventanas emergentesVentanas emergentes
Ventanas emergentes
 
El equipo en el sitio de investigación
 El equipo en el sitio de investigación El equipo en el sitio de investigación
El equipo en el sitio de investigación
 
Los perros
Los perrosLos perros
Los perros
 
Coworking im Ferienparadies #cowork2015
Coworking im Ferienparadies #cowork2015Coworking im Ferienparadies #cowork2015
Coworking im Ferienparadies #cowork2015
 
Actividad 1
Actividad 1Actividad 1
Actividad 1
 
Dislexiaaa 2
Dislexiaaa 2Dislexiaaa 2
Dislexiaaa 2
 
8b edward ricardo herrera muños anderson franco la evolucion de la in...
8b edward  ricardo  herrera muños  anderson  franco  la  evolucion de  la  in...8b edward  ricardo  herrera muños  anderson  franco  la  evolucion de  la  in...
8b edward ricardo herrera muños anderson franco la evolucion de la in...
 
Investigacion
InvestigacionInvestigacion
Investigacion
 
Sistemas sostenibles de produccion pecuaria
Sistemas sostenibles de produccion pecuariaSistemas sostenibles de produccion pecuaria
Sistemas sostenibles de produccion pecuaria
 
La innovación técnica y el desarrollo sustentable en
La innovación técnica y el desarrollo sustentable enLa innovación técnica y el desarrollo sustentable en
La innovación técnica y el desarrollo sustentable en
 
Trabajo ntic-s
Trabajo ntic-sTrabajo ntic-s
Trabajo ntic-s
 
eStrategy-Magazin - Ausgabe 3 - Leseprobe
eStrategy-Magazin - Ausgabe 3 - LeseprobeeStrategy-Magazin - Ausgabe 3 - Leseprobe
eStrategy-Magazin - Ausgabe 3 - Leseprobe
 
DB-Fahrkartenautomat-Redesign Entwurfslinie A 2006-01-17
DB-Fahrkartenautomat-Redesign Entwurfslinie A 2006-01-17DB-Fahrkartenautomat-Redesign Entwurfslinie A 2006-01-17
DB-Fahrkartenautomat-Redesign Entwurfslinie A 2006-01-17
 
Fassathlon - Laufen - Tutorium
Fassathlon - Laufen - TutoriumFassathlon - Laufen - Tutorium
Fassathlon - Laufen - Tutorium
 
Conditional project adil
Conditional project adilConditional project adil
Conditional project adil
 

Ähnlich wie Frontend Best Practices

Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Jens Grochtdreis
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
Jens Grochtdreis
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Digicomp Academy AG
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
Flash, Ajax & Barrierefreiheit
Flash, Ajax & BarrierefreiheitFlash, Ajax & Barrierefreiheit
Flash, Ajax & Barrierefreiheit
Tomas Caspers
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
Fabian Lange
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und KonsortenPhilipp Naderer
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Christoph Reinartz
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
Oliver Belikan
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
Namics – A Merkle Company
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
Jens Grochtdreis
 
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das WebFahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
Christian Heilmann
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Einführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit BerufsschuleEinführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit Berufsschule
halfman.halfpixel
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
jan_mindmatters
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
Christoph Reinartz
 

Ähnlich wie Frontend Best Practices (20)

Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Flash, Ajax & Barrierefreiheit
Flash, Ajax & BarrierefreiheitFlash, Ajax & Barrierefreiheit
Flash, Ajax & Barrierefreiheit
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das WebFahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
FahrvergnÜgen ohne Handbremse! IE ist Tot - lang lebe das Web
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Einführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit BerufsschuleEinführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit Berufsschule
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 

Mehr von Jens Grochtdreis

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
Jens Grochtdreis
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
Jens Grochtdreis
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
Jens Grochtdreis
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
Jens Grochtdreis
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
Jens Grochtdreis
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
Jens Grochtdreis
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
Jens Grochtdreis
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
Jens Grochtdreis
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag Edition
Jens Grochtdreis
 
Gute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenGute Seiten, schlechte Seiten
Gute Seiten, schlechte Seiten
Jens Grochtdreis
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
Jens Grochtdreis
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Jens Grochtdreis
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
Jens Grochtdreis
 
Die Zukunft des Web
Die Zukunft des WebDie Zukunft des Web
Die Zukunft des Web
Jens Grochtdreis
 

Mehr von Jens Grochtdreis (15)

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag Edition
 
Gute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenGute Seiten, schlechte Seiten
Gute Seiten, schlechte Seiten
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
 
Lightningtalk Erlangen
Lightningtalk ErlangenLightningtalk Erlangen
Lightningtalk Erlangen
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
 
Die Zukunft des Web
Die Zukunft des WebDie Zukunft des Web
Die Zukunft des Web
 

Frontend Best Practices