Das kleine Spalten-1x1: Was du beim Designen für liquid responsive beachten solltest

5. November 2015 von Sebastian Maier

So designst du Spalten für Mobile & Spalten-Design-Inspirationen

Gibt es die perfekte Spaltenbreite? Diese Frage hören wir bei smooster während der Projektberatung von Designern immer wieder. Die zahlreichen von uns umgesetzten Webprojekte zeigen, dass Spalten immer anders sind und sein müssen. Es hängt von dem jeweiligen Content und den spezifischen Anforderungen an die Website ab, wie die Spalte aussieht und wie groß sie ist.

Wortlängen

Wörter beziehungsweise Wortlängen können beispielsweise ein Indiz für die ideale Spaltenbreite einer Website sein. Einige Designer wählen beim Webdesign den “content first”-Ansatz und richten das Layout nach den Texten aus. Das bedeutet für Spalten, dass diese mindestens so breit sein müssen wie das längste Wort, wenn es nicht zu unschönen Umbrüchen kommen soll. Doch dabei muss bedacht werden, dass sich Texte auf Websites immer wieder ändern und das Spaltendesign daher dynamisch genug sein muss.


Bilder

Die Größe der Spalte hängt zudem davon ab, ob Bilder in der Spalte sind. Wird die Spalte auf dem Endgerät verkleinert, wird auch das Bild verkleinert und ist unter Umständen nicht mehr richtig erkennbar.

Also wie gesagt gibt es die perfekte Spaltenbreite nicht. Doch eines steht fest: die “richtige” Größe und das Layout der Spalte werden vor allem auch vom Endgerät definiert, auf dem sie angezeigt wird – ob auf dem Desktop, dem Tablet oder dem Smartphone. Sie muss sich also anpassen können.

Und damit steigen wir schon direkt ein in die Materie: Was gibt es dabei zu beachten, wenn du Spalten für Mobile gestaltest?


Mobile & Spalten

Bei mobilen Endgeräten und dem mittlerweile gängigen Liquid Design muss man sich vorher überlegen, welches Element sich verändern darf. Wir zeigen euch dies anhand eines Beispiels von vier Spalten im quadratischen Format, die bei Desktop eine Breite von 960px haben.

Ein Beispiel von vier Spalten im quadratischen Format

Bei kleiner werdendem Display werden die Spalten immer schmaler. Das heißt, die Elemente müssen sich verändern. Hier muss man sich als Designer nun zwischen zwei Varianten entscheiden.


Variante 1

Die Spalte verlässt das quadratische Aussehen und wird zu einem länglichen Rechteck. Die Schriftgröße bleibt gleich.

Das quadratische Format wird zu einem länglichen Rechteck


Variante 2

Möchte man das Seitenverhältnis der quadratischen Boxen beibehalten, muss der Text in diesen Boxen sich anpassen. Irgendwann wird der Text dadurch richtig klein und ist kaum noch zu lesen.

Passt sich das Seitenverhältnis automatisch an, wird der Text klein kaum lesbar

Aufgrund der Lesbarkeit sollte daher ab einem bestimmten Bildschirmverhältnis eine Umpositionierung der Spalten stattfinden.

Das könnte dann so aussehen:

Ab einem bestimmten Bildschirmverhältnis sollte eine Umpositionierung der Spalten stattfinden

Für die Darstellung auf kleinen Bildschirmen, beispielsweise beim iPhone5 mit einer Bildschirmbreite von 320px, sollte man darauf achten, dass die Bildschirmbreite nicht überschritten wird. Denn sonst wäre der Inhalt nicht auf dem kompletten Display sichtbar und man müsste hin- und herscrollen.


Webdesign-Inspirationen für Spalten

Nach der ganzen Theorie kommen hier noch ein paar frische, kreative Webdesign-Beispiele und wie man Animationen für Spalten einsetzen kann.

  1. Auf der Website kko.de findet ihr Spalten, in denen Inhalte ohne Abstand zueinander eingefügt wurden. Bei hover verschwindet der Overlay und gibt das Bild der Person frei.

    Auf der Website kko.de findet ihr Spalten, in denen Inhalte ohne Abstand zueinander eingefügt wurden.

  2. Animationen der einzelnen Inhalte verleihen der Website www.kikk.be/2015 einen frischen Wind. Bei mouse over legt sich hier, wie rechts außen zu sehen, ein Rahmen in das Bild. Zudem wackelt das Bild wie eine Karte aus Karton bei einer Mausbewegung. Über weitere Animationen für Interaktion haben wir einen gesonderten Artikel geschrieben.

    Bei der Website WWW.KIKK.BE/2015 legt sich bei mouse over ein Rahmen in das Bild

  3. Auf www.gold.ac.uk geht es nicht um eine Animation, sondern um die Anordnung der Inhalte. Die Textboxen sind immer etwas kürzer als die Bilder in den Spalten und werden von verschiedenen Seiten “hineingeschoben”, was dem Design einen verwobenen Look verleiht.

    Auf www.gold.ac.uk werden Textboxen von verschiedenen Seiten “hineingeschoben”


Fazit

Spalten müssen keinem Schema F folgen, sondern einfach nur sinnvoll durchdacht sein. Das gilt sowohl für die Optimierung für mobile Endgeräte als auch für Animationen.



An was orientiert ihr euch beim Design von Spalten? Was ist eure Lieblingsmethode, um einem Element den besonderen Kick zu geben?





zurück
comments powered by Disqus