Variable Breiten und Spalten
- Webdesign für Breitbild-Monitore
- Variable Breiten und Spalten
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 ...
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
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.
