Gestaltung der Sidebar

  • von Lennart Prange

sidebarsDie Sidebar ist das ergänzende Element auf der Website. Normalerweise bietet sie weitere Funktionen wie eine Suche. Werbung ist dort auch öfters untergebracht. Sie kann darüber entscheiden, ob der Nutzer weiter auf der Website verweilt, da sie häufig weiterführende Informationen enthält, welche vernünftig verpackt werden müssen und deshalb bringt es nichts, sie einfach hin zu klatschen. Aus diesem Grund gibt es heute Tipps und Anregungen in Sachen Gestaltung.

Kommentare und Social Bookmarks würden mich wie immer freuen :). Viel Spaß mit dem Artikel.

Position der Sidebar

Eine Sidebar

Wenn man nur eine Sidebar hat, liegt es nahe, sie rechts zu positionieren. Warum? Nun, ich denke, dass niemand bestreitet, dass die Informationen in der Sidebar nicht so wichtig sind, wie der Content. Da wir von links nach rechts gucken, liegt es also nahe den unwichtigeren Bereich nach rechts zu legen.

Das Problem: Wenn man die primäre Navigation in der Sidebar hat, steht man nun vor ein paar Problemen. Erstens soll die Navigation einfach und schnell zu finden sein. Sie ist mit dem Content gleichzusetzen. Zweitens guckt der Nutzer erfahrungsgemäß zu erst nach links, wenn er keine horizontale Navigation findet.

Lösung: Wenn man nur eine Sidebar hat, sollte man die primäre Navigation nicht in dieser unterbringen. Das löst das obige Problem. Außerdem ist es auch praktischer, da die Navigation viel Platz nimmt. So rückt die Werbung in der Sidebar zum Beispiel nicht weiter nach unten.

Zwei Sidebars

Früher gab es in dem Fall nur eine Möglichkeit: Rechts und links eine Sidebar. In letzter Zeit hat sich das aber ein wenig verändert. Es kommen mehr und mehr Seiten zum Vorschein, die rechts beide unterbringen. Die Überlegung ist immer die gleiche: Der Content geht vor.

Das Problem: Das Problem liegt wieder bei der Navigation. Ist die primäre Navigation in einer der Sidebars, kann man sie nicht beide rechts unterbringen. Dann nimmt man den klassischen Weg: Eine links, eine rechts.

Aussehen der Sidebar

In der Sidebar will man möglichst viele Informationen auf einem kleinen Raum unterbringen. Deswegen ist die Übersicht extrem wichtig. Die ganze Sidebar muss klar gegliedert sein. Jedes Element muss vom anderen sehr einfach zu unterscheiden sein und braucht eine Überschrift. Grafisch sollte man sich, was die Sidebar angeht, zurückhalten. Der Platz ist zu begrenzt. Icons machen sich aber recht gut. In der Sidebar finden sich häufig viele Links. Diese sollten klar als solche erkennbar sein. Als gutes Beispiel könnte man das neue Design von psdtuts.com nennen:

psdtuts

Die Icons passen gut rein und die Elemente sind klar unterteilt. Durch die Buttons ist das ganze noch etwas ausgereifter.

Der Sonderfall: Wenn man auf einer Seite 2 Sidebars hat, ist es wichtig, diese ganz klar voneinander zu trennen, damit keine Verwirrung entsteht. Ein Beispiel ist die Seite benstewart.net:

benstewart

Außerdem: Viele machen beim Gestalten der Sidebar den Fehler, zu wenig freien Raum zu lassen. Man hat links und rechts zwar nicht so viel Platz, nach unten dafür aber jede Menge. Geizt nicht damit. Außerdem sollte man Aufzählungszeichen verwenden, wenn man etwas aufzählt ;).

Die Seite von Ben Stewart zeigt eine weitere Möglichkeit Übersicht zu schaffen: Die einzelnen Quick-Bits heben sich durch den Wechsel von Hell/Dunkel voneinander ab.

10 Kommentare

  1. Mediensache
    1. November 2008 um 10:11 Uhr

    Von psdtuts ist die sidebar sehr gut gelungen. irgendwie passt es da, wenn so viel platz zwischen den einzelnen elementen gelassen wird. ich glaube aber dies funktioniert nur gut, wenn auch im content bereich allgemein großzügig platz gelassen wird. sonst wirkt dies nicht mehr harmonisch.

    Mediensaches letzter Beitrag..Twittern macht Spaß

  2. Denis
    1. November 2008 um 14:34 Uhr

    Das mit der Sidebar links klappt wirklich nicht. Hab das mal zum testen links untergebracht, promt kamen schon die ersten Kommentare, es doch wieder rechts zu machen. Ich persönlich finds auch rechts besser, woltle aber mal sehen, wie es ankommt.

  3. Mywebz
    1. November 2008 um 15:25 Uhr

    Muss auch sagen, dass mir das Design von PSDTUTS sehr gefällt, hab so ein edles Theme selten gesehen…
    Aber weiss irgendwer, wie man sich für seinen eigenen Blog so ein schickes Design “designen” kann und genau an die Ansprüche anpassen, ohne sich ein fertiges downzuloaden?
    Muss man das einfach nur in CSS schreiben können oder gibt`s da Editoren?
    Wäre für Antworten dankbar…

    Mywebzs letzter Beitrag..Blogparade: Eure Lieblingsblogs / Wer liest was?

  4. Lennart Prange
    1. November 2008 um 15:31 Uhr

    Erstmal musst du die Seite in xhtml/css umsetzen. Das kannst du mit Dreamweaver oder einem notepad machen. Dann musst du das Ganze in die typische Struktur von WordPress bringen. Auch das ist mit Dreamweaver o.ä. eine Möglichkeit.

    Schau mal hier. Das könnte dir helfen.

  5. deelite
    3. November 2008 um 12:52 Uhr

    Hundsgemeines deutsch in diesem Beitrag. Soll man das ernst nehmen?

  6. Mywebz
    3. November 2008 um 17:58 Uhr

    @Lennart:
    Dank dir, werde mir wohl bald die Education Version von Dreamweaver bzw. die Web Standard Edition kaufen und mich dann mal einarbeiten…
    @deelite: ???

    Mywebzs letzter Beitrag..Blogparade: Eure Lieblingsblogs / Wer liest was?

  7. Cornelia
    6. November 2008 um 14:56 Uhr

    Wieder einige “Sachen” dazugelernt. Danke für den Beitrag.

    Gruß
    Cornelia

Trackbacks/Pingbacks