Magazin-Layouts für Websites
Websitelayouts nähern sich nach und nach klassischen Magazinlayouts. Sie beeindrucken nicht nur mit der Perfektion der Umsetzung sondern auch mit ihrer Bereitschaft, verfügbaren Platz effizient zu füllen.
Klassische Magazinlayouts haben auch im Web eine besondere Anziehungskraft bewiesen. Weblayouts, welche die visuellen Eigenschaften einer Magazin- beziehungsweise Zeitungsseite oder einer anderen Drucksache nachahmen, liegen zunehmend im Trend. Das Internetpublikum verlangt von einem Weblayout inz...
Klassische Magazinlayouts haben auch im Web eine besondere Anziehungskraft bewiesen. Weblayouts, welche die visuellen Eigenschaften einer Magazin- beziehungsweise Zeitungsseite oder einer anderen Drucksache nachahmen, liegen zunehmend im Trend.
Das Internetpublikum verlangt von einem Weblayout inzwischen dieselbe Präzision, einen genauso leicht nachvollziehbaren Textfluss, eine vergleichbar hohe Lesbarkeit der Schrift und eine mindestens genauso effiziente Nutzung des Platzes wie man es von Papiermedien seit jeher kennt.
Viele Website-Entwickler haben diesen Trend inzwischen erkannt. So auch der Web-Entrepreneur Mike McCue, die treibende Kraft hinter der mehrfach preisgekrönten mobilen App Flipboard (20 Millionen Benutzer weltweit), der auf einer Konferenz im kalifornischen San Francisco verkündete, Webdesigner sollten sich beim Entwurf eines Weblayouts nach dem Aussehen heutiger Zeitschriften und Magazine orientieren, denn die Zukunft des Webdesigns sähe wie die heutigen Printmedien aus.
Einfach gesagt. Denn das Web als Medium ist heute noch weitaus unvorhersehbarer als das Papier. Webdesigner müssen sich auf ein breit gefächertes Spektrum abweichender Eigenschaften der avisierten Zielgeräte und der verschiedenen User Agents einstellen. Von der Größe des Viewports über die Auflösungsdichte, die Eigenarten der Rendering Engine des Browsers, die Verfügbarkeit von Plug-ins wie dem Flash Player bis hin zur langen Funktionsfähigkeit der Website auf erst künftig verfügbaren Geräten, sind die Anforderungen recht hoch gesetzt.
Beim Entwurf eines modernen Weblayouts muss man daher alle gängigen Szenarien vorab überdenken, um nicht nur eine hohe Präzision sondern auch eine hohe Anpassungsfähigkeit der Website an das Zielgerät zu gewährleisten. Noch nie ging es so leicht wie mit HTML5.
Klassische und elastische Weblayouts
Die Umsetzung klassischer Layouts aus dem Papierzeitalter im Web muss auf jeder Art Display - also unabhängig von der Viewportgröße und der Auflösungsdichte - gleichermaßen gut funktionieren. Die Anpassungsfähigkeit eines Weblayouts an die Eigenschaften des Zielgeräts bestimmen in erster Linie die verwendeten Einheiten.
Hierbei gibt es zwei entgegengesetzte Arbeitstechniken: die Umsetzung von nichtadaptiven Layouts auf Basis der Pixeleinheit und die Umsetzung von adaptiven Layouts auf Basis von ems (die so genannten elastischen Layouts) und/oder Prozenten (liquide oder fluide Layouts). Hybride Layouts sind zwar durchaus denkbar, treten jedoch eher selten auf. Die Wahl der Einheiten tut der Präzision im Übrigen keinen Abbruch.
Ratgeber: So machen Sie mehr aus Ihrer Fritzbox
Die Pixeleinheit bietet Ihnen einen hohen Grad an Kontrolle und Präzision. Das resultierende Layout nimmt auf dem Display des Zielgeräts eine in Pixeln fest definierte Größe ein, ignoriert jedoch die aktuelle Viewportgröße völlig. Pixelbasierte Layouts werden daher auf kleinen Mobilgeräten in der Regel unlesbar.
Benutzer mobiler Geräte müssen bei solchen Layouts in die Anzeige hineinzoomen und in horizontaler und vertikaler Richtung scrollen. Um einen hohen Grad an Benutzerfreundlichkeit beim Einsatz der Pixeleinheit zu gewährleisten, sei Ihnen geraten, für kleinere Displays alternative Layouts samt der zugehörigen Navigationslinks bereitzustellen.
Diesen Weg hat unter anderem die Zeit Online eingeschlagen. Der Besucher eines Mobilgeräts darf sich hier die klassische oder die mobile Ansicht der Seite aussuchen und gelangt auch leicht von der mobilen wieder zur Desktop-Variante.
Allerdings ist der umgekehrte Weg im Falle der Zeit Online nicht in die Navigation eingebunden. So muss der mobile Besucher zum Wechseln der Edition ihre mobile Adresse direkt eingeben oder, falls er diese nicht auswendig weiß, alle Cookies auf seinem Gerät löschen.
Adaptive Layouts auf Basis von ems oder Prozenten bieten dem Benutzer mehr Flexibilität, da sie sich der Viewport-Größe elastisch anpassen können, sind jedoch generell komplizierter in der Umsetzung. Ein Pixel ist ein nicht skalierbarer Punkt auf dem Display, wohingegen ein em immer jeweils der aktuellen Zeichensatzgröße entspricht.
Die em-Einheit ermöglicht eine bessere Implementierung der Barrierefreiheit und verbessert die Usability. Skaliert der Besucher den Text in einer solchen Website, skalieren die Containerelemente gleich mit.
Mit dieser Layoutmethode können Sie unerwünschten Textumbruch in elastischen Elementen verhindern, da die Dimensionen der Containerelemente mit dem Text mitwachsen und ihre relativen Verhältnisse beibehalten.
Ratgeber: Die beste Security-Freeware
Die em-Einheit hat jedoch den entscheidenden Nachteil, dass sie dem Webdesigner zum Teil umständliche Berechnungen abverlangt, da Zeichengrößen von Browser zu Browser variieren und zudem von Element zu Element vererbt werden können.
Inzwischen besteht die Hoffnung auf eine breite Einsetzbarkeit der mit ems verwandten Einheit rem (root em). Anders als im Falle von em wird rem von dem übergeordneten root-Element der Seite für alle untergeordneten Elemente in einem Schritt abgeleitet, was die Berechnungen enorm vereinfacht und das Risiko unerwünschter Skalierungseffekte minimiert.
Wer sich inzwischen mit ems befassen möchte, dem sei empfohlen, einen Konverter wie beispielsweise unter pxtoem.com zu Rate zu ziehen.
Absolute Einheiten wie Zentimeter (cm), Millimeter (mm) und die Punkteinheit (pt), die in Printmedien und in Bürosoftware zum Einsatz kommen, eignen sich nicht zur Umsetzung von Weblayouts mit der Ausnahme von Print-Stylesheets. Absolute Positionierung gilt es auch in Print-Stylesheets zu meiden.
Mehrspaltige Layouts
Ein wesentliches Merkmal von Magazinlayouts besteht in der effizienten Nutzung von Platz dank der Aufteilung der Seite in Spalten. Float-Konstruktionen erzielen im Webdesign einen ähnlichen Effekt. Wer jedoch einen Schritt weiter gehen und den Textfluss in einem Container tatsächlich über mehrere Spalten fließen lassen möchte, kann sich die CSS3-Eigenschaft column-count zu Nutze machen, zum Beispiel so:
div.haupttext {
column-count: 2;
column-gap: 12pt;
}Die Eigenschaft column-count definiert die Anzahl der Spalten in dem betreffenden Container. Die Eigenschaft column-gap legt den Abstand zwischen den Spalten fest. Außerdem können Sie unter Verwendung der (optionalen) Eigenschaft column-width die Spaltenbreite festlegen, zum Beispiel
div {
-moz-column-width: 100px;
/* Firefox */
-webkit-column-width: 100px;
/* Safari und Chrome */
column-width: 100px; /* derzeit nur
Opera und IE 10 */
}Diese Eigenschaft wird gegebenfalls an den verfügbaren Platz angepasst.
Textfluss im Magazinlayout
Den Textfluss in Spalten und um andere Objekte herum (mittels der float-Eigenschaften) zu gestalten schöpft bei Weitem nicht alle Möglichkeiten aus. Mit den Modulen CSS Regions und CSS Exclusions lassen sich magazintypische Textflusskonstruktionen in einer Handvoll unterstützter Browser umsetzen.
Kaufberatung: Shared-Webhosting-Anbieter
Mittels CSS Regions können Sie semantisch ausgezeichnete Textabschnitte durch Blockelemente des Layouts kontrolliert fließen lassen, als ob es sich dabei um verkettete Rahmen eines Satzprogramms handelte. Um eine solche Textflusskette zu erzeugen, bedarf es lediglich etwas Markup, etwa
<div id="box-a" class="region"></div><div id="box-b" class="region"></div><div id="box-c" class="region"></div><div id="textinhalt"> Ein ganz langer
Text...</div>mit den passenden CSS-Anweisungen, zum Beispiel für Chrome ab Version 19.0
#textinhalt {
-webkit-flow-into: artikel;
}
.region {
-webkit-flow-from: artikel;
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 10px;
}
#box-a {
border: 1px solid red;
top: 10px;
left: 10px;
}
#box-b {
border: 1px solid green;
top: 210px;
left: 210px;
}
#box-c {
border: 1px solid blue;
top: 410px;
left: 410px;
}Der Code erzeugt eine benannte Textflusskette mit der Bezeichnung artikel und weist ihr den Inhalt des div-Elementes textinhalt zu. Damit der Code in Chrome ab der Version 19 funktioniert, muss man allerdings die Unterstützung für CSS Regions mit Hilfe von --enable-css-regions aktivieren.
Internet Explorer 10 (in Windows 8) unterstützt das Modul CSS Regions mit den Eigenschaften -ms-flow-into unter Verwendung eines Iframe und -ms-flow-from. Eine benannte Textflusskette können Sie in Javascript mittels
document.getFlowByName
('identifizierung')adressieren.
Die Unterstützung von CSS Regions in Browsern ist derzeit leider sehr limitiert. Abhilfe schafft die Bibliothek Modernizr. Mit Hilfe des Moduls CSS Exclusions können Sie die Konturenführung innerhalb und außerhalb beliebiger Elemente festlegen, um unter Verwendung der CSS-Eigenschaft wrap-flow den Textfluss im Stil eines Magazinlayouts rund um beliebige geometrische Formen auf Basis von SVG zu gestalten.Die Unterstützung dieser Funktion in Browsern ist praktisch nicht existent, da sich die Spezifikation noch in einer frühen Entwurfsphase befindet. Zum Experimentieren benötigt man einen speziell angepassten Browser.
Fußnoten
Auch die Umsetzung klassischer Fußnoten in Weblayouts ist längst durchaus machbar. Zur Auszeichnung des hochgestellten Zeichens einer Fußnote ist das Markup-Element <sup> vorgesehen, zum Beispiel:
<p>Hier steht der Haupttext des
Beitrags <sup><a href="#Fussnote1" name="Referenz1">[1]</a></sup> und hier wird dieser fortgesetzt.</p><p><sup>[<a name="Fussnote1" href=
"#Referenz1">1</a>]</sup> Text der Fußnote</p>
Marginalspalten und Randnotizen
Die in Magazinen und Büchern bewährten Marginalelemente wie Infokästchen oder Tipp-Icons, die den Inhalt des Artikels um zusätzliche Informationen ergänzen, lassen sich inzwischen auch in Weblayouts umsetzen. Das in HTML5 eingeführte Element <aside> macht es möglich.Das <aside>-Element kann in einem <article>-Element eingeschlossen sein oder außerhalb eines Artikels in die Seite eingebunden werden. Im ersten der beiden Fälle erhalten Sie ein Markup wie dieses:
<article><header><h1>Ein Ausflug nach Italien<h1><p class="byline">von Redaktion</p></header><section><h2>Zwischen Schwarzwald und Tirol</
h2><p>Die Reise fing am fruehen Morgen
an...</p></section><aside>Tirol ist eine Region in den
Alpen die vom Westen Oesterreichs bis in den Norden und Nordosten Italiens reicht.</aside></article>Diese Art der Anbindung empfiehlt sich dann, wenn die Annotation inhaltlich zum Artikel dazu gehört. Bezieht sich die Marginalie stattdessen auf den Inhalt der gesamten Seite und nicht speziell auf den Artikel, sind Sie aus SEO-Gründen mit dem folgenden Markup besser bedient:
<aside>In dieser Rubrik berichten wir
ueber die schoensten Urlaubsziele der Welt.</aside><article><header><h1>Ein Ausflug nach Italien<h1><p class="byline">von Redaktion</p></header><section><h2>Zwischen Schwarzwald und Tirol</h2><p>Die Reise fing am fruehen Morgen an...</p></section></article>In beiden Fällen umfasst der Text der Randnotiz Zusatzinhalte, die keine zentrale Bedeutung für den Lesefluss besitzen.
Nummerierte Überschriften
Eine Methode, um Inhalte wie in einem Printlayout zu nummerieren, besteht im Einsatz der Eigenschaften counter-increment und counter-reset, zum Beispiel
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1::before {
counter-increment:section;
content:"Teil " counter(section) ".
"; }
h2::before {
counter-increment:subsection;
content:counter(section) "."
counter(subsection) " ";}mit einem ganz gewöhnlichen Markup wie diesem:
<h1>Einfuehrung</h1><h2>Die erste Ueberschrift</h2><h2>Die zweite Ueberschrift</h2><h1>Grundlagen</h1><h2>Die erste Ueberschrift</h2><h2>Die zweite Ueberschrift</h2><h1>Zusammenfassung</h1><h2>Die erste Ueberschrift</h2><h2>Die zweite Ueberschrift</h2>Als Resultat der Anwendung der CSS-Regeln im Beispiel werden die einzelnen Überschriften - und nur die Überschriften - durchnummeriert, ganz so, als ob es sich bei dem Medium nicht um eine Website, sondern um ein ganz gewöhnliches Buch handelte.
Mit den Eigenschaften counter-increment und counter-reset kommen inzwischen alle aktuellen Browser zurecht; im Internet Explorer 8 funktioniert der Code allerdings nur unter Angabe einer !DOCTYPE-Deklaration.
Korrekter Druck
Pixelperfekte Weblayouts im Stil einer Magazinseite haben es an sich, dass man sie oftmals nicht sinnvoll drucken kann. Je aufwändiger das Layout, umso wichtiger ist ein alternatives Stylesheet für die Druckausgabe. In dem @page-Model in CSS2.1/CSS3 wird ein Webdokument mit Hilfe des @page-Elementes in Seiteneinheiten aufgeteilt.
Eine @page-Regel erlaubt es, die Ausgabegröße der Seite auf dem Druckmedium und die Abstände des Inhalts vom Seitenrand zu beeinflussen:
@page {
size: 100mm 200mm;
margin: 10mm;
}
oder:
@page {
size: A4 landscape;
margin: 5% 10mm;
}@page wird in allen Desktop-Browsern einschließlich Internet Explorer ab Version 8, jedoch mit der Ausnahme von Firefox unterstützt. Unabhängig von der Seitenaufteilung können Sie den Seitenumbruch mit der Eigenschaft page-break-after, page-break-before oder page-break-inside erzwingen (diese Eigenschaften schließen sich mit absolut positionierten Elementen aus).
Fazit
Weblayouts ähneln zunehmend Magazinlayouts. Mit neuen CSS-Modulen wie CSS Regions und CSS Exclusions gewinnen Webdesigner zusätzliche Gestaltungsspielräume, perfekten Textfluss im Stil gedruckter Magazine ohne den Einsatz von Flash zu gestalten.
