Optimale Seitenanpassung

Variable Breiten und Spalten

  1. Webdesign für Breitbild-Monitore
  2. Variable Breiten und Spalten
image.jpg

© Internet Magazin

Das Nautica 2.2 Liquid-Template auf www.oswd.org/design/preview/id/2828 in verschiedenen Auflösungen.

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

© Internet Magazin

Der Rand dient hier lediglich als Abstandhalter ...

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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".