Container Design: Denk in Containern, nicht in Spalten beim WebDesign

Container Design ist in, klassische Blog Designs sind out. So einfach ist das. Artikel Ende.

Nicht ganz, denn im heutigen Beitrag möchte ich euch erklären, was mit Container Design genau gemeint ist und welche Vorteile es gegenüber dem klassischen Blog Design hat.

Außerdem zeige ich einige Beispiele, beleuchte eventuelle Nachteile und zeige, wie ihr es auf eurem Blog umsetzten könnt und warum ich so ein großer Fan von Mobile First geworden bin.

Doch halt stop, nicht so schnell, alles der Reihe nach. Fangen wir an mit einer einfachen Erklärung des Ganzen.

Was ist Container Design?

Im Grunde verdeutlicht der Begriff schon sehr genau, worum es schlussendlich geht. Jeder Aspekt einer Website wird als ein einzelner Container betrachtet. Container nehmen dabei die volle Breite ein und befassen sich jeweils mit einem spezifischen Thema, werden also nicht vermischt und somit klar in ihren Inhalten.

Dann folgt ein Container auf den nächsten, sodass die verschiedenen Container quasi gestapelt werden. Da selbige außerdem die volle Breite der Website einnehmen, entsteht automatisch ein sehr cleanes, sauber lesbares Design.

Statt also in Spalten, Absätzen oder verschiedenen Bereichen zu denken, wie beispielsweise beim klassischen Blog Layout, wo meist Content und Sidebar mit Widgets vorhanden sind, wird nun in Containern gedacht. Das hat viele Vorteile, die ich euch nun ein wenig genauer erläutern möchte.

Vorteile vom Container Design

Der Vorteil, der sofort ins Auge springt, ist der, dass die Themenbereiche viel fokussierter dargestellt werden können. Was in einem Container angezeigt wird, gehört demnach immer zusammen. Im Vergleich mit der Sidebar bei einem Blog, wo Widgets so ziemlich alles anzeigen können, ist das deutlich übersichtlicher, logischer, strukturierter eben.

Der nächste Vorteil betrifft den Aspekt, dass die meisten Nutzer mit Smartphone vorbeischauen. Container sind immer Mobile First, da sie über die gesamte Breite gehen und gestapelt werden. So lassen sich Container untereinander tauschen oder verschieben, je nachdem wie wichtig sie sind. Ganz einfach und ohne andere Bereiche oder gar das gesamte Design durcheinanderzubringen.

Weil die Container in sich selbst flexibel bleiben, kann ich in ihnen so viele Blöcke erstellen, wie ich möchte. Ich kann sie farblich unterlegen, mit Überschriften versehen und so sehr klare Inhaltsbereiche erzeugen, die jeder Leser, egal in welchem Alter, sofort versteht. Außerdem motivieren die Container zum Scrollen.

Beispiele

Es gibt ein paar Beispiele, die das Container Design nahezu perfekt umsetzen. Ganz vorne mit dabei ist sicherlich das Portal Ze.tt von Zeit Online, welches sich an jüngere Leser und Leserinnen richtet. Ze.tt setzt das Container Design so perfekt um, dass es besser wohl kaum geht. Jeder Container ist nicht nur klein gehalten, sondern auch noch farblich unterlegt. Das Scrollen und erleben macht hier richtig viel Freude, die Themenblöcke sind klar ersichtlich. Besser geht es meiner Meinung nach wirklich nicht.

Etwas dezenter setzt es Emma.de um. Auch hier wird zwar mit etwas Farbe oder großen Bildern gespielt, allerdings deutlich zurückhaltender. Das macht die Website aber keineswegs weniger gelungen. Sehr gut wurde hier ein Container Design umgesetzt, welches eher seriös erscheint. Mir gefällt das.

Und wo wir schon bei Ze.tt sind, Zeit Online setzt ebenfalls auf ein Container Design, auch wenn selbiges nicht so einprägsam wie bei den eben genannten Beispielen ausfällt und auch noch nicht überall perfekt umgesetzt erscheint.

Wirklich schlecht umgesetzt ist meiner Ansicht nach die Startseite von Gamestar.de. Hier fehlt mir jegliche Führung und obwohl Container bereitstehen, wird trotzdem wieder in Spalten gedacht. Farbliche Markierungen, die bei einem Gaming Portal stimmig sein könnten, fehlen fast komplett und viele Bereiche sind zu groß und mit Text überladen, laden somit weder zum Entdecken, noch zum Scrollen ein, sondern überfordern das Auge einfach nur. So sollte eine Startseite nicht aussehen.

(Kurzer Nachtrag: Die Gamestar hat das wohl plötzlich auch so gesehen wie ich und die Startseite komplett überarbeitet und strukturiert. Das konnte ja niemand ahnen. 🙂
So sah sie davor aus.)

Warum Container Design so genial ist

Einer der größten Vorteile beim Container Design ist und bleibt die Tatsache, dass alle Container unabhängig voneinander funktionieren und jeweils ein gebündeltes Thema besitzen. Egal wo auf eurer Website, ihr könnt die Container also immer wieder einbinden, wenn es an der Stelle einen Sinn ergibt oder gewünscht ist.

Der nächste große Punkt ist das Thema Mobile First. Weil Container stets über die ganze Breite gehen, können sie frei getauscht und angeordnet werden. Da alles aus Containern besteht, die wiederum Boxen enthalten, werden diese am Smartphone einfach untereinander dargestellt, funktionieren ansonsten aber genau wie am Desktop. Responsive Design braucht es da gar nicht mehr wirklich, da Container Design eigentlich von Haus aus Mobile First daherkommt.

Diese Flexibilität macht das Container Design so mächtig. Gepaart mit der Tatsache, dass es leicht verständlich, lesbar und logisch erscheint. Es macht Spaß Websites zu besuchen, die derart aufgebaut sind. Zumindest wenn das Container Design korrekt umgesetzt und verstanden wurde.

Container Design in WordPress

Es gibt inzwischen viele Page Builder und WordPress geht bekanntlich auch immer mehr in diese Richtung, doch das Plugin Grid setzt das Prinzip vom Container Design einfach und effektiv um. Die Erweiterung gibt es im WordPress Plugin-Verzeichnis.

Das Plugin stammt übrigens von Palasthotel, einer deutschen Agentur, die auch selbst für Ze.tt verantwortlich ist. Das Portal von Zeit Online läuft übrigens ebenfalls auf Basis von WordPress und soweit mir bekannt ist, kommt dafür auch genau dieses Plugin zum Einsatz.

Was mit WordPress und dem Plugin Grid möglich ist, zeigt Ze.tt also bereits recht eindrucksvoll. Probiert es doch mal aus, vielleicht krempelt ihr euren Blog anschließend auch komplett um.

Fazit

Dass wir mit unseren Websites Mobile First gehen müssen, hat inzwischen auch der letzte Blogger verstanden, das ist nichts Neues mehr. Container Design per se auch nicht, es wird aber oft nicht richtig zu Ende gedacht oder nur halbherzig umgesetzt, siehe am Beispiel der Gamestar. Dabei kann es so viel leisten.

Vor allem schafft es in meinen Augen aber eine Klarheit, die anders gar nicht erreicht werden kann. Bereiche grenzen sich deutlich ab, Themen teilen sich auf und vor allem bekomme ich bei Containern immer Lust zu Scrollen. Hier weiß ich, wo die interessanten Container sind oder suche sie mir. Außerdem versteht Container Design jeder, egal ob Jugendlicher oder Rentner.

Letzteres ist der wohl größte Vorteil. Denn wo Spalten oder Widgets oft die Übersicht kosten und alles miteinander vermischen, sorgt das Container Design für eine besonders saubere Struktur, die einfach jeder versteht. Das gefällt mir. Auch als Websitebetreiber, da Container problemlos am Smartphone funktionieren und überall und immer wieder angezeigt oder integriert werden können.

Was sagt ihr zum Container Design und den vorgestellten Beispielen? Ist das was für euch? Plant ihr eure Website umzustellen? Schreibt es mir in den Kommentaren