Skalierbare Webseiten durch Liquide CSS Layouts

1 | 33134 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Skalierbare Webseiten durch Liquide CSS Layouts" mit Ihrem Wissen!

Anzeige Hier werben

Die Bandbreite verfügbarer Monitormaße ist heute größer denn je. Am Schreibtisch sind 27 und 30 Zoll keine Seltenheit mehr und im mobilen Sektor wollen Hand- und Hosentaschenformate bedient werden. Dieser Artikel stellt einen Einstieg in liquide Layouts dar, mit dem alle Größen im Webdesign elegant berücksichtigt werden.

Derzeit gibt es drei gebräuchliche Layout Varianten im Webdesign:

  • "fix" bzw. "statisch"
    feste Vergabe von Breitenwerten, ausgedrückt meist in Pixeln
  • "elastisch"
    besitzt ebenfalls eine feste Seitenbreite, jedoch mit der Angabe em (schriftgrößenbasierte Dimensionsangabe)
  • "liquid" oder "fluid"
    bezeichnet und basiert auf der Vergabe prozentualer Werte für Breiten

Durchgesetzt haben sich heute weitestgehend statische Layouts. Es gibt einige einfache Gründe dafür, beispielsweise lässt sich ein statisches Design im Grafikprogramm leichter simulieren und erarbeiten.

Mit wenigen Handgriffen jedoch steht ein Sprung zum liquiden Layout nichts im Weg. Besonders wenn sehr kleine Auflösungen berücksichtigt werden sollen, ohne dabei gängige und höhere vernachlässigen zu wollen, bietet sich diese Technik an.

HTML Grundgerüst anlegen

Das grundlegende HTML-Gerüst basiert auf einem DIV-Container welches uns den flexiblen Einsatz des Layouts ermöglicht.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>Liquide Layouts</title>
</head>
<body>
    <div id="page">
        <div id="header">
            <h1>Liquide CSS Layouts</h1>
        </div>
        <div id="content">
            ...
        </div>
        <div id="footer">
            <blockquote>
                <p>...a website should be accessible in any sort of skin.</p>
            </blockquote>
        </div>
    </div>
</body>
</html>

Um unsere Seite nun allen Bildschirmgrößen zugänglich zu machen, verwenden wir folgendes CSS:

 
css
1
2
3
4
5
#page {
    width: 80%;
    min-width: 500px;
    max-width: 1200px;
}

Mit dieser CSS-Angabe beschreiben wir, dass generell 80 Prozent der Fensterbreite als Seitenbreite verwendet wird. Um die Flexibilität etwas einzuschränken, ist die Vergabe einer Mindest- und Maximalbreite sinnvoll. Konkret bedeutet dies, sollten die 80 Prozent 500 Pixel unterschreiten, wird die Breite nicht mehr verkleinert. Sollten die 80 Prozent 1200 Pixel überschreiten, wird die Breite nicht mehr vergrößert.

Grafiken in liquiden Layouts

Hier ist ein Umdenken für liquide Websites gegenüber einer statischen Variante erforderlich. In erster Linie hat man es mit zwei Anforderungen zu tun, die Grafiken müssen entweder skalier- oder rapportierbar sein.

Grundsätzlich wird auf einer Webseite zwischen zwei Bildtypen unterschieden: Layout- und Inhaltsgrafik. Dem Layout werden alle grafischen Elemente zugeordnet, die keinen direkten Beitrag zum Inhalt liefern. Inhaltsgrafiken hingegen werden direkt mit dem img-Tag ins HTML-Gerüst eingebettet.

liquide Layoutgrafiken

Hier ist es noch nicht möglich, technisch sinnvoll zu skalieren. Per CSS eingebettete Grafiken müssen demnach auf der x-Achse wiederholbar sein oder ein entsprechendes Ende aufweisen. Angenommen wir haben eine für den Header eine Hintergrundgrafik, die auf der x-Achse wiederholbar ist, können wir folgende CSS-Angaben machen

 
css
1
2
3
4
#header {
    background-image: url(images/background.png);
    background-repeat: repeat-x;
}

Der Hintergrund erstreckt sich in diesem Fall über die komplette Breite des Headers. Eine Angabe der Hintergrundfarbe wäre sinnvoll, wenn die Höhe des Headers, größer als die des Hintergrundbildes wäre (natürlich eine passende Angabe zum Hintergrundbild wählen).

liquide Inhaltsgrafiken

Inhaltsgrafiken lassen sich mit entsprechend prozentualer Angabe für die Breite leicht skalieren. Dabei muss darauf geachtet werden das sich der Wert nach der Größe des Elternelements richtet und das Bild in ausreichender Auflösung vorhanden sein sollte, um bei sehr großen Monitoren unschöne Aufpixelungen zu vermeiden. Hierbei empfiehlt es sich, die Grafiken als Vorschaubild anzubieten.

Sollten Bilder nicht skaliert werden, muss bedacht werden das größere Bilder potenziell das Layout brechen.

liquide Texte

Bei aller Liebe fürs schöne Layout, darf der Text nicht in Vergessenheit geraten. Gerade bei liquiden Layouts und großen Anzeigegeräten läuft dieser ohne entsprechende Angaben unangenehm weit. Als Zeilenlänge für Fließtexte gilt die Faustregel 60-80 Zeichen, da das Auge sonst während des Lesens und beim Zeilensprung Orientierungsprobleme bekommt. Ebenfalls sollte darauf geachtet werden das die Zeilen nicht zu kurz geraten, denn häufiges Springen der Augen beeinträchtigt die Lesbarkeit des Textes.

Am Besten wäre hier ein Experimentieren des Mindest- und Maximalbreite um sinnvolle Zeilenlängen zu erhalten. Es sollte vermieden werden pauschale Angaben zu machen, sondern die CSS-Regeln stets pro Layout zu testen.

Es bietet sich hier auch eine Kombination aus liquiden und statischen bzw. elastischen Layout an. Zusätzlich bietet der kommende CSS3 Standard ein Multi-column Layout an. Damit lassen sich etwa Texte wie in Zeitungen darstellen.

Beispiel:

 
HTML
1
2
3
4
5
6
7
8
...
<div id="content">
    <div class="multi-column">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.</p>
    </div>
    ...
</div>
... 
 
css
1
2
3
4
5
6
.multi-column {
    -moz-column-width: 15em;
    -moz-column-gap: 1.2em;
    -webkit-column-width: 15em;
    -webkit-column-gap: 1.2em;
}

Laut CSS3.info ist dies aber erst in Mozilla- und Webkit-Browsern möglich. Jedoch lässt sich dies natürlich auch mit floatenden Boxen realisieren.

Fazit

Mit liquiden Layouts lassen sich skalierbare Webseiten erstellen, die auf einer Vielzahl von unterschiedlichen Bildschirmgrößen dargestellt werden. Bei Beachtung von wenigen CSS Regeln lassen sich diese Designs schnell umsetzen. Und mit der kommenden CSS Generation, wird das ganze noch viel einfacher werden. Es besteht wohl auch kein Zweifel daran das liquide Layouts die Zukunft gehören, vor allem bei immer mehr werdenden Tablets, Smartphones, PDAs usw.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Skalierbare Webseiten durch Liquide CSS Layouts" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Skalierbare Webseiten durch Liquide CSS Layouts" hier bearbeiten.

Mitarbeiter