Das Fundament ihres Layouts ist HTML. Es gilt nun, die in der Konzeption gefundene Struktur in die Praxis umzusetzen.

Grundlagen der Gestaltung

Gestaltung ist nicht nur Geschmackssache. Sie folgt vielmehr psychologisch definierten Grundregeln. Die Kenntniss dieser Regeln ist wichtig, damit ihr Design kein Produkt des Zufalls wird.

Wahrnehmung

Figur und Grund. Menschen unterscheiden bei der Betrachtung zwischen Vorder- und Hintergrund. Eine Figur scheint im Vordergrund zu liegen, wenn sie als Form erkennbar ist, z.B. als regelmäßige Gestaltung und Abgrenzung. Der Hintergrund wird im Gegensatz dazu als nicht begrenzt wahrgenommen.

http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php

http://www.duoh.com/contact

Nähe. Elemente, die nah beieinander liegen, scheinen auch zusammenzugehören. Sie werden als eine Einheit wahrgenommen. Sie können einzelne Bereiche ihrer Website so optisch gruppieren und zusammenschweißen.

naehe

Ähnlichkeit. Den Anschein von Zusammengehörigkeit erwecken auch einander ähnliche Elemente. Die Ähnlichkeit kann sich auf Form, Farbe oder Größe beziehen.

http://www.webmasterpro.de/design/article/gesetz-der-aehnlichkeit.html

Fortsetzung: Menschen achten bevorzugt auf Linien. Finden sie solche, setzen sie sie in Gedanken fort. Am Beispiel der Website Zoo Frankfurt kann man das schön sehen: das Hintergrundbild der Skyline von Frankfurt wird von der Navigation unterbrochen, was jedoch nicht als störend empfunden wird sonder eher Spannung erzeugt.

http://www.zoo-frankfurt.de/

Symmetrie: Menschen achten auf Ordnung. Symmetrische  Elemente werden daher als zusammengehörig wahrgneommen, asymmetrische als difus.

http://www.themealings.com.au/

http://www.shiner.com/

Formen

Geometrische Figuren wie Rechteck, Kreis oder Dreieck stehen für klare Formen, aber auch für eine gewisse optische Kälte. Außerdem assoziieren wir solche Formen (insbesondere in Verbindung mit starke Farben wie rot) oft mit Regularien, wie z.B. Verkehrszeichen.

http://www.case-3d.com/

http://rallyinteractive.com/

Nicht geometrische, abstrakte Formen wirken modern und künstlerisch. Oft sind sie aber schwer greifbar und wenig intuitiv. Sie sollten daher eher sparsam eingesetzt werden.

http://www.avioc.com/

Formkontraste: Formen kommunizieren Ideen und helfen dabei, eine Aussage zu transportieren. Treffen unterschiedliche Formen aufeinander entstehen Kontraste, die solche Aussagen verstärken können. Wenn sie z.B. ein mit vorherschend rechteckigen Formen gebautes Design haben, können sie besondere Sonderangebote mit runden Formen optisch betonen und herausstellen.

Linien:  Linien unterteilen eine Website in zusammengehörige Themenbereiche und helfen bei der Orientierung. Darum werden sie bei Tabellen oder tabellarischen Ansichten häufig eingesetzt.

https://www.microsoft.com/de-de/windows/compare

Rechtecke und Kanten: Rechteckige Formen in der horizontalen lösen starke Assoziationen zu Häusern und Architektur aus. Der Inhalt der Rechtecke scheint zueinander zu gehören und vom Rest der Außenwelt abgesetzt zu sein.

http://fontsofchaos.com/

Dreiecke: Dreiecke haben für Menschen eine besondere Spannung, weil bei ihnen optisch ein Element zur Vollkommenheit zu fehlen scheint. Das Auge sucht nach diesem vierten Element, dem fehlenden Punkt. Je nach Anordnung des Dreiecks kann es ein Gefühl von Stabilität und Solidität erzeugen (wenn das Dreick auf der Basis steht), oder ein Gefühl der Instabilität (wenn es auf seiner Spitze steht). Dreiecke erzeugen eine Assoziation zu Hierarchien, weil es immer eine Spitze gibt. Vom Gefühl her also ein König der über seinen Untertanen steht.

http://www.iamyuna.com/

Kreise und Kurven: Kreise erscheinen vollkommen. Sie sind die gelichmäßigste Form überhaupt. Kreise sind untrennbar mit einem Gefühl der Mitte verbunden und werden oft mit Ewigkeit und Unfassbarkeit verbunden.
Eng verbunden mit dem Kreis ist die Kurve, die ein Teil eines Kreises ist. Kurven wirken natürlich und erzeugen ein Gefühl von Sicherheit und Geborgenheit.

http://fortherecord.simonfosterdesign.com/

Gestaltungsregeln

Wenn es um die Planung eines Layouts geht, helfen allgemein gültige Gestaltungsregeln.

Der goldene Schnitt: Eine der bekanntesten Gestaltungsregeln überhaupt. Er beschreibt ein besonders harmonisches Verhältnis von Elementen zueinander und lässt sich sogar mathematisch definieren: verhalten sich Elemente in ihren Proportionen wie 1: 1,618 zueinander, stehen sie im Goldenen Schnitt zueinander.

goldener schnitt

So ideal der Goldene Schnitt für eine harmonische Anordnung von Elementen ist, sie werden als Webdesigner nur selten den Taschenrechner herausholen und diese exakt berechnen. Es geht eher um die Entwicklung eines Blicks für die Harmonie des Goldenen Schnitts, den sie im Laufe der Zeit entwicklen werden. Irgendwann erkennen sie ganz automatisch, wann sich etwas richtig anfühlt.

Der Goldenen Schnitt eignet sich besonders, um eine harmonische Seitenaufteilung zu erzielen.

Drittelregel: Aus der Fotografie ist das Gestaltungsprinzip der Drittelregel bekannt. Danach teilt sich ein Bild vertikal und horizontal in je drei gelich große Bereiche. Die wichtigsten Bildelemente sollten sich auf diesen Linien befinden. Dieses Gestaltungsprinzip lässt sich auch auf das Webdesign übertragen.

drittelregel

 

CSS-Layouts und -Elemente

Nachdem Sie nun einiges über die wichtigsten gestalterischen Grundlagen erfahren haben, geht es nun daran diese Basiskenntnisse mit der entsprechenden Technik in die Praxis umzusetzen. Das Mittel der Wahl heißt: CSS. Ein solides Grundwissen in CSS ist für die nachfolgenden Abschnitte Voraussetzung.

CSS-Spezifität

Die Spezifität ist eine der wichtigsten, aber auch kompliziertesten Aspekte von CSS. Sie legt fest, welche CSS-Eigenschaft den Vorrang hat. Nehmen wir an, wir haben ein HTML-Element p mit der Klasse gelb. Dieses Element lässt sich in CSS mit

p.gelb {}

ansprechen. Gleichzeitig kann es aber auch CSS-Anweisungen für alle p-Elemente geben und sogar spezielle Anweisungen für die Klasse gelb. Welche Eigenschaften letztlich für das gerade aktuelle Element angewendet werden, entscheidet die Spezifität. Sie richtet sich immer nach den Selektoren. Treffen zwei Selektoren aufeinander, gewinnt derjenige mit der höheren Spezifikation.

Die Rangfolge der Spezifikation ist die wie folgt gegliedert, aufsteigend von weniger wichtig bis am wichtigsten:

  • Element-Selektoren: h1, p, span, etc.
  • Klassen und Attribute: .gelb
  • IDs: #hauptmenu
  • Stilangaben per style-Attribut: <h1 style="color: red; font-size: 14px;"

Es gewinnt immer der Selektor, mit der höchsten Spezifikation.

Pseudoklassen und Pseudo-Elemente in CSS

Eine Sonderform von Klassen in CSS sind Pseudoklassen, also Klassen, die es eigentlich gar nicht gibt. Sie werden nicht von Ihnen als Webdesigner vergeben, sondern vom Browser bereitgestellt. Zwei der wichtigsten Pseudoklassen sind :hover und :focus. Beide kommen im Zusammenhang mit Links zum Einsatz und legen fest, was geschehen soll wenn der Nutzer mit der Maus über den Link fährt oder den Link anwählt. Beispiel:

a {
   color: #666666;
   text-decoration: none;
}

Mit dieser Anweisung legen Sie die Farbe des Links fest und bestimmen, dass er keinen Unterstrich haben soll. Fährt der Nutzer nun mit der Maus über den Link, soll der Link eine optische Rückmeldung geben. Das könnte so aussehen:

a:hover {
   color: #ff7800;
   text-decoration: underline;
}

Diese Anweisungen kommen dann ins Spiel, wenn der Nutzer den Link mit der Maus überfährt. Die Pseudoklasse für :focus könnte so aussehen:

a:focus {
   color: #ff7800;
   text-decoration: underline;
}

In der Praxis können :hover und :focus durchaus identische Anweisungen enthalten.

Pseudo-Elemente

Eng verwandt mit den Pseudoklassen sind die Pseudo-Elemente. Auch sie werden mit einem Doppelpunkt angesprochen, beziehen sich jedoch auf ein anderes HTML-Element. Zum Beispiel lässt sich :after das dem angesprochenen HTML-Element folgende Element ansprechen.

section:after {
   content: 'TEST';
   color: #ff7800;
}

In der Praxis werden Pseudo-Elemente häufig verwendet, um Icons oder kleine Grafiken in das Design einzubinden.

CSS-Reset

Nehmen wir an, Sie haben eine ganz neue Webseite erstellt, allein mit den Basis-Elementen, einer H1-Überschrift und ein bisschen Fließtext in einem p-Element. Kein CSS. Alles ganz nackt. Trotzdem stellt der Browser den Text unterschiedlich groß dar und dazu noch in der Schriftart Times New Roman. Zwischen den Text-Elementen wurden Abstände eingefügt. Wie kann das sein?

Einfache Antwort: vom Browser. Er ist darauf gedrillt, ungestylte HTML-Elemente mit einem so genannten Default-Stylesheet darzustellen, sofern kein anderes Stylesheet zu finden ist. Das hat Vorteile, können Sie sich doch darauf verlassen, dass Ihre Website auch ohne eigene CSS-Eigenschaften semantisch dargestellt werden. In der Regel möchte man das Styling einer Website eben nicht dem Browser überlassen und erstellt eigene CSS-Stylesheets. Diese haben dann immer Vorrang vor den Stylesheets des Browsers.

Speziell die Abstände, die das Default-Stylesheet automatisch einfügt, sorgen oft für Verwirrung und graue Haare beim Webdesigner. Um diese für das eigene Stylesheet zu entfernen, gibt es eine Methode mit dem schicken Namen CSS-Reset. Wie der Name bereits sagt, werden hier die lästigen Standard-Eigenschaften des Default-Stylesheet auf Null gesetzt.

* {
   margin: 0;
   padding: 0;
}

Mit dem Sternchen werden ausnahmslos alle Elemente auf der Website angesprochen, mit margin: 0 und padding: 0 alle Innen- und Außenabstände auf 0 gesetzt. Nachteil dieser rigorosen Methode: Sie müssen sich um alle Abstände auf Ihrer Website nun selbst kümmern - und sollten keine davon vergessen.

Typen von CSS-Layouts

Im modernen Webdesign werden Grundtypen von CSS-Layouts verwendet, die immer wieder zum Einsatz kommen. Sie haben sich in der Praxis bewährt und sind bei den Nutzern gewohnt und akzeptiert. Hier geht es aber weniger darum, wie viele Spalten ein Layout hat, sondern wie sich das Layout in Bezug auf die Größe des Browserfensters (und damit auch der Gerätegröße) verhält.

Fixes Layout

Bei einem fixen Layout legen Sie die Breite der Spalten und des Gesamtlayouts per CSS in Pixeln fest.

#page {
   width: 960px;
}

Bei kleinern Bildschirmen entsteht so ein horizontaler Scrollbalken. Um die Website in ganzer Breite sehen zu können muss der Nutzer also scrollen, was von den meisten als störend empfunden wird.

Fluides Layout

Bei einem fluiden Layout wird die Breite eines Elementes in Prozent eingegeben.

#page {
   width: 75%;
}

Hierdurch passt sich Ihr Layout dynamisch an die Größe des Browserfensters, den so genannten Viewport, an. Was zunächst als ideale Lösung für mobiles Webdesign erscheint, hat in der Praxis entscheidende Nachteile. Es entstehen so oft sehr lange und dafür schmale Zeilen.

Gestaltung mit CSS

Elemente anordnen mit CSS

CSS erlaubt Ihnen als Webdesigner eine Freiheit in der Anordnung von Elementen, die es mit einfachem HTML niemals geben wird. So werden selbst aus einfache HTML-Grundgerüsten ansehnliche Websites.

Elemente links und rechts fließen lassen

HTML-Elemente sind einfache Gesellen. Sie folgen uninspiriert aufeinander. Block-Elemente erzeugen eine neue Zeile, Inline-Elemente bleiben in einer Zeile, bis diese komplett gefüllt ist. In der Praxis reicht das schon lange nicht mehr. Nahezu jedes Design nutzt nebeneinander angeordnete Elemente. Klassiker: ein Bild soll von einem Text umflossen werden.

<p>
   <img src="/baum.jpg" alt="Baum im Herbst" width="300" height="200">Ich bin ein langer Absatz mit Text. Das Bild bezieht sich auf meinen Inhalt und illustriert, was ichcsage.
</p>

Ohne CSS sieht das nicht so toll aus:

float1

Das Bild klebt unschön an der ersten Zeile fest. Ein klarer Fall für float. Diese CSS-Eigenschaft rückt Elemente entweder nach links (left) oder nach rechts (right). Alle nachfolgenden Inhalte fließen an dem float-Element vorbei, sofern ausreichend Platz verfügbar ist.

img {
   float: left;
   margin-right: 3px;
}

float2

 Was passiert aber, wenn Sie einen neuen Absatz einfügen?

<p>
   <img src="/baum.jpg" alt="Baum im Herbst" width="300" height="200">Ich bin ein langer Absatz mit Text. Das Bild bezieht sich auf meinen Inhalt und illustriert, was ichcsage.
</p>
<p>Neuer Absatz, neues Glück. Auch hier steht eigentlich wenig Wissenswertes.</p>

float3

Wie Sie sehen fließ auch der neue Absatz um das Bild herum, wenn es der Platz zulässt. Und obwohl das p-Element ein Blockelement ist, das eigentlich einen neuen Absatz erzeugt, steht der Text neben dem Bild. Dieses Verhalten zeigt die Eigenschaften von Float: Ein gefloatetes Element nimmt sich nur den Raum, den es unbedingt braucht, ohne sich um andere Elemente zu kümmern. Wenn Sie float abschalten möchten, nutzen Sie die Eigenschaft clear.

<p>
   <img src="/baum.jpg" alt="Baum im Herbst" width="300" height="200">Ich bin ein langer Absatz mit Text. Das Bild bezieht sich auf meinen Inhalt und illustriert, was ichcsage.
</p>
<p style="clear: both;">Neuer Absatz, neues Glück. Auch hier steht eigentlich wenig Wissenswertes.</p>

float4

Es gibt eine weitere Eigenschaft von float, die Sie beachten sollten: sie sitzen nicht einfach nur auf der Seite, sondern werden aus dem normalen Dokumentfluss herausgenommen.

<div id="container" style="background-color: yellow;">
   <img src="/baum.jpg" alt="Bild eines Baums">
   <p>Lorem ipsum</p>
</div>

float5

Wir sehen: #container ist ein Elternelement von p und img, sodass die Hintergrundfarbe auch für sie gilt. Das Elternelement wächst in der Höhe mit seinen Inhalten. Was passiert nun, wenn img ein float: left erhält?

float6

Sie sehen, wie ein Element mittels float aus dem Dokumentfluss herausgenommen wird: nun wächst der Container nicht mehr mit der Höhe des Bildes, wie er es im normalen Dokumentfluss tun würde.

Was aber, wenn das Bild zwar links umflossen, aber trotzdem gelb umschlossen werden soll? Eine Lösung hierfür ist der clearfix. Er wird meist über eine eigene Klasse realisiert .clearfix. Alle umgebenden Elemente, aus denen keine Inhalte herausragen sollen, erhalten dann diese Klasse.

<div id="container" class="clearfix">
   <img src="/baum.jpg" alt="Bild eines Baums">
   <p>Lorem ipsum</p>
</div>

Der clearfix wird dann in CSS wie folgt definiert:

#container { background-color: yellow; }
img { float: left; }
.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}

Was passiert hier? Zunächst wird die Klasse .clearfix mit der Pseudoklasse :after angesprochen - Ergebnis: Alles, was innerhalb dieser Angaben steht, soll am Ende des Elements mit der Klasse .clearfix geschehen. Mit der Eigenschaft content erzeugen wir in CSS nun einen Inhalt, den es im HTML-Gerüst der Website nirgendwo gibt. In diesem Fall einen einzelnen Punkt, der nach (:after) dem float-Bild erscheinen soll.
Dieser Punkt erhält nun die Eigenschaft display: block und clear: both. Damit wird der Punkt als Blockelement ausgegeben und alles nach dem Punkt wird nicht mehr gefloatet. Und weil der Punkt nach dem Bild, aber noch innerhalb des Elternconatiners #container sitzt, wächst der Container wieder soweit an, bis er den Abschnitt, das Bild und den neuen Punkt umfasst. Weil so ein einzelner Punkt aber im Layout stören würde, blenden wir ihn mit visibilty: hidden einfach aus.

float7

Elemente frei anordnen

Mit floats stehen Ihnen bereits einige Möglichkeiten zur Verfügung, mit denen Sie die Anordnung von HTML-Elementen steuern können. Wenn Sie damit jedoch an die Grenzen stoßen, hilft die CSS-Allzweckwaffe position weiter.

Das Prinzip von position lautet, dass Sie zunächst bestimmen, auf welche Art und Weise ein Element positioniert werden soll und anschließend seine Position festlegen.

Zwei Positionierungsarten sind position: static (das ist der Normalzustand mit der sich das Element im ganz normalen Dokumentfluss befindet) und position: inherit (die bewirkt, dass für das HTML-Element die position-Eigenschaft des Elternelementes gilt).

Etwas komplexer ist postion: fixed, mit der sich ein Element fest an einer Position festtackern lässt. Bezugspunkt ist immer das Browserfenster. Die Anweisung

position: fixed
top = 0

würde bewirken, dass sich das Element ganz oben am Rand des Browserfensters positioniert. Da bleibt es auch, wenn die Nutzer scrollen.

Noch verzwickter wird es bei position: absolute und position: relative. Relativ klingt zunächst einfach. Ein Element wird relativ zu seiner normalen Position angeordnet. Der Browser berechnet als zuerst die Position, die ein Element im normalen Dokuemntfluss hätte, und schiebt es dann entsprechend Ihrer Angaben durch die Gegend.

position: absolute hingegen ordnet ein Element relativ zu demjenigen Eltern-Element, das nicht die Normalpositionierung an. Solche Elemente können Sie mit den Eigenschaften top, bottom, left, right ziemlich frei auf der Seite positionieren.

Die Anzeige der Elemente steuern

Manchmal müssen Sie die Anzeige von Elementen in CSS beeinflussen. Hierfür dient die Eigenschaft display. Ein Anwendungsfall wäre die Arbeit mit Inline- und Block-Elementen. Mittels display: block könnten Sie nun aus einem Inline-Element ein Block-Element machen.

a {
   display: block;
}

Umgekehrt geht das natürlich auch:

p {
   display: inline;
}

Eine weitere Anwendungsmöglichkeit wäre display: none, die das betreffende Element einfach ausblendet.

Weißraum in CSS3

Als Weißraum wird der Raum zwischen den Elementen eines Designs bezeichnet. Weißraum ist so etwas wie der absolute Sprengstoff für Webdesigner. Die einen möchten alle Inhalte möglichst ohne Scrollen auf die Seite quetschen, die anderen mögen soviel Abstand zwischen den Elementen, dass man scrollen muss um zum nächsten Bild zu kommen.

Die Wahrheit (und damit die Ideallinie) liegt in der Mitte. Zunächst: Weißraum ist ein wichtiges Gestaltungsmittel. Ohne ihn haben Sie einen unakzentuierten Brei aus Inhalten, den kein Nutzer visuell auseinanderhalten kann.

http://www.saturn.de/de/category/_notebooks-241042.html

Das Box Model

Quasi als Quintessenz aller vorangegangenen Abschnitte steht nun das Box Model. Sicher eines der komplexesten Konstrukte in CSS, aber leider auch eines der wichtigsten, ohne modernes Webdesign nicht möglich ist.

Das Box Model legt fest, in welcher Reihenfolge welche CSS-Eigenschaft für die Berechnung einer HTML-Box herangezogen wird. Es gibt da fünf Bereiche, die wir uns anschauen müssen:

  1. den Inhalt
  2. die Breite
  3. den Innenabstand (padding)
  4. den Rahmen
  5. den Außenabstand (margin)

boxmodel

Breite und Höhe: Normalerweise nimmt jede HTML-Box genau den Raum ein, der ihr zur Verfügung steht. Um eine explizite Breite anzugeben nutzen Sie die Eigenschaft width: 200px. Das gleiche gilt für die Höhe: height: 200px.

In Fällen, wo Sie einer Box keine feste Breite oder Höhe geben möchten, sie aber trotzdem auf einen maximalen Wert begrenzen wollen, gibt es die Eigenschaft max-width: 300px bzw. max-height: 300px. Analog dazu gibt es natürlich auch min-width: 100px und min-width: 100px.

Innenabstand: Den Innenabstand einer Box definiert man über die padding-Eigenschaft. Padding wird standardmäßig zur Breite einer Box hinzugefügt.

Rahmen: Soll eine Box einen Rahmen erhalten, erledigen Sie dies mit der Eigenschaft border. Auch border erhöht die Breite einer Box.

Außenabstand: Es bleibt noch der Abstand übrig, den eine Box zu einer anderen Box bekommen soll. Die zugehörige Eigenschaft lautet: margin. Auch der Außenabstand wird standardmäßig zur Box-Breite zuaddiert.

Wenn Sie die Breite einer Box von 100px insgesamt berechnen möchten, müssen Sie also padding, border und margin zuaddieren:

Breite der Box: 100px
Padding: 4px ringsum
Breite der Box: 108px
Border: 1px ringsum
Breite der Box: 110px
Margin: 10px ringsum
Breite der Box: 130px

Dieses simple Beispiel zeigt, warum Sie in einem mehrspaltigen, fluiden Layout schnell Probleme bekommen werden.

<div id="container" style="width:100%;">
   <aside style="width:25%; border-right: 10px solid blue; background-color: grey;">
      <p>Dieser Bereich enthält ein wenig Inhalt für die Navigation links.</p>
   </aside>
   <section style="float: left; width:75%; margin-left: 25%; background-color: yellow;">
      <img src="/baum.jpg" alt="Bild eines Baums">
      <p>Dieser Bereich enthält ein wenig Inhalt.</p>
   </section>
</div>

boxsizing1

Was hier passiert ist mittlerweile sicher klar: Der Elterncontainer #container soll den maximal verfügbaren Raum einnehmen. Das aside darin soll links positioniert werden und 25% Breite einnehmen, die section lässt 25% Abstand nach links und soll die verbleibenden 75% an Platz einnehmen. Eine 10px breite Linie soll beide Bereiche trennen. Was macht nun der Browser?

Zunächst berechnet der Browser die 25% Breite für das aside, anschließend addiert er 10px border hinzu. Und weil 25% + 10px nun einmal mehr Platz einnehmen als die verbleibenden 75%, schiebt er das Bild um 10px nach rechts weg. Oder, wenn auch dafür der Platz nicht reichen würde, gleich eine Etage tiefer.

Eine Lösung für dieses vertrackte Problem ist die Eigenschaft box-sizing: border-box. Wenn Sie ein Element mit dieser Eigenschaft versehen, zieht der Browser padding und border von der Breite der Box ab.

Inhalte anordnen im Raster

Mit den bisherigen Techniken zur Positionierung von Elementen haben wir bereits eine solide Basis geschaffen. Grundsätzlich verfügen Sie jetzt über das Wissen, um eine moderne Website aufzubauen. Trotzdem wird Ihnen die Arbeit kompliziert und aufwändig vorkommen, weil Sie immer neue Positionierungen erfinden und entwickeln müssen. Um Ihnen die Arbeit zu erleichtern haben zahlreiche Entwickler und Firmen wertvolle Hilfen erdacht, mit denen Sie den mühseligen Standardaufgaben in kürzester Zeit erledigen können. Das zauberwort heißt: Raster.

Das Für und Wieder von Rastern

Raster bieten eine ganze Reihe von Vorteilen. Sie sind vorhersehbar, strukturiert und klar definiert. Designs, die auf einem Raster basieren sehen ordentlicher aus und fühlen sich wertiger an.

Es gibt aber auch Nachteile, die hier nicht verschwiegen werden sollen. Raster zwingen einem Design ein Korsett auf, dass eine gewisse Uniformität zur Folge hat. Designs ohne Raster sind potentiell ansprechender und visuell reizvoller.

Es gehört eine gewisse Erfahrung zu entscheiden, für welches Web-Projekt sich ein Raster eignet und welches die gestalterische Freiheit ohne Raster erfordert.

In der Regel sind inhaltsbasierte Websites ideale Kandidaten für Raster. Mit ihrer Struktur und Ordnung geben sie dem Nutzer das Gefühl von Ruhe und Orientierung.

Freie Gestaltung ohne Raster passt am besten zu Websites mit künstlerischem Anspruch.

Fertige Raster

Ein Raster können Sie theoretisch selbst erstellen. Die entsprechenden CSS-Eigenschaften und die Technik mit Media-Queries haben Sie bereits kennengelernt. Aber ehrlich: warum sollte man das Rad neu erfinden, wenn es doch bereits zahlreiche hoch leistungsfähige Fertiglösungen gibt?

Bekannte Raster-Systeme, sogenannte CSS-Grids, sind z.B.

http://960.gs/
http://foundation.zurb.com/
http://getbootstrap.com/

Das am meisten verbreitetste CSS-Grid ist Bootstrap.

Heute1
Gestern323
Diese Woche324
Dieser Monat7898
Insgesamt215781

Who Is Online

2
Online

Dienstag, 26. September 2017 00:14

Rückrufservice

Kontaktdaten

dats
Druckagentur Torsten Scheel

Malvenweg 8
44289 Dortmund

Telefon: 0231 | 13 86 86 18
E-Mail:  kontakt@torstenscheel.de