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
- So fügst du PDF- und Drucken-Button in deine Website-Artikel ein + Plugin-Tipps - 23. November 2022
- So muss euer Facebook-Titelbild aussehen, damit es geklickt wird! - 10. März 2022
- 3 WordPress Plugins für Diagramme: Visualizer, wpDataTables & WP Charts and Graphs - 15. Februar 2022
Ich stimme Dir vollkommen zu. Container-Design ist die Zukunft.
Oftmals hat man Webseiten, die in drei Spalten vollgepackt sind mit Informationen. Leider ist es hier schwer die Übersicht zu behalten, was den Betreiber auch schnell wieder besuchen kosten kann. Dadurch steigt die Absprungrate.
Ich denke, dass auf dauer immer mehr Blogger und Webseiten-Betreiber auf Container-Design setzen werden.
Die Zeit wird es zeigen.
Viele Grüße
Tim
Das mit dem Container-Design ist grundsätzlich eine gute Sache. Da spielt aber auch das Thema des Blogs mit rein. ZE.tt hat ja eher einen Zeitungscharakter mit unterschiedlichen Themenarten. Bei einem thematisch fokussierten Blog (wie bei mir zum Thema Imkerei) will man ja in der Regel den aktuellsten Beitrag oben stehen haben. Und da kann man da noch recht gut old school über Kategorien arbeiten und die Beiträge so filtern.
Warum nicht einfach beim Gutenberg bleiben. Erst alles deaktivieren und jetzt ein neues Plugin installieren…?!? Das macht doch kein Sinn David 😉
Hallo David,
mein erster Gedanke bei deinen Worten “Container Design” war “Wie passend, ich arbeite auch gerade mit Docker & WordPress.” Aber du beziehst dich stattdessen auf das Layout.
Aber um beim Thema zu bleiben: Wenn es das Thema der Seite zulässt finde ich diese Entwicklung interessant. Insbesondere, wenn die Reihenfolge der Container oder die Boxen intelligent auf die jeweiligen Endgeräte/Bildschirmbreiten abgestimmt sind, sehe ich damit einen riesen Gewinn für die Leser. Mit abgestimmt meine ich z.B. einzellne Boxen nur auf dem Smartphone anzuzeigen oder andere ähnlich einer Sidebar nur auf dem Desktop. Dafür aber direkt neben dem passenden Kontext im Container. Die Idee dahinter gefällt mir sehr.
Das PlugIn Grid werde ich mir mal näher ansehen.
Beste Grüße
Ein interessanter Aspekt des Layouts. Ohne, dass mir das bisher so bewusst war, arbeite ich schon seit einiger Zeit an der Anpassung meiner Website. Ich will auch von der klassischen Sidebar weg. Dummerweise macht diese Art der Änderung auch eine Menge Arbeit. Aber ich bleibe dran. Danke für deinen interessanten Artikel.
LG Burkhard
Hallo David,
ich finde den Artikel sehr interessant. Tatsächlich würde ich mir mehr dieser Art wünschen.
Bei jedem neuen Artikel überlege ich mir, wie ich ihn optisch aufwerten könnte um ihn interessanter zu gestalten. In meinen Augen macht gutes Design eine ganze Menge aus. Genau in diesem Zusammenhang fand ich die Idee „in Containern zu denken“ äußerst unpraktisch. Ja, unpraktisch.
Nachdem ich allerhand Addons getestet habe, bin ich zu dem Schluss gekommen, dass weniger mehr ist. Das Schöne an WordPress ist doch, dass ich meiner kompletten Seite mit einem neuen Theme einen neuen Look geben kann. Ich kann quasi die ganze Seite auf einmal ändern. Würde ich nun meine Artikel nicht mehr in den Editor schreiben, sondern in ein Addon, dann verliere ich diese Freiheit. Dazu mache ich mich abhängig von einem Addon und deren Weiterentwicklung.
Erst danach ist mir aufgefallen, dass in deinen Beispielen die einzelnen Artikel davon gar nicht berührt sind. Vielmehr bekommt jeder Menüpunkt eine eigene Landingpage in genau diesem Design. Das wiederum finde ich sehr spannend.
So etwas habe ich noch nicht. Vielen Dank für die Inspiration.
Ich habe gerade einen neuen Blog gestartet und bin nun am Herumstöbern, was aktuell Aufbau, SEO usw. betrifft. Da bin ich auf selbstaendig-im-netz gestoßen, dass mir bereits bei meinem letzten Blog (2012 – ~2015) geholfen hat. Qualtität setzt sich wohl doch durch 🙂
Die Container-Design-Idee ist ja in der Tat nicht neu, aber manchmal braucht man doch einen Trigger, um es wieder ins Auge zu fassen.
Hallo,
wie hat denn die Seite “ze.tt” das mit der Videospalte auf der Startseite gemacht? Ich finde das richtig interessant das man auf der Startseite sieht, das es sich in dem Artikel um ein Video handelt.
Lg sassie
Das ist über die Kategorie geregelt und CSS.
Kategorie Video = Layout XY 🙂
Aber richtig, schön gelöst.
Ich finde das kommt sehr stark auf den Inhalt an. Bei Seiten, wo es rein um journalistische Beiträge geht wie bei Ze.tt, macht es total Sinn. Finde ich auch optisch sehr gut. So sieht man kurz und knapp ein Bild + die entsprechende Headline.
Bei Nischenseiten hingegen sehe ich das aber eher kontraproduktiv. Da präferiere ich ein Full-Width Layout oder maximal 2 Spalten, da es dort auf viel Inhalt ankommt mit entsprechenden Produktplatzierungen. Solche Seiten ranken ja eher durch viel Content anstatt durch kurze Headlines.
Ich denke auch, dass pauschale Aussagen auch hier problematisch Sinn. Geht der Trend in diese Richtung, ja aus verschiedenen Gründen. Ist es für alle Websites die richtige Lösung, sicher nicht.
Ich merke ja selbst an meinem Nutzungsverhalten am Smartphone, dass es einfach Websites und Themen gibt, wo dieser kurze und schnelle Überblick wichtig ist. Aber bei anderen Themen nutze ich das Netz anders oder gar nicht über das Smartphone.
Ich verwende oft Avada wenn ich für meine Kunden Webseiten erstelle.
Das Containerdesign ist damit auch ganz leicht umsetzbar.
Ich hoffe das demnächst noch andere Themes eine Containerbauweise unterstützen werden