SlideShare ist ein Scribd-Unternehmen logo
Jens Grochtdreis


Modularisierung von
Webseiten
‣ Frontendentwickler
‣ seit 1999 Arbeit im und fürs Web
‣ seit 2009 selbständig
   ‣ Frontendentwicklung
   ‣ Schulung
   ‣ Beratung
‣ twitter.com/Flocke
Seite ist eine Ansammlung
       von Modulen
Platzierung sollte egal sein
Module entwickeln,
nicht ganze Seiten!
Layout entseht separat -
mit eingefügten Modulen
Layout: Seitengrundgerüst
Module tragen
Designinformationen
Umfangreiche Modulliste
http://structurae.de
Jedes dieser Module
ist eine eigene Datei
Inhalte differieren zwischen
    Layout und Realität
‣ Bei deutschsprachigen Seiten auch deutschen
                     Blindtext nutzen.
                ‣ Möglichst früh mit realen Inhalten arbeiten.
                ‣ Möglichst früh mit realen Navigationsnamen
                     arbeiten - auch wenn diese sich noch ändert.




http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
http://www.blindtextgenerator.de/
http://bueltge.de/html-ipsum/
Dummybilder




http://dummyimage.com/                 http://lorempixel.com/
Dummybilder




http://placekitten.com/
Module richtig entwickeln
Das Modul ist sein eigenes
      Universum!
Trennung zwischen
Layout und Design
Semantisch = HTML
   Design = CSS
http://jsfiddle.net/Flocke/psAwV/
Richtiger Umgang
   mit Klassen
https://github.com/stubbornella/oocss/wiki
https://smacss.com/
http://bem.github.com/bem-method/pages/beginning/beginning.en.html
Semantische Klassen?
Nein! Pflegbare!
CSS = Optik
Semantik = HTML
Nach Farben benannte Klassen
sind dann okay, wenn klar ist, dass
  diese Farben Konstanten sind.
Grundsätzlich sollten Klassennamen
  nicht zu nahe am Objekt sein.
     Abstraktion ist wichtig.
         Und Pflegbarkeit.
Alles hat seine Vor- und
       Nachteile
Sparsam Klassen vergeben
‣ Bei OOCSS und SMACSS vergibt man an
 möglichst alles Klassen. Das ist ungünstig.
‣ Wollen/können wir Redakteuren in
 WYSIWYG-Editoren die Vergabe von Klassen
 an Listen und Absätze aufbürden?
IDs sind böse?
Nein, aber sie sind meist
        unnötig!
‣ IDs benötigen wir, um Labels mit
  Formularelementen zu kombinieren.
‣ IDs sind dann sinnvoll, wenn ich einmalige
  Seitenbereiche auszeichne und diese auch im
  CSS lesbar/erkennbar haben will:
 ‣ #header
 ‣ #footer
 ‣ #wrapper
‣ Manche CMSe vergeben von sich aus IDs.
Allgemeine und
spezielle Klassen
Schnipsel im CSS dank
   Präprozessoren
CSS ist manchmal
nervtötend unflexibel.
zentrales Stylesheet
importiert Module und
 generiert ein CSS-File
Variablen
Positiver Nebeneffekt
‣ Geschwindigkeit in der Entwicklung
‣ Rapid Prototyping mit dem Designer
  zusammen möglich
‣ Photoshop ist für Webdesign nur sehr bedingt
  geeignet.
‣ Der Browser sollte das Designwerkzeug sein!
‣ Es heißt http:// nicht psd://
http://www.flickr.com/photos/artrock2006/4177475479/
UI-Sammlungen
http://foundation.zurb.com/
http://twitter.github.com/bootstrap/
http://foundation.zurb.com/grid.php
http://twitter.github.com/bootstrap/components.html
http://foundation.zurb.com/docs/navigation.php
http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/   https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
http://bootsnipp.com/
Jens Grochtdreis
                                                      http://grochtdreis.de/
                                                    http://twitter.com/Flocke
                                                       http://webkrauts.de
                                                     http://grochtdreis.de/+




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

Ähnlich wie Modularisierung von Webseiten

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
Jens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Jens Grochtdreis
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
Jens 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 2011
Jens Grochtdreis
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
HansruediDbeli1
 
Mit WordPress durchstarten
Mit WordPress durchstartenMit WordPress durchstarten
Mit WordPress durchstarten
Frank Schmittlein
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
Jens Grochtdreis
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsMaria Herrmann
 
SEO Onpage Webgewandt (Dr. Karin Windt) - Vortrag Allianz Deutscher Designer ...
SEO Onpage Webgewandt (Dr. Karin Windt) - Vortrag Allianz Deutscher Designer ...SEO Onpage Webgewandt (Dr. Karin Windt) - Vortrag Allianz Deutscher Designer ...
SEO Onpage Webgewandt (Dr. Karin Windt) - Vortrag Allianz Deutscher Designer ...
Dr. Karin Windt
 
JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome Anpassungshandbuch
JoomlaShine
 
Blogsysteme: Vorstellung von WordPress - Internetwoche Köln #IWCGN14
Blogsysteme: Vorstellung von WordPress - Internetwoche Köln #IWCGN14Blogsysteme: Vorstellung von WordPress - Internetwoche Köln #IWCGN14
Blogsysteme: Vorstellung von WordPress - Internetwoche Köln #IWCGN14
Realizing Progress
 
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
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
Jens Grochtdreis
 
JSN Teki Anpassungshandbuch
JSN Teki AnpassungshandbuchJSN Teki Anpassungshandbuch
JSN Teki Anpassungshandbuch
JoomlaShine
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
OER-Seminar: Potenziale und Fallstricke - Urheberrecht, OER und Creative Comm...
OER-Seminar: Potenziale und Fallstricke - Urheberrecht, OER und Creative Comm...OER-Seminar: Potenziale und Fallstricke - Urheberrecht, OER und Creative Comm...
OER-Seminar: Potenziale und Fallstricke - Urheberrecht, OER und Creative Comm...
Matthias Andrasch
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Sven Schultschik
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Sven Wolfermann
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
Torsten Landsiedel
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
Markus Greve
 

Ähnlich wie Modularisierung von Webseiten (20)

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
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
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
 
Mit WordPress durchstarten
Mit WordPress durchstartenMit WordPress durchstarten
Mit WordPress durchstarten
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
 
SEO Onpage Webgewandt (Dr. Karin Windt) - Vortrag Allianz Deutscher Designer ...
SEO Onpage Webgewandt (Dr. Karin Windt) - Vortrag Allianz Deutscher Designer ...SEO Onpage Webgewandt (Dr. Karin Windt) - Vortrag Allianz Deutscher Designer ...
SEO Onpage Webgewandt (Dr. Karin Windt) - Vortrag Allianz Deutscher Designer ...
 
JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome Anpassungshandbuch
 
Blogsysteme: Vorstellung von WordPress - Internetwoche Köln #IWCGN14
Blogsysteme: Vorstellung von WordPress - Internetwoche Köln #IWCGN14Blogsysteme: Vorstellung von WordPress - Internetwoche Köln #IWCGN14
Blogsysteme: Vorstellung von WordPress - Internetwoche Köln #IWCGN14
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
 
JSN Teki Anpassungshandbuch
JSN Teki AnpassungshandbuchJSN Teki Anpassungshandbuch
JSN Teki Anpassungshandbuch
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
OER-Seminar: Potenziale und Fallstricke - Urheberrecht, OER und Creative Comm...
OER-Seminar: Potenziale und Fallstricke - Urheberrecht, OER und Creative Comm...OER-Seminar: Potenziale und Fallstricke - Urheberrecht, OER und Creative Comm...
OER-Seminar: Potenziale und Fallstricke - Urheberrecht, OER und Creative Comm...
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014HTML5 für Entwickler: Part 1, 2014
HTML5 für Entwickler: Part 1, 2014
 

Mehr von Jens Grochtdreis

Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
Jens 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 Edition
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
 
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
 
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
Jens Grochtdreis
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
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
 
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
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
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 (19)

Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
 
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
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
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)
 
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)
 
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
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
 

Modularisierung von Webseiten