Tim Adler

Als Webdesigner ist man eigentlich immer ein bisschen unzufrieden mit seiner Webseite. Da gibt es immer etwas zu tüfteln. Irgendeine coole neue Technologie, die man einbauen könnte oder irgendeine Kleinigkeit, die am Design noch nicht so wirklich stimming ist. Deshalb hat es wohl mit der alten Version der Seite nicht so ganz lange gehalten. Neben vielfältigen anderen Gründen, war mir Expression Engine als Backend, obwohl es zu dem Besten gehört, was PHP zu bieten hat, dann doch zu unflexibel.

Also sollte nun eine neue Seite her. Ein, zwei Dinge standen für mich vorher fest: Zum einen sollte es ein reines Blog mit einer kleinen Präsentationsecke für meine Projekte werden, zum anderen wollte ich Django als Framework einsetzen. Aber bevor man loslegt braucht man ein...

Konzept
Der erste Schritt war, genau festzulegen, welche Inhalte das neue Blog überhaupt präsentieren können sollte. Da Django hier jeden Freiraum lässt und man sich beliebig komplizierte Datenmodelle ausdenken kann, gab es kaum Einschränkungen.
Neben den üblichen Blog-Dingen, wie Beiträge und Links sollte es also eine Projekteecke geben. Allerdings noch nicht genug, auch jede beliebige andere Art von Inhaltsseite wollte ich aufsetzen können, nur für den Fall der Fälle. Letztendlich ergaben sich also folgende Inhaltstypen für das neue Blog:

• Beiträge
  Stellen die eigentlich Blog-Beiträge dar und somit der eigentliche Hauptinhalt der neuen Seite.
• Kommentare
  Gehören in jedes gute Blog. Ohne die wäre das Ganze ja recht einseitig. Sind natürlich jeweils mit den Beiträgen verknüpft.
• Randnotizen
  Zusammen mit einem kurzen Kommentar werden hier interessante Links veröffentlicht
• Projekte
  Unter diesen Inhaltsbereich fallen, wie schon erwähnt meine Referenzen. Zusammen mit einem Screenshort der Arbeit und einem Link auf die Kundenseite.
• Seite
  Der "Backup"-Inhaltstyp für strukturfreien oder statischen Inhalt.

Zusätzlich zu diesen Inhaltstypen musste es aber auch noch einen für die Navigation geben. Ganz einfach aus dem Grund, dass wenn man einen beliebigen neuen Inhalt anlegen konnte, dann sollte man ihn, falls nötig auch in der Navigation verlinken können. Da man in Django letztendlich ein echtes Datenmodell mit Klassen und Beziehungen anlegen kann, überlegt man sich am besten vorher auch schonmal, wie das aussehen soll. Wenn ich jetzt schreiben würde, dass ich das tatsächlich VOR der Implementierung gemacht habe, dann wäre das geflunkert, aber es macht sich so schön. Hier also das Datenmodell, was diese Seite im Moment befeuert:

Falls man UML-technisch etwas bewandert ist, dann sollte sich das fast von selbst erklären. Falls jemand so bewandert ist, dass er Fehler findet...dann...ach was solls, geht ja ums verstehen :)! Die Implementierung in Django ist übrigens denkbar einfach. Der Voreilige guckt vielleicht in die Django-Dokumentation. Voerst würde ich aber gerne etwas über das Design erzählen.

Design
Für das Design einer Seite sind ein paar Dinge ziemlich wichtig: Zum einen eine Inspiration oder Idee, wie die Seite tatsächlich aussehen soll, zum anderen aber auch ein klares Wissen darüber welche Inhalte für eine Seite wichtig sind und wieviel Aufmerksamkeit sie im Optimalfall kriegen sollen. Natürlich gibt es auch noch einen Haufen anderer Dinge beim Webdesign grundlegend zu beachten, zum Beispiel dem Besucher sofort klar zu machen, worum es auf der Seite geht. Allerdings sind die Kategorien hier so vielfältig, dass erstmal auf ein gutes Buch von Steve Krug verwiesen sei.
Im Fall meines Blogs habe ich mir das so konkret eigentlich nur für die Startseite überlegt. Da ich seid gestern nunmehr Fan von Page-Description-Diagrammen bin, versuche ich das mal daran klar zu machen:

 Hohe Aufmerksamkeit
Mittlere Aufmerksamkeit
 Niedrige Aufmerksamkeit

Wo bin ich, was kann ich hier tun?
Diese grundsätzliche Frage sollte auf jeder Webseite sofort vom Benutzer beantwortet werden können. Egal ob das durch einen passenden Header oder einen Willkommensrülpser passiert.

Neuester Beitrag
Der neueste Beitrag aus dem Blog sollte natürlich auch hier im Mittelpunkt stehen.

Randnotizen
Zwar sehe ich die Randnotizen teilweise als fast genauso wichtig an, wie die Blog-Beiträge allerdings liegen Sie doch noch einen Schritt dahinter

Ältere Beiträge
Vorgangene Beiträge sollten auf der Seite zwar auch auftauchen, allerdings eher sekundär.

Navigation
Der User muss natürlich überall frei entscheiden können, wie er navigiert.

Flickr
Eigentlich nur ein Gimmick im Blog, allerdings nicht zu uninteressant, dass es gar nicht auftauchen müsste.

RSS-Feed
Ich bin ein Fan von technischer Kompentenz, deshalb preise ich den Feed gar nicht extra an, sondern hoffe, dass ihn jeder Suchende über der Browser selber findet.

Ist man sich hier im Klaren sollte man eine passende Farbpalette wählen. Dabei gibt es wiederum einige Dinge beachten. Wer sich interessiert, der guckt mal hier. In meinem Fall hatte ich mir meine Farbpalette bereits vorgegeben und in Visitenkarte und Briefpapier verwendet. Sie stammt übrigens von Colourlovers was damit auch empfohlen sei. Ganz neu gibt es natürlich auch Kuler direkt von Adobe.

Eine Inpiration für das Seitenlayout macht natürlich alles einfacher. Ich persönlich hole mir dazu gerne Ideen zum Beispiel bei Designer's Couch oder CSS Remix. Habe aber auch gleichzeitig immer eine kleine Sammlung von Seiten auf der Festplatte um auch offline zum Beispiel mit einem Kunden zusammen durch einige Beispiele durchgucken zu können.

Seitenraster
Früher oder später findet man sich aber immer wieder vor einem leeren Photoshop-Screen wieder und muss dann die Ideen zu Pixel bringen. Um das einfacher zu machen, empfehle ich folgende Punkte zu beachten:

• Die Arbeitsfläche sollte man auf eine Art Standardmaß vergrößern: Dabei ist die Arbeitsfläche immer breiter als 1024, allerdings ist der wirkliche Kernbereich der Seite immer leicht kleiner. Der Kernbereich sollte auf jeden Fall ein Vielfaches des Rasters sein. Bei dieser Seite ist er zum Beispiel 840px breit. Der Abstand zum Außenrand der Arbeitsfläche ist wichtig, weil man nämlich dann gezwungen ist, sich auch darüber Gedanken zu machen, was passiert, wenn die Seite mal breite als gewünscht angezeigt wird. Darüber sollte man aber Kopf und Fuß der Seite aber nicht vergessen. Ob das Layout liquide wird oder nicht, sollte man schon im Kopf haben, entscheidet das hier aber noch nicht.
• Für einfacheres Wählen von Größen und Ausrichten von Elementen sollte man ein Raster einstellen. Ich wähle da häufig einen Rasterabstand von 8px, weil er in meinen Augen einen guten Kompriss darstellt.
• Schlussendlich richtet man an dem Kernbereich einige Hilfslinien aus, die den eigentlichen Inhaltsbereich der Seite in verschiedene Spalten teilen. Dabei sollten diese Hilfslinien den Kernbereich einmal halbieren, dritteln, vierteln und sechsteln. Dann hat man genug Linien um ein sinnvolles Spaltenkonzept zu erstellen. Mark Boulton hat dazu einen sehr guten Artikel geschrieben.

 So sieht das Ganze dann in etwa aus:

Letztendlich bleibt dann allerdings schlussendlich nichts anderes mehr übrig, als der Kreativität freien Lauf zu lassen und anhand der bis hierhin festgelegten Hilfestellungen ein Seitenlayout zu erstellen. Bin mir kam also das, was Ihr hier seht, oder aber das Folgende heraus:

Mit diesem Design war ich von Anfang an sehr zufrieden. Sehr viel zufriedener, als mit dem alten. Was schon immer das beste Vorzeichen für ein Design war. Beim Design unbedingt beachten sollte man auch die Lage der "Falz" (untere Browserkante wo der zu Erscrollende Bereich beginnt) bei verschiedenen Auflösungen. Im Optimalfall ist hier noch ein wenig vom weiteren Inhalt zu sehen, um den Besucher quasi in den weiteren Bereich der Seite hinzuziehen.

An dieser Stelle soll es aber für den ersten Teil meiner kleinen Blog-Entstehungsgeschichte genug sein. Im nächsten Schritt geht es um die Umsetzung in CSS/XHTML. Schaut also wieder rein.

Nachher: Blog mit Django: XHTML & CSS
Nachher: CSS-Coding-Tipps
Nachher: Blog mit Django: Installation und Datenmodelle
Nachher: Blog-Features für Django