Unterschiedliche Layouts nach Darstellungsbreite
Eine große Menge von Informationen übersichtlich auf einer Website zu präsentieren ist ein schwieriges Unterfangen. Zusätzlich erschwert wird es durch unterschiedliche Bildschirmauflösungen. Eine Fenstergröße von 800 x 600 als Relikt der Vergangenheit abzutun, kann sich schnell als Fehler erweisen. Denn auch wenn nur noch eine verschwindend geringe Menge Benutzer mit niedriger Auflösung das Netz bereist, ist Auflösung nicht gleich Darstellungsbreite.
Eine hohe Auflösung führt nicht zwangsläufig dazu, dass alle Fenster (und damit auch der Browser) in voller Breite genutzt werden. Viele Benutzer legen die Fenster ihrer Anwendungen bei einer hohen Auflösung nebeneinander auf den Bildschirm. Das bedeutet aber gleichzeitig, dass die Breite der Fenster wieder geringer wird. Es können diverse Toolbars im Browser aktiviert und Sidebars geöffnet sein. Die Vorgaben zur Barrierefreiheit, die der Seite zu Grunde liegen, können erfordern, die Seiteninformationen auch bei einer Auflösung von 800×600 ohne horizontales Scrolling zugänglich zu machen. Was aber dann meist in einer langen vertikalen Scrolleiste resultiert.
Es gibt verschiedene Lösungsansätze, die sich mit dieser Problematik befassen. Beispielhaft seien hier drei genannt, es existieren aber durchaus noch mehr Ansätze.
1) Ein Inhaltsbereich mit einer festgelegten Breite, der zentriert im Browser angezeigt wird. Wie zum Beispiel zu sehen auf:
http://www.microsoft.com/
http://www.apple.com/
Diese Lösung ist leicht zu implementieren, hat aber den Nachteil, dass sie dem Benutzer keinen wirklichen Mehrwehrt bei größerem Browserfenster bietet.
2) Ein sogenanntes “flüssiges Layout” (liquid Layout). Hierzu beispielhaft folgende Artikel auf “A List Apart”.
http://www.alistapart.com/articles/elastic/
http://www.alistapart.com/articles/negativemargins/
Dieser Lösungsansatz ist ebenfalls leicht zu implementieren, hat aber Nachteil, dass Texte schnell unleserlich werden, je nach dem wie weit oder wie schmal das Browserfenster geöffnet wurde. Bei Bildern im Contentbereich können größere Probleme auftreten, weil diese sich nicht so einfach skalieren lassen. Außerdem kann es sogar sein, dass bestimmte Bereiche von anderen überlagert werden.
3) Eine rechte Spalte, die weniger wichtige Inhalte enthält.
http://www.sueddeutsche.de/
http://www.adobe.com/
Ebenfalls leicht zu implementieren. Es muss aber in Kauf genommen werden, dass die rechte Spalte aus dem Sichtfeld verschwinden kann. Die Designmöglichkeiten sind ein wenig eingeschränkt und die horizontale Scrollleiste führt möglicherweise zur Verwirrung bei den Benutzern.
Ein weiterer Lösungsansatz(1), der aber keinen Anspruch erhebt, der heilige Gral zu sein, ist eine Methode, das Layout abhängig von der Breite des Darstellungsbereichs zu verändern. Es bietet sich hierbei die Möglichkeit, unterschiedliche Layouts für unterschiedliche Breiten zu erstellen und diese dann mittels Javascript zu aktivieren. Wie das geht, wird in den folgenden Abschnitten geschildert. Dabei ist zu beachten: Layout meint hier nicht HTML + CSS, sondern nur CSS! Das Markup bleibt unverändert.
Alle Dateien zu diesem Artikel als können als zip heruntergeladen werden.
Das Fundament bildet dieses HTML (Auszug!)
... <div id="linkeSpalte"> <fieldset> <legend>Suche</legend> <form method="post"> <input class="txt" name="textfield" type="text" /> <input name="Submit" type="submit" value="Suchen" /></form> </fieldset> <ul> <li><a href="#">Über uns</a></li> <li><a href="#">Katalog</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> </div> <div id="content"> <div class="textContent"> <h2>Artikel 1</h2> Lorem ipsum...</div> <div class="textContent"> <h2>Artikel 2</h2> Lorem ... <div class="textContent"> <h2>Artikel 3</h2> Lorem ...</div> <div class="textContent"> <h2>Artikel 4</h2> ....</div> </div> <div id="rechteSpalte"> <h3>Inhalte auf der rechten Seite</h3> Lorem ipsum dolor sit amet ...</div> </div>
Wichtig ist dabei, dass im <head> direkt alle Stylesheets eingebunden werden und das Standard-Layout an letzter Stelle dieser Aufrufe liegt! So werden die Angaben aus den anderen Dateien überschrieben. Siehe oben.
Um den Pflegeaufwand zu reduzieren, sollte man eine (oder mehrere) Basis-CSS-Datei einbinden und nur noch die Unterschiede der verschiedenen Layouts in entsprechenden Dateien hinterlegen. Der <link> zu dieser Datei darf kein Title-Attribut aufweisen! (s.u.)
Bei 800px Fensterbreite wird das HTML mit CSS in diese Form gebracht:
Navigation, Inhaltsbereich und Zusatzinformationen untereinander.
Eine LIVE-Demo findet sich hier.
Für eine Breite ab 1024px sieht es dann so aus:
Navigation, Inhaltsbereich und Zusatzinformationen nebeneinander. Die Elemente des Inhaltsbereichs untereinander.
Eine LIVE-Demo findet sich hier.
Und bei 1200 oder mehr Pixeln Breite kommt dieses Layout zum Einsatz:
Navigation, Inhaltsbereich und Zusatzinformationen nebeneinander. Die Elemente des Inhaltsbereichs neben- beziehungsweise untereinander.
Eine LIVE-Demo findet sich hier.
Um das richtige Stylesheet zu ermitteln und zu aktivieren, wird JavaScript benötigt.
Zunächst muss ein EventListener eingesetzt werden, um auf die Änderungen an der Größe des Darstellungsbereichs zu reagieren:
In diesem Beispiel wird der EventListener von jquery benutzt.
[sourcecode language="javascript" ]
$(window).resize( function() { setStylesheet() } );[/sourcecode]
Mittels des EventListeners wird eine Funktion aufgerufen, die das richtige Stylesheet auswählt und aktiviert.
/* Zur Konfiguration werden die Stylesheets in ein Mapping geschrieben*/
var stylesheets = [ { width : 1023, css : '800' },
{ width : 1200, css : '1024' },
{ width : 5000, css : 'default' },
];
function setStylesheet(){
var vWidth = getViewSize()[0]; /*Darstellungsbreite betsimmen */
for (var i = 0, len = stylesheets.length; i < len; i++) { /*Konfigurationsdaten durchlaufen */
if (stylesheets[i].width > vWidth) {
var css = stylesheets[i].css; /* Passendes Stylesheet aussuchen */
break; /* Wenn gefunden Schleife beenden */
}
}
if( css){activateStylesheet( css ); } /* Stylesheet aktivieren */
}
[sourcecode]
Um die sichtbare Breite des Fensters zu ermitteln, wird folgendes JavaScript eingesetzt.
[sourcecode language="javascript"]
function getViewSize(){
var size = [0, 0]; /*Reset*/
var de = document.documentElement;
var width = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
/*Für FireFox, Opera, Netscape, Konqueror, Safari und alle Browser die window.innerWidth verstehen
* oder für IE6 im standardkonformen Modus
* oder für alle Fälle
*/
var height = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
/*siehe oben */
size = [
width,height
];
return size;
}
Diese Funktion aktiviert den entsprechenden <link> im <head> des HTML. Dabei werden zunächst alle Stylesheet-Link-Tags deaktiviert, die über ein Title-Attribut verfügen. Im Anschluss wird das ausgewählte Stylesheet aktiviert. Stylesheet-Link-Tags, die kein Title-Attribut haben, bleiben hiervon unberührt. In diesen können grundlegende Anweisungen für alle Layouts gesetzt werden, wie zum Beispiel über Farben und Typographie.
function activateStylesheet(styleTitle)
{
var currTag="";
if (document.getElementsByTagName){
var links = document.getElementsByTagName("link");/*Finde alle Link-Tags */
/* Über alle Links-Tags iterieren, siehe auch Hinweisbox am Seitenanfang */
for (var i = 0; (currTag = links[i]); i++) {
/* Finde die Link-Tags, die sich auf ein Stylesheet beziehen und die ein Title-Attribut haben*/
if (currTag.getAttribute("rel").indexOf("style") != -1 && currTag.getAttribute("title")) {
currTag.disabled = true; /* Deaktiviere den Link-Tag */
if(currTag.getAttribute("title") == styleTitle){ /* Finde das zu aktivierende Stylesheet */
currTag.disabled = false; /* Aktivieren */
}
}
}
}
return true;
}
Alle Dateien zu diesem Artikel als können als zip heruntergeladen werden.
Quellen:
1 http://www.themaninblue.com/
http://www.alistapart.com/
Tags: css, JavaScript, jquery, layout
0