Optimale Seitenanpassung

Variable Breiten und Spalten

27.1.2011 von Olivia Adler

ca. 2:45 Min
Ratgeber
  1. Webdesign für Breitbild-Monitore
  2. Variable Breiten und Spalten
image.jpg
Das Nautica 2.2 Liquid-Template auf www.oswd.org/design/preview/id/2828 in verschiedenen Auflösungen.
© Internet Magazin

Dieses Design ist so flexibel, dass es bei Endgeräten mit kleiner Auflösung (etwa Smartphones) immer noch funktioniert, bis hin zur Headergrafik, die in verschiedenen Ausschnittsvariationen ansprechend aussieht.Der Nachteil dieser Lösung: Bei hohen Auflösungen und Vollbild-Browserfenster läuft der Text so sehr in die Breite, dass die Lesbarkeit leidet.Was also tun mit dem zusätzlichen Platz? Die schnelle, vom Designer vorgeschlagene Lösung besteht darin, einfach den prozentualen Wert für die Container zu verkleinern:

/* Set the page width */
#wrapper-menu-top, #header, #wrappercontent,
#wrapper-footer {
width: 80%;
margin: 0 auto;
text-align: left;
}

Das macht die Spalte aber bei jeder Auflösung schmäler, auch bei niedrigen Auflösungen, wo das gar nicht notwendig wäre.

Margin oder zusätzliche Spalten als Abstandhalter

image.jpg
Der Rand dient hier lediglich als Abstandhalter ...
© Internet Magazin

Eine Möglichkeit, das Problem der Textbreite bei hohen Auflösungen in den Griff zu bekommen besteht darin, zusätzliche Spalten einzubauen oder einen Rand zu definieren, die nur die Aufgabe haben, als Abstandhalter zu dienen und die sich dynamisch mit der Auflösung verbreitern. Auf www.maxdesign.com.au/articles/liquid/liquid-sample1/ ist ein Beispiel zu sehen.Der Container Content hat hier eine Breite von 65 Prozent und einen linken Rand von 5 Prozent Breite:

#content
{
float: left;
margin-left: 5%;
width: 65%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}

Hier ist der linke Rand (margin-left) des Inhalts- Containers auf 5 Prozent gesetzt und vergrößert sich damit flexibel, abhängig von der Auflösung.Natürlich ist es auch möglich, fixe und variable Breite miteinander zu kombinieren, wie auf www.maxdesign.com.au/articles/liquid/liquid-sample2/ zu sehen:Der Container Nav für die Navigation hat hier eine feste Breite von 180 Pixel, die Breite des Containers Content ist nicht definiert, was bedeutet, dass er den restlichen Bildschirmbereich ausfüllt:

#nav
{
float: left;
width: 180px;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#content
{
margin: 0 30px 10px 210px;
height: 150px;
background-color: #999;
}

Denkbar wäre hier, auch die Breite von Content fest zu definieren und einen dritten Container zwischen Navigation und Content oder an der Seite einzubauen, dessen Breite variabel, also in diesem Fall nicht definiert ist. Dieser Container könnte beispielsweise ein Hintergrundbild enthalten, das in verschiedenen Breiten ansprechend aussieht.

Ausgabe abhängig von der Fenstergröße

Weil Layouts, die allen Auflösungen gerecht werden wollen, immer auf Kompromisslösungen hinaus laufen, gibt es auch die Möglichkeit, via Javascript die Browser- Auflösung abzufragen und abhängig vom Ergebnis unterschiedliche Stylesheets zu laden. Webdesigner Mike Madaio beschreibt das Verfahren auf www.digital-web.com/ articles/preparing_for_widescreen/ - zwar bezieht sich der Artikel noch auf eine maximale Breite von 1280 Pixeln, das Verfahren lässt sich aber auch für höhere Auflösungen ausbauen.Das von Madaio geschriebene Script fragt die Browser-Fenstergröße ab und definiert, welches Stylesheet abhängig von der Fenstergröße gezogen wird:

<body><script language="JavaScript"><!--
screenW = document.body.clientWidth
if (screenW > 1100 ) {
document.write('<link rel=STYLESHEET
href=stylehuge.css type=text/css>')
} else if (screenW > 900) {
document.write('<link rel=STYLESHEET
href=stylebig.css type=text/css>')
} else {
document.write('<link rel=STYLESHEET
href=stylesmall.css type=text/css>')
}
//--></script>

In diesem Script gibt es drei Zustände: Auflösung über 1100 Pixel Breite, Auflösung über 900 Pixel Breite und alles, was darunter liegt (else). Das Demo auf mikemadaio.com/interface/liquid/index_0104. html zeigt die Auswirkung je nach Fenstergröße.Nachteil dieser Lösung: sie funktioniert nur mit eingeschaltetem Javascript einwandfrei. Wer unabhängig bleiben will von Javascript, fährt gut damit, eine Kombination aus Liquid Design und intelligentem Einsatz von Hintergrundbildern einzusetzen.

Hintergrundbilder

Wenn Sie sich für die erste der vorgestellten Lösungen entscheiden - dem Einsatz eines Hintergrundbildes - müssen Sie sich auf die Suche nach einem geeigneten Motiv machen. Günstige Bilder erhalten Sie unter anderem bei

Daneben gibt es auch eine Reihe kostenloser Profi-Bilder, die Sie sich aus dem Internet herunterladen können.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.