Flexible Layouts - Das Format der Zukunft
Exzellenter ArtikelAnzeige 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.
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.
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.
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.
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:
- Microsoft Internet Explorer (58,4%)
- Mozilla Firefox (36,1%)
- Opera (2,3%)
- Safari (1,9%)
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:
- Opera Mini (Samsung i900-Omnia)
- Internet Explorer Mobile (Windows Mobile Plattform)
- Safari (alle iPhone`s)
- Fennec - Mozilla Firefox
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.
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?
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.
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.
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.
-
Student.
-
Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
-
graphic, motion & web design - kernreaktor - staportal - mukitu
-
David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 GbR, sowie Webmasterpro.de.
-
Ich bin Oberstufenschüler aus Hessen, 18 Jahre alt und mache einen Aushilfsjob bei der Brot und Spiele GmbH als PHP Entwickler.
Jein
Der Artikel ist schon ziemlich gut.
Dennoch:
- von nem css reset würd ich immer abraten. Vor allem, da es ja exakt das gegenteil von dem ist was in diesem artikel vorgebetet wird.
- "Zudem muss man leider erwähnen, dass gerade der Internet-Explorer, der derzeitige Marktführer, als Einziger sich nicht an Standards bemüht." ...ein kleines 'hat' am ende würde die aussage auch aus gegenwärtiger Sicht korrekt machen.
Re: Jein
jein :P die aktuelle version ist version 7 - die sich zwar verbessert hat aber bezüglich standards noch sehr unterbelichtet ist (während andere bereits den nächsten standard immer besser beherrschen).
ich bin mir nicht mal sicher ob man mit version 8 von "einhaltung" der standards (seinen wir genügsam: sagen wir 2.1) sprechen kann
Re: Jein
Andersrum: wieviele neue extrawürstchen hat der IE sich seit 7 ausgedacht?
Re: Jein
CSS-Reset siehe auch: CSS-Reset: Rücksetzen der Browservorgaben
Ist also einfach Anssichtssache. Würde evtl. das einfach so umformulieren, dass man einen CSS-Reset benutzen kann, aber es natürlich auch ohne geht. Ich persönlich finde ziemlich viele Vorgaben eher praktisch, beispielsweise der Standardabstand zwischen Absätzen.
Zum IE-Teil, würde eher schreiben: Mit dem Internet Explorer 8 schreint MS allerdings einen Schritt richtung Standards zu gehen. Irgendwie sowas.
@Darius: Kanns auch gerne selbst bearbeiten, wenn dir das nichts ausmacht. ;-)
Problematik von Bildern in flexiblen/elastischen Layouts
Finde auf die Problematik sollte noch kurz eingegangen werden, evtl. auch mit einer kurzen Liste von Lösungsvorschlägen. Gemeint ist der Konflikt, der entsteht, wenn man einer Box eine flexible Breite geben will, darin aber auch Bilder mit voller Breite angezeigt werden sollen. Gerade auch der Hinweis auf die miese Browserskalierung wäre evtl. praktisch und eben einer oder mehrere Lösungsvorschläge. Evtl. könnte man auch zur den flexiblen Layouts selbst noch ein paar konkretere Beispiele bringen.
Vielleicht liegts aber auch nur am geänderten Titel, dass ich genau diese Punkte vermisse. Vielleicht² kann man die Punkte auch in eigene Artikel verpacken und hier verlinken.
Ansonsten ein wirklich guter und umfangreicher Artikel! Ich freue mich schon darauf deinen nächsten Artikel zu lesen. :)
Re: Problematik von Bildern in flexiblen/elastischen Layouts
Beispiele und Lösungsansätze werde ich in einen neuem Artikel erstellen und beide miteinander verknüpfen. ;)
Re: Problematik von Bildern in flexiblen/elastischen Layouts
Cool, da freu ich mich schon drauf. :)
schön
hey schöner artikel - und sogar visuell schön gestaltet. aber zum titel: ist das nicht mehr gegenwart inzwischen als zukunft?
Marktanteile der Browser
Benutze mal lieber die deutschen Browser Marktanteile der Webanalyse
Re: Marktanteile der Browser
wow danke :) sieht sogar recht schick aus
Titel
Evtl. würde ich den Titel noch anpassen. Aus dem Titel geht aktuell nicht hervor, wovon der Artikel handelt.
...
Den Titel kann man zum Schluss noch anpassen, der Artikel ist ja auch noch nicht fertig.
Der Artikel soll dem Leser einfach erklären, warum man heute keine fixe Layouts mehr erstellen sollte und dass man nicht nur für den Monitor Stylesheets erstellen sollte.
Wäre gut, dass wenn ich fertig bin, jmd von euch nochmal Korrekturliest und ein "genehmigt" gibt.
Re: ...
Jo geht klar. Gib einfach Bescheid. Titel wäre dann vielleicht besser sowas wie "Flexible Layouts - Das Format der Zukunft".