Flexible Layouts - Das Format der Zukunft

Exzellenter Artikel
1 | 9179 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Flexible Layouts - Das Format der Zukunft" mit Ihrem Wissen!

Anzeige Hier werben

Medium - Begriffsklärung

Zu Beginn sollten wir klären, was überhaupt ein Medium ist. Ein Medium ist im weitesten Sinne ein Vermittlungsträger von Informationen zwischen einem Sender und einem Empfänger. Somit sind eine Brieftaube, ein Fernseher und auch wir Menschen ein Medium. Wenn auch zeitweise unbewusst, senden und empfangen wir permanent Daten. Auch das Internet ist ein Medium, genauer gesagt ein Übertragungsmedium von elektrischen Signalen.

Verschiedene Ausgabegeräte berücksichtigen

Monitor

Früher verteilten Forscher kurze Nachrichten über ein internes Netz. Aus diesem kleinem Netz wurde schlagartig ein Massenprodukt, welches man über den Personal Computer nutzen konnte. Das Ausgabegerät war damals wie auch heute der Monitor. Ob CRT oder TFT/LCD spielt keine wichtige Rolle.

Bild zu Flexible Layouts - Das Format der Zukunft
Monitor

PDA / Handy

Heute, Jahre später, stehen dem Endbenutzer mehr als nur ein Gerät zur Verfügung um das Internet zu nutzen. Man strebt nach Mobilität und Bequemlichkeit, wodurch das PDA wie auch das Handy eine neue wichtige Ausgabeform des Internets darstellt. Inzwischen gibt es neuartige Handys, die das Internet mobil anschaulicher darstellen als die alten Geräte. Dazu zählen zum Beispiel das iPhone oder das Samsung i900-Omnia, welche neben deutlich größeren Displays oftmals auf Touch-Kompatibilität besitzen.

Bild zu Flexible Layouts - Das Format der Zukunft
Handy

Drucker

Eine wichtige Ausgabeform des Internets haben wir noch nicht behandelt, der alltägliche Drucker kann wie der Monitor und das Handy Informationen ausgeben. Mit dem klarem Unterschied, dass die Information auf Papier gedruckt werden, da ungern jemand längere Texte am Monitor liest.

Bild zu Flexible Layouts - Das Format der Zukunft
Drucker

Ausgabeformen

Monitor-Pixel

Ein Pixel ist der kleinste Punkt auf dem Monitor. Viele denken, dass das Pixel immer gleich groß ist. Das ist aber falsch, da zur heutigen Zeit Monitore eine minimale unterschiedliche Pixelgröße aufweisen.

Außerdem spielt die Bildschirmauflösung und -größe eine wichtige Rolle. Betrachtet man sich ein 100x100 Pixel-Bild auf einem kleinem Monitor mit niedrigster Auflösung, so ist das Bild groß. Auf einem großem 24-Zoll Monitor mit höchster Auflösung erscheint das Bild winzig.

Bild zu Flexible Layouts - Das Format der Zukunft
Vergleich von der Bildschirmgröße und -auflösung

Das Pixel ist also relativ zu den genannten Faktoren.

Verschiedene Web-Browser beachten

Leider werden Internetseiten auf den verschiedenen Browsern nicht immer gleich dargestellt. So sind bei der Ausgabe im Browser zusätzlich einige Dinge zu beachten, um eine Webseite so gut wie überall korrekt darzustellen.

Jeder Browser besitzt interne eigene CSS-Formatierungen. Besucht man eine unformatierte Seite im Internet, so wird die Seite jeweils unterschiedlich ausgegeben. Aus diesem Grund sollte man vor Beginn der CSS-Erstellung die Werte reseten. Geht man dem nicht nach und/oder vergisst einen bestimmten Bereich zu formatieren, sieht das Layout in jedem Browser womöglich bisschen anders aus. Sehr ärgerlich. Das Zurücksetzen der Werte auf eine Ausgangsbasis steht jedem frei, es funktioniert auch ohne.

Zudem muss man leider erwähnen, dass gerade der Internet-Explorer, der derzeitige Marktführer, als Einziger sich nicht an Standards bemüht. Schlecht für Webdesigner, die spezielle CSS Hacks lernen müssen um ein Layout IE-kompatibel zu gestalten. Das wäre aber einen eigenen Artikel wert und gehört hier nicht zum Thema. Die neue kommende Version 8.0 des IE soll aber trotz allen Vorgängern wesentlich mehr Standards richtig implementieren können.

Die weitverbreitsten Browser heute (Stand August 2008) sind:

Bild zu Flexible Layouts - Das Format der Zukunft

Weitere Statistiken findet man unter der webmasterpro Werbeanalyse.

Mobile-Browser

Ein weiteres Thema sind die Mobilen Browser, wie der Firefox Browser Fennec, der kürzlich erschienen ist. Hierbei sind wiederum spezielle Dinge zu beachten. Populäre mobile Browser sind aktuell:

Die Probleme der verschiedenen Ausgabemedien

Wie soll ein und die selbe Information mehrmals richtig ausgegeben werden? Wir haben die genannten Ausgabegeräte und -formen zügig besprochen. Spätestens jetzt muss jedem klar sein, dass es heute keine gute fixe Layouts für mehrere Ausgabegeräte geben kann. Leider wissen wir Webdesigner nicht, was für Geräte und Browser der Besucher bedient. Natürlich wird der Monitor primär genutzt, aber man sollte in der Entwicklung nicht stehen bleiben. Denn Stillstand ist Rückstand. In CSS gibt es eine Technik, die es dem Webdesigner erlaubt, gerade dieses Problem zu lösen.

Lösung - Stylesheets sei Dank

Ausgabegeräte

Man sollte sich als Webdesigner um die aktuelle Validität kümmern. Für jedes Ausgabegerät erstellt man ein Stylesheet und legt diese als Media-Typ fest. Der universale Media-Typ für alle Ausgabegeräte wäre "all". Das hätte zur Folge, dass jedes Ausgabegerät die CSS-Datei laden würde.

Bild zu Flexible Layouts - Das Format der Zukunft
Man erstellt separate CSS-Dateien, die bei der Ausgabe automatisch gewählt und geladen werden.
 
HTML
1
2
3
4
5
<head>
    <link rel="stylesheet" media="screen" href="website.css" />
    <link rel="stylesheet" media="print, embossed" href="drucker.css" />
    <link rel="stylesheet" media="handheld" href="handy.css" />
</head>

(Weitere Informationen findet man auch im Artikel CSS in HTML einbinden.)

(Ein guten Artikel, wie man ein Stylesheet speziell für den Druck schreibt, findet man hier.)

Ausgabeformen

Fixe Layouts waren gestern, heute sind es flexible oder elastische Layouts. Was soll das heißen?

Bild zu Flexible Layouts - Das Format der Zukunft
Flexible Layouts basieren auf Prozentwerten.

Nun flexible Layouts basieren auf Prozentwerten und passen sich dem Ausgabemedium an. Elastische Layouts basieren auf den Einheiten em/ex und wachsen mit dem Textzoom. Dadurch wird die bequemste Anzeige generiert, nämlich die der optimalsten Ausgabe. Eine bessere Usability ist damit garantiert.

Es ist von Vorteil, wenn man zuerst die CSS-Datei für den PC-Monitor erstellt und diese dann für weitere Ausgabegeräte vereinfacht. Dies tut man zum Beispiel indem man bestimmte Bereiche ausblendet.

Die CSS Eigenschaft dazu lautet "display: none". Die Objekte bleiben im Quelltext behalten. Es ist also von Nachteil, wenn es um Datenübertragungen wie beim Handy geht, da die ganze Seite geladen wird, obwohl nur ein nützlicher Teilbereich angezeigt wird.

 
HTML
1
2
3
4
5
<style type="text/css">
    objekt {
        display: none;
    }
</style>

Schlussbemerkung

Zum Schluss hoffe ich, dass ich allen Lesern erklären konnte, warum man heute auf flexible Layouts setzt. Nebenbei möchte ich mich für das Lesen bedanken.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Flexible Layouts - Das Format der Zukunft" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Flexible Layouts - Das Format der Zukunft" hier bearbeiten.

Mitarbeiter