Individuelle Layouts für unterschiedliche Endgeräte
Inhaltsübersicht:
Optimierung der Druckansicht
Das Zuweisen verschiedener CSS-Dateien
erfolgt über das media-Attribut im
<link>-Element im Dokumentenkopf (siehe
Einbinden von Layout-Dateien)
und ermöglicht bspw. das Ausblenden
von Bildern oder Werbebannern in der Druckvariante (media="print").
Im nachfolgenden Beispiel wird der Absatz
<p class="banner">...</p>
durch die Anweisung display: none in der speziell
angelegten CSS-Datei
beim Druck nicht mehr angezeigt, in der grafischen Ansicht bleibt
dieser Absatz aber sichtbar.
Beispiel XHTML-Datei (Ausschnitt):
[...]
<!-- Formatierungsdatei für Browser-Ansicht -->
<link rel="stylesheet"
type="text/css"
href="format.css"
title="Standard"
media="screen" />
<!-- Formatierungsdatei für Druckansicht -->
<link rel="stylesheet"
type="text/css"
href="print.css"
title="Druckansicht"
media="print" />
</head>
<body>
<!-- Beginn Absatz: bei Druck ausgeblendet -->
<p class="banner">
<img src="it.gif"
width="114"
height="46"
alt="IT-Infothek-Logo" />
Bachelor-Thesis<br />
Testseite Formatvorlagen<br />
Christiane Müller
<!-- Ende Absatz: bei Druck ausgeblendet -->
</p>
<h1>Barrierefreie Gestaltung von Internetseiten</h1>
<h2>Einleitung</h2>
<h3>Barrierefreiheit</h3>
<p>Textabsatz.</p>
<h3>Zielstellung</h3>
<p>Textabsatz.</p>
[...]
Beispiel CSS-Datei für Druckausgabe (Ausschnitt):
/* Absatz der Klasse 'banner' bei Druck ausgeblendet */
p.banner { display: none; }
Bildbeschreibung "Browser-Ansicht und Druckvorschau mit Formatvorlagen": Bildschirmfotos von der Bildschirmansicht (links) und der Druckvorschau (rechts) der im vorangegangenen Beispiel beschriebenen Datei.
Optimierung der Mobiltelefon-Ansicht
Für standardkonforme Browser
wie z.B. Opera kann problemlos
über media="handheld" ein individualisiertes
Format für eine optimierte Ansicht auf Mobiltelefonen hinterlegt
werden. Für den Mobile Safari
ist mit only screen and (max-device-width: 480px) eine
abweichende Angabe notwendig, die aber auch von anderen aktuellen
Browser-Umsetzungen interpretiert
wird.
Beispiel XHTML-Datei (Ausschnitt):
[...]
<!-- Zusätzliche Angabe für iPhone-Ansicht -->
<meta name="viewport" content="width=device-width"
/>
<!-- Formatierungsdatei für Mobiltelefon-Ansicht -->
<link rel="stylesheet"
type="text/css"
href="mobile.css"
media="handheld, only screen and (max-device-width: 480px)"
/>
[...]
In der entsprechenden CSS-Datei
(im vorangegangenen Quelltext-Beispiel mobile.css) werden
beliebige Formatierungsanweisungen hinterlegt. Da auf einem Kleinbildbildschirm
nur begrenzt Platz zur Verfügung steht, muss dieser optimal genutzt
werden - Bereiche von geringem Informationsgehalt und ergänzende
Navigationsleisten können z.B.
in der mobilen Ansicht ausgeblendet werden. Weiterhin ist zu beachten,
dass die Bedienung vermehrt über die Finger statt tastaturgestützt
oder über einen Stift stattfindet, so dass Schaltflächen
zur nutzerfreundlichen Bedienung ausreichend groß angelegt sein
sollten. Auch die Schriftgröße ist zu bedenken, um das Lesen
auf Kleinbildschirmen angenehm zu gestalten.
Unter dem Stichwort Responsive Design bekommt ab dem Jahr 2011 mit HTML5 und CSS3 das Formatieren für unterschiedliche Endgeräte nochmals Aufwind. Dank der weiter ausgebauten Media Queries und breiter Unterstützung seitens der Browser wird es immer besser möglich, verschiedene Layouts anzubieten.
Spezielle Daten für die Mobilansicht
Für die Mobilansicht können zusätzlich spezielle Telefonnummer-Links hinterlegt werden, die ein direktes Anwählen oder das direkte Schreiben einer Kurzmitteilung an diese Kontaktnummer ermöglichen, ohne die Telefonnummer nochmals eintippen zu müssen. In der Standardansicht können diese Links dann wiederum ausgeblendet werden.
Beispiel XHTML-Datei (Ausschnitt):
<!-- Zusätzliche Angabe: Kurznachricht senden -->
<a href="sms:123456789">Kurznachricht senden</a>
<!-- Zusätzliche Angabe: Kontakt anrufen -->
<a href="tel:123456789">Kontakt anrufen</a>
Problemfall Internet Explorer
Bis vor einiger Zeit habe ich immer die Fraktion belächelt, die über den Internet Explorer schimpfte. Wenn ich sauber Inhalt und Layout trenne und mich an die Standards des W3C halte, passt das schon einigermaßen im Internet Explorer, dachte ich. Stimmt auch - nur dass der Internet Explorer immer noch ein paar - teilweise eigentlich unnötige - Angaben zusätzlich braucht, damit das Design ähnlich aussieht wie in anderen Browser-Umsetzungen wie Firefox, Safari oder Opera. Aber der Internet Explorer auf Mobiltelefonen scheint unberechenbar zu sein. Mein altes Mobiltelefon (ein MDA Touch, erst Windows Mobile 6.0, später Windows Mobile 6.1) setzt die Angaben der Mobilansicht vernünftig um. Bei meinem neuen Smartphone (HTC Touch Diamond 2) gibt der Internet Explorer jedoch einen Mix beider Formatierungsanweisungen aus - teilweise Anweisungen aus der Bildschirmansicht, teilweise die Angaben für die Mobilansicht! Das Problem ist, dass viele Mobiltelefone die Verfügbarkeit einer hinterlegten Formatierungsdatei für Mobilansicht einfach ignorieren, nach dem Motto "Wir sind viel mehr als nur ein Telefon, wir wollen eine ganz normale Browser-Umgebung vermitteln".
Es gibt zahlreiche Vorschläge im Web, wie man dem Internet Explorer angeblich beikommen kann - keiner davon hat sich auf meinem aktuellen Gerät als erfolgreich erwiesen. Mit den Hausmitteln XHTML und CSS scheint es unmöglich, zuverlässig Formatzuweisungen für Mobiltelefone zu übermitteln. Um sicherzustellen, dass Mobiltelefone ein entsprechendes Layout ausgeliefert bekommen, müssen deshalb zusätzlich Skript-basierte Abfragen der Browser-Kennung (User-Agent) stattfinden (z.B. mit PHP). Hinzu kommt, dass der Nutzer seine Browser-Kennung auch manuell ändern kann. Ergänzend ist daher das Einbinden einer manuellen Layout-Wahlmöglichkeit (als Liste mit Links zu beiden Layout-Varianten) empfehlenswert.
Testmöglichkeiten
Die meisten aktuellen Desktop-Browser
ermöglichen das Umschalten zwischen verschiedenen Formatvorlagen
direkt in der grafischen Anzeige. Dazu muss im <link>-Element
das title-Attribut eingebunden sein. Im Mozilla sind
hinterlegte Formatvorlagen über "Ansicht -
Style verwenden" erreichbar,
im Firefox über "Ansicht -
Webseiten-Stil", im Opera über "Ansicht -
Seitendarstellung" und im Internet Explorer über
"Ansicht - Format". Aufgrund der fehlenden
Unterstützung in älteren Browser-Versionen
(und weil viele Nutzer diese Funktionen in ihrem Browser
gar nicht kennen) wird die Möglichkeit, zwischen verschiedenen
Formatvorlagen zu wechseln, in der Praxis oft skriptbasiert angeboten,
was jedoch zu Barrieren führen kann (siehe Dynamische Inhalte).
Bildbeschreibung "Wechsel zwischen Formatvorlagen im Mozilla": Bildschirmfoto des Vorgangs im Mozilla (Ansicht - Style verwenden).
Eine weitere Testmöglichkeit für die Simulation der Anzeige auf Kleinbildschirmen steht mit dem Opera Mini Simulator, einer online verfügbaren Applikation, bereit. Dieses Werkzeug ist Browser-basiert, zusätzliche Installationen sind also nicht notwendig.
Bildbeschreibung "Opera Mini Simulator": Bildschirmfotos von der Startseite des Projektes [diːbaːweː] (links) sowie eine Unterseite (rechts).
Eine Applikation, die auf dem eigenen Rechner installiert werden muss (notwendiges Betriebssystem: Microsoft Windows), ist MobiOne, ein kostenloses Werkzeug, das u.a. einen Apple iPhone- und einen Palm Pre-Emulator enthält. Weitere Geräte-Emulatoren sind in Planung. Entgegen vielen iPhone-Simulatoren, die online angeboten werden, ist die mit diesem Programm erzeugte Vorschau sehr realitätsnah.
Bildbeschreibung "Bildschirmansichten auf Apple iPhone (Simulation)": Vier Bildschirmsimulationen der Ansichten im Hoch- und Querformat auf einem Apple iPhone, Mobile Safari. Startseite des Projektes [diːbaːweː] im Hochformat (oben links) und im Querformat (unten links) sowie eine Unterseite im Hochformat (oben rechts) und im Querformat (unten rechts). Auf den Unterseiten ist die Hauptnavigation ausgeblendet, so dass sofort der eigentliche Artikelinhalt gelesen werden kann.
Ein weiteres kostenloses Programm ist der Android Emulator, ein Simulator für das Mobiltelefon-Betriebssystem Android von Google (notwendiges Betriebssystem: Microsoft Windows, Macintosh oder Linux).
Bildbeschreibung "Google Android Emulator": Bildschirmfotos von der Startseite des Projektes [diːbaːweː] (links) sowie eine Unterseite (rechts).
Weiterführende Literatur:
- Münz, Stefan:
- Professionelle Websites. Programmierung, Design und
Administration von Webseiten,
Seite 227,
Addison-Wesley Verlag, München, 2. überarbeitete Auflage 2006 (IX-Buchtipp),
ISBN 3827323703 - Münz, Stefan und Nefzger, Wolfgang:
- HTML
& Web-Publishing Handbuch, Band 1,
Seite 408 ff.,
Franzis' Verlag GmbH, Poing, 2002,
ISBN 3772375162