SlideShare a Scribd company logo
1 of 54
Download to read offline
Jens Grochtdreis

Gute Seiten,
Schlechte Seiten
Was ist „gut“?
Das Netz bietet die Möglichkeit,
Informationen von JEDEM in
JEGLICHER Form konsumierbar zu
machen.
Warum soll man diese Stärke unnötig
ignorieren?
Möglichst wenige Fehler (Validität)
Semantische Struktur (jemand hat sich
über den Inhalt der Seite Gedanken
gemacht)
Daran denken, daß man nichts darüber
weiß, WIE jemand die Seite konsumiert.
In Alternativen denken.
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Was richtig schlechtes
zur Einstimmung
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Finanzamt Pirmasens
• In 2009 immernoch nicht barrierefrei!
• Designfrei und hässlich
• Tabellenlayout und kindische Bildchen
• Keine Semantik
• Frameset
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Die Schlechten
Barrierefreie Seiten …
• … müssen nicht häßlich sein
• … sollten gut lesbar sein
• … sollten semantischen Code haben
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
div id=quot;h1Homepagequot;
Ladezeiten beachten!
• 8 MB für eine reine Flashseite ohne
  jegliche Alternative sind sehr viel, auch
  für DSL.
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Framesets sind tückisch
• Ein Netbook hat nur 600 Pixel Höhe.
• Frames sind technisch nicht mehr
  notwendig.
• Frames schränken die notwendige
  Flexibilität stark ein.
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Layouttabellen sind böse
• Aber Tabellen für tabellarische Daten sind
  prima.
• Es heißt ja auch Bundesliga-Tabelle, nicht
  Bundesliga-DIV.
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Luft zum Atmen geben
• Fixierung in der Höhe macht Inhalte nicht
  flexibel nutzbar.
• Spätestens bei der zweiten Vergrößerung
  ist der Inhalt nicht mehr lesbar.
• Wer sagt denn, daß niemand Ihre
  Webseite vergrößern will oder muss?
Gute Seiten, Schlechte Seiten -  Webmontag Edition
1x1 des Webdesigns
• IDs sind einmalig
• Tabellen nur für tabellarische Daten
• FONT ist out und ähbäh!
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Die Guten
In Alternativen denken
• Alternativen für Javascript
• Alternativen für Flash
• Aber auch mal in Browseralternativen
  denken (Flasheinbettung mit JS)
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Schattenseiten
• „Wo viel Licht, da auch viel Schatten“
• Nach 10 Sek. erster Werbebanner (wenn
  man Glück hat)
• Nach 30 Sek. beginnt der Seitenaufbau
  (186 Objekte)
• 1,4 Minuten bis Komplettaufbau (insges.
  4,2 MB, inkl. 2,6 MB Flash)
• 645 KB Scripts
Schattenseiten
• 32 CSS-Dateien !
 • ca. 183 KB
 • nicht-komprimiert, nicht-optimiert
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Styleswitcher mal anders
• Eine Code für vier Ansichten
• Nur die Google Map wird nachgeladen
• Kein zeitraubender Reload
• Kein unnützer und teurer Traffic
• Javascript sinnvoll genutzt
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Alternative zu JS-Version
• Mit Javascript gibt es schnelle optische
  Änderungen.
• Jeder dieser Zustände ist ohne Javascript
  als eigene Seite erreichbar.
• Ohne Javascript sieht das Layout exakt
  gleich aus.
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Schmankerl
Guter Code != schöne Seite
Gute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag Edition
<a href=quot;http://creativecommons.org/licenses/by-nc-sa/2.0/de/quot;
 rel=quot;licensequot;>Attribution-Noncommercial-Share Alike 2.0</a>
KTHXBAI!

More Related Content

Viewers also liked

eStrategy ausgabe 6 leseprobe
eStrategy ausgabe 6 leseprobeeStrategy ausgabe 6 leseprobe
eStrategy ausgabe 6 leseprobeTechDivision GmbH
 
Charts E Commerce Deutschland
Charts E Commerce DeutschlandCharts E Commerce Deutschland
Charts E Commerce DeutschlandWebguard
 
Médico conozca nuestra nueva App disponible en App Store para dispositivos iO...
Médico conozca nuestra nueva App disponible en App Store para dispositivos iO...Médico conozca nuestra nueva App disponible en App Store para dispositivos iO...
Médico conozca nuestra nueva App disponible en App Store para dispositivos iO...Laboratorio Médico del Chopo
 
Libro plan especifico
Libro plan especificoLibro plan especifico
Libro plan especificoSol Gonzalez
 
Similitudes entre metodo cientifico y solucion de problemas
Similitudes entre metodo cientifico y solucion de problemasSimilitudes entre metodo cientifico y solucion de problemas
Similitudes entre metodo cientifico y solucion de problemasadrianajm18
 
Uso de soffwere educativo
Uso de soffwere educativoUso de soffwere educativo
Uso de soffwere educativoFRANYGEMMA
 
Fus herramientas copia
Fus herramientas copiaFus herramientas copia
Fus herramientas copiaderlyinfo
 
Weibliche Formulierungen
Weibliche FormulierungenWeibliche Formulierungen
Weibliche Formulierungenundergroundjam
 
Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1mariaeugenia2012
 
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
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Jens Grochtdreis
 
Ebay übernimmt Magento - Grundlagenwissen
Ebay übernimmt Magento - GrundlagenwissenEbay übernimmt Magento - Grundlagenwissen
Ebay übernimmt Magento - GrundlagenwissenTechDivision GmbH
 
Präsentation des FH-Projekt-Prototypen bei der DB in FFM
Präsentation des FH-Projekt-Prototypen bei der DB in FFMPräsentation des FH-Projekt-Prototypen bei der DB in FFM
Präsentation des FH-Projekt-Prototypen bei der DB in FFMTobias Jordans
 

Viewers also liked (20)

Filosofia
FilosofiaFilosofia
Filosofia
 
eStrategy ausgabe 6 leseprobe
eStrategy ausgabe 6 leseprobeeStrategy ausgabe 6 leseprobe
eStrategy ausgabe 6 leseprobe
 
Charts E Commerce Deutschland
Charts E Commerce DeutschlandCharts E Commerce Deutschland
Charts E Commerce Deutschland
 
Just cars
Just carsJust cars
Just cars
 
Médico conozca nuestra nueva App disponible en App Store para dispositivos iO...
Médico conozca nuestra nueva App disponible en App Store para dispositivos iO...Médico conozca nuestra nueva App disponible en App Store para dispositivos iO...
Médico conozca nuestra nueva App disponible en App Store para dispositivos iO...
 
Libro plan especifico
Libro plan especificoLibro plan especifico
Libro plan especifico
 
Similitudes entre metodo cientifico y solucion de problemas
Similitudes entre metodo cientifico y solucion de problemasSimilitudes entre metodo cientifico y solucion de problemas
Similitudes entre metodo cientifico y solucion de problemas
 
Uso de soffwere educativo
Uso de soffwere educativoUso de soffwere educativo
Uso de soffwere educativo
 
Londres
LondresLondres
Londres
 
Fus herramientas copia
Fus herramientas copiaFus herramientas copia
Fus herramientas copia
 
Weibliche Formulierungen
Weibliche FormulierungenWeibliche Formulierungen
Weibliche Formulierungen
 
Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1
 
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)
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
 
Ebay übernimmt Magento - Grundlagenwissen
Ebay übernimmt Magento - GrundlagenwissenEbay übernimmt Magento - Grundlagenwissen
Ebay übernimmt Magento - Grundlagenwissen
 
La internet
La internetLa internet
La internet
 
Alpes
AlpesAlpes
Alpes
 
Desert scenes 2
Desert scenes 2Desert scenes 2
Desert scenes 2
 
Menu de Pueblos Blancos
Menu de Pueblos BlancosMenu de Pueblos Blancos
Menu de Pueblos Blancos
 
Präsentation des FH-Projekt-Prototypen bei der DB in FFM
Präsentation des FH-Projekt-Prototypen bei der DB in FFMPräsentation des FH-Projekt-Prototypen bei der DB in FFM
Präsentation des FH-Projekt-Prototypen bei der DB in FFM
 

More from Jens Grochtdreis

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowJens Grochtdreis
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Jens Grochtdreis
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
 
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 2011Jens Grochtdreis
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenJens 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 aufbauenJens Grochtdreis
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CJens Grochtdreis
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungJens 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
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine GemäldeJens Grochtdreis
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne WebentwicklungJens Grochtdreis
 

More from Jens Grochtdreis (20)

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
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
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
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
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
 
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)
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
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