Modularisierung von Webseiten

Jens Grochtdreis

‣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 = OptikSemantik = 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 Grochtdreishttp://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/