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

Container Design: Denk in Containern, nicht in Spalten beim WebDesignContainer 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.

Für Werbe-Links auf dieser Seite zahlt der Händler ggf. eine Provision. Diese Werbe-Links sind am Sternchen (*) zu erkennen. Für dich ändert sich nichts am Preis. Mehr Infos.

Was ist Container Design?

All-Inkl HostingWerbung

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.

WERBUNG
Viele Websites sind abmahngefährdet! Deine auch? Mit den 10 Premium-Generatoren von eRecht24 kannst du Datenschutzerklärung, Impressum, Cookie-Einwilligung und Co. zentral an einem Ort automatisch per Knopfdruck erstellen und aktualisieren. www.e-recht24.de
DSGVO Schritt-für-Schritt Generator - Word- & Excel-Vorlage Ein große Hilfe bei der Erstellung des eigenen Verarbeitungsverzeichnisses, der Risikoanalyse, der technischen und organisatorischen Maßnahmen und des eigenen Datenschutzkonzepts bietet dieser DSGVO Schritt-für-Schritt Generator. Hier sind über 120 vorausgefüllte Vorlagen (Word und Excel) enthalten, so dass man in kürzester Zeit die eigenen DS-GVO Unterlagen erstellt hat. dsgvo-vorlagen.de
Mehr Einnahmen mit dem Amazon Partnerprogramm! Das Amazon Affiliate Plugin für WordPress bietet Bestseller-Listen, Vergleichstabellen, Produktboxen, aktuelle Angebote und mehr. Als SiN-Leser sparst du 20% auf mein Lieblings-Plugin für das Amazon Partnerprogramm. www.aawp.de

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.

Was hältst du von Container Design?

Ergebnis anschauen

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.

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

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

ALL-INKL.COM - Webhosting Server Hosting Domain Provider
Werbung

12 Gedanken zu „Container Design: Denk in Containern, nicht in Spalten beim WebDesign“

  1. 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

    Antworten
  2. 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.

    Antworten
  3. Warum nicht einfach beim Gutenberg bleiben. Erst alles deaktivieren und jetzt ein neues Plugin installieren…?!? Das macht doch kein Sinn David ;-)

    Antworten
  4. 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

    Antworten
  5. 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

    Antworten
  6. 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.

    Antworten
  7. 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.

    Antworten
  8. 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

    Antworten
  9. 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.

    Antworten
    • 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.

      Antworten
  10. 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

    Antworten

Schreibe einen Kommentar