WebDesign by mts

Startseite » Webdesign Tutorial » CSS » das kleine Geheimnis erfolgreicher Designs – der Abstand – White Space – CSS Praxistipp

das kleine Geheimnis erfolgreicher Designs – der Abstand – White Space – CSS Praxistipp

in CSS, von mts

Du hast Dir mit Deiner Homepage, Deinem Blog wirklich viel Mühe gegeben. Viel Text tippst Du täglich da hinein. Dann siehst Du in Deinen Counter und merkst, dass die Leute vorbeischauen, aber viel zu schnell wieder gehen. Fragst Dich wieso andere soviele Leser haben. Das Geheimnis liegt im Abstand. Der Abstand bringt ein Design zur Geltung.

So widersprüchlich es sich auch liest, doch mit Abstand bindet man User an sich. Abstand fesselt das Auge, weil der Abstand im Design dem Auge einen Haltepunkt liefert. Ohne Abstand verliert sich Text zur Einheitsmasse, die unlesbar wird. Klar gibt es Websites, die man auch liest ohne Abstand, doch deren Inhalt muss man lesen. Alle erfolgreichen Designs nutzen ihn den Abstand. White Space wird er auch genannt.

Wie der Abstand als Gestaltungsmittel erkannt wurde sieht man schön an der Entwicklung alter Homepages.

Holzwurmpage im Jahr 2003

Holzwurmpage im Jahr 2007

Die Holzwurmpage ist so eine. Artikel aus dem Jahr 2003 fand ich darin und älter und da diese Holz Page immer noch gepflegt wird, die letzte Entwicklung aus dem heurigen Jahr 2007. Die beiden Screenshots zeigen mehr als ich tippen kann.

Zuerst viel Information. Sogar mit Listen gestaltet, diese haben aber noch keinen Abstand. Dann eine Unterseite, die aufgelockert mit Bild, mit viel Platz von Text zu Text und Platz zwischen Bild und Text das Auge führt und alles lesbar macht.

Es ist oft absolut unnötig alles neu zu machen, um den Abstand zu gestalten, sondern Vorhandenes kann oft ganz leicht ergänzt werden.

CSS Praxistipp – Abstand

Die wichtigen Werkzeuge für diesen Abstand gab CSS mit line-height, margin und wenn nötig auch padding.

Dein persönliches wichtigstes Werkzeug ist der Mut zur Lücke.

line-height

Line-height ist die Zeilenhöhe. Hier ein Musterbeispiel aus SELFHTML.

In so einem StyleSheet herrscht strenge Hierarchie. So kann man auch die Zeilenhöhe vererbend angeben. “Body” eignet sich gut dafür.

Vor allem, wenn man line-height nachträglich angibt, empfiehlt sich eine prozentuelle oder relative Angabe wie hier.

body{line-height:1.4em;font-size:1em;}

oder:

 
body{line-height:140%;font-size:101%;}

Nutzt Du die sogenannte Short Hand, dann kann dies so aussehen:

 
body{font:1em/1.4em "Trebuchet ms","Gill Sans MT", "Gill sans", sans-serif; }

Die Angabe von line-height ist äußerst sinnvoll bei Listen -ul oder ol – und deren “li”.

Mancher Browser hat sonst die Eigenschaft sich selbstständig zu machen und zeigt Abstände irr hoch oder eben keine.

Mit der Zeilenhöhe kann man natürlich auch *spielen*. Manches bewusst eng stellen, manches bewusst auseinanderziehen.

Ich nutze “p” tatsächlich als Textabsatz Markierung. Daher hat “p” hier einen sehr hohen Zeilenabstand.

Abstand zu Bildern img und margin

Wenn der Text ein Bild umfließen soll ist der Abstand zum Text sehr wichtig. Sonst verliert sowohl das Bild wie der Text an Aussagekraft. Andererseits soll Bild und Text zusammenhängen, sollte man den Abstand auch nicht zu weit machen.

Das Bild steht Links, der Text Rechts.

 
img{margin-right:6px;}

Hast Du mehrere margin Angaben nötig, weil Du auch nach oben und unten Abstand magst, dann kann dies so aussehen:

margin: oben rechts unten links

 
img{margin: 10px 6px 4px 0;}

Abstand von Listen zum Text

Die Listen sollen oben und unten viel Abstand zum anderen Text haben und auch weiter nach innen rücken:

margin: oben/unten rechts/links

 
ul,
ol{margin: 25px 30px;}

Abstand im Code pre /code

Zeigst Du Code /HTML oder anderes so wie ich hier an, dann ist es oft unumgänglich sehr viel padding zu verwenden, weil sonst der IE den unteren Scrollbalken so an den Text klebt, dass diese unlesbar wird.

 
 
pre{padding:15px 3px 16px 4px;	}

Ich empfehle aber mit “padding” dem Innenabstand sehr sparsam umzugehen. Der IE hat die Angewohnheit diesen zur Gesamtbreite eines Elementes dazu zuzählen. Das Ergebnis ist oft eine nach unten gerutschte Sidebar oder ähnliches.

Ja aber das Scrollen

Ich höre auch immer wieder: Ich mag ein Design wo der User nie scrollen muss. Gleichzeitig sollen 12 Bilder für Produkte und je Bild 4 Zeilen Text untergebracht werden.

Wenn geht, dann eben die Schrift kleiner machen, oder die Bilder.

Kleine, zusammen klebende, unlesbare Bilder und Texte mögen das Scrollen verhindern, aber sie verhindern auch das Lesen und wieder kommen.

Probier es auch. Nutze line-height,margin und hie und da padding und betrachte dann Dein neues altes Design.

WP Themes mit Abstand

White Space als wichtiges Element im Design – Nachlese

Grantasticdesigns. Dann Netmechanic, wo ebenfalls ein kleines Tutorial zu finden ist, wie man einzelne Blöcke im Design trennt. Sheriftariq zeigt wie viel Platz die Augen hypnotisiert. Anschaulich auch bei AListApart.

Danke an Michael Finger von der Holzwurm Page.

Es ist nicht selbstverständlich, dass einem wer erlaubt seine Homepage auch als *so nicht* Beispiel zeigen zu dürfen. Daher mein aufrichtiges Danke an Dich Michael.

Diese Website hat alles was man sich zum Thema Holz auch nur denken kann. Und sie ist eine der Websites, die liebevoll gepflegt die Jahre -2002 – 2007 – übersteht und deren Inhalt kaum altmodisch wird.

Es machte mir wirklich Freud dort zu lesen. Oft hörte ich schon von CNC Maschinen, doch das die erste NC im Jahre 1940 gebaut wurde las ich beim Holz Wurm.

Deine Homepage entwickelte sich mit Abstand zur verdammt guten Holz Page und durch Abstand.

ich feiere Geburtstag mit WebDesign-in.de. Auch Du bist eingeladen.

Basis Know-how CSS
Internetmarketing

• Textgestaltung - zentrierter Text ist Schmuck

Top

2 zu : das kleine Geheimnis erfolgreicher Designs – der Abstand – White Space – CSS Praxistipp