Aufbau und Umsetzung einer einfachen „Responsive Website“ ganz ohne Backend

Eine für Alle
Kommentare

Es gibt verschiedene Wege, seine Inhalte aus dem stationären Web in das mobile zu überführen. Der einfachste Weg ist, darauf zu bauen, dass alle User Smartphones nutzen, die stationäre Webseiten halbwegs nutzbar darstellen können. Wer auf HTML und CSS statt auf proprietäre Techniken wie z. B. Flash gesetzt hat, kann davon ausgehen, dass Inhalte zumindest angezeigt werden. Wenn allerdings bei der Programmierung nicht darauf geachtet wurde, die Ladezeiten gering zu halten, rächt es sich nun.

Eine Anpassung der Inhalte an mobile Geräte ist im Besonderen aus Usability-Sicht dringend anzuraten. Hierfür gibt es die verschiedensten Ansätze: Doppelte Contentpflege ermöglicht eine umfassende Anpassung des Angebotes an das mobile Nutzungsbedürfnis, bringt jedoch einen erhöhten Pflegeaufwand mit sich. Screenscraping oder Transformation sind später in der Pflege weniger aufwändig, bergen jedoch das Risiko, dass Inhalte mobil angezeigt werden, die nicht dafür geeignet sind. Wer ein neues Webangebot plant, kann anhand des folgenden Beispiels lernen, wie eine Webseite über einfache CSS-Anpassungen und ganz ohne Backend auf einer repräsentativen Auswahl von Geräten optimal dargestellt wird. Als Beispiel dient uns die Microsite, mit der der AUMA (Ausstellungs- und Messeausschuss der deutschen Wirtschaft) seine iPhone-App „MyFairs“ bewirbt.

Die Aufgabe

Die Ausgangssituation ist schnell beschrieben: Als Informations- und Hilfeseite für die iPhone- App sollte eine Landingpage erstellt werden, die von der stationären Internetseite aus und mit einem QR-Code beworben wird. Der Inhalt umfasst Informationen zum Inhalt und zur Nutzung der App, sowie über den AUMA und die beteiligten Firmen. Um geneigte User ohne iPhone ebenfalls über die App informieren zu können, sollte die Seite auch auf anderen Mobiltelefonen gut dargestellt werden. Für die sechs Seiten umfassende Microsite erschienen zusätzliche Hosting-Kosten mit angeschlossener Device-Datenbank und aufwändigem Framework überdimensioniert. Die ideale Gelegenheit, eine lange gehegte Idee in die Tat umzusetzten: Eine Website zu konzipieren, deren HTML-Gerüst mit einfachen Media Queries und verschiedenen CSS-Dateien auf möglichst vielen Geräten gut dargestellt wird und sowohl im Hoch- als auch im Querformat funktioniert.

Das Design

Als Basis des Designs sollte die Hauptseite des AUMAs fungieren (Abb. 1, 2, 3). Kopfzeile, horizontale Navigationsleiste und Inhaltsbereich wurden beibehalten, die linke Spalte für die Darstellung des Produkt-Icons verwendet und die rechte für die Screenshots der Applikation.

Abb. 1: Layout der AUMA-Startseite

Abb. 2: Fertiges Design der MyFairs-Startseite für das stationäre Web

Aufmacherbild: Tetris on the construction and real estate industry von Shutterstock / Urheberrecht: Lixell

[ header = Das Unterscheidungsmerkmal: Die Bildschirmbreite ]

Für die Darstellung auf dem iPad wurde auf die rechte Spalte mit den Screenshots verzichtet – wer sich für die App interessiert, kann sich die Bilder auch noch im App-Store anschauen.

Auf Mobiltelefonen wird nur die Hauptnavigation oberhalb des Inhaltes dargestellt. Die Links zur englischen Version und zur AUMA-Startseite (nicht angepasst) werden bei der Navigationswiederholung unterhalb des Inhalts – also im Footer der Seite – wiederholt. Die Aufteilung in mehrere Spalten wird aufgelöst: Das Produkt-Icon wird unterhalb der Hauptnavigation in der Screen-Mitte eingeblendet, die Screenshots entfallen. Der Download-Link für die App soll nur auf iPad, iPhone und iPod touch angezeigt werden.

Abb. 3: Layout der MyFairs-Startseite für das iPhone im Querformat; im Hochformat sind nur die linken 2/3 des Headers im sichtbaren Bereich

Das Unterscheidungsmerkmal: Die Bildschirmbreite

Ein gutes Unterscheidungsmerkmal und gleichzeitig ein Parameter, der für viele unterschiedliche Geräte den kleinsten gemeinsamen Nenner darstellt, ist die Bildschirmgröße. Als kleinsten Bildschirm unterstützt das Beispiel 240*320 Pixel. Weitere Größen sind natürlich die der beiden iPhone-Screens, 320*480 und 640*960 Pixel („Retina“-Display ab dem iPhone 4, dazu später mehr), das iPad-Display mit 768*1024 und ab einer Breite von 800 Pixeln das stationäre Internet.

Das CSS für die stationäre Version

Für die bessere Übersichtlichkeit habe ich in den CSSDokumenten nur die Werte untereinander geschrieben, die in einem der Dokumente geändert werden. Die gleich bleibenden Werte sind in einer Zeile hintereinander gesetzt.

@charset "UTF-8"; 
 /* CSS Document für stationäre Rechner mit mehr als 800 Pixeln Bildschirmbreite, sowie für iPad 1 und 2 Ausrichtung Querformat. Optimale Darstellung bei über 950 Pixeln Breite. App-Store-Link EINgeblendet - wird bei Androids ausgeblendet */
 
 /*Typselektoren*/
 body { width: 100%; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none; 
  margin: 10px; 
  font-size: 13px; 
  line-height: 16px; }
  
 a { color: #004A89; text-decoration: none; }
 a:hover, a:focus { font-weight: bold; }
  
 img, img a { border: none; }
 
 hr { width: 790px; 
   margin: 0px 0px 0px 160px; 
   display: block; }
 
 h1 { font-size: 13px; line-height: 16px; margin: 0px; }
 h2 { font-size: 15px; line-height: 20px; margin: 0px 0px 8px 0px; clear: left; }
 h3 { font-size: 13px; line-height: 16px; margin: 16px 0px 0px 0px; }
   
 p { float: left; margin: 0px 0px 12px 0px; width: 100%; }
 p.null { float: left; margin: 0px; width: 100%; }
 
 ul { margin: 4px 0px 0px 90px; }
 
 /*Navigation*/
 #tabarea { float: left; margin: 0px; display: block; 
  width: 950px; 
  text-align: left;
  padding: 3px 0px 3px 0px; }
 .tabs { float: left; text-align: left; margin: 0px; padding: 0px; }
 .space { width: 162px; }
 .active { font-weight: bold; color: #000000; 
  width: 120px;
  padding: 0px; }
 .linked, .linked a { text-decoration: none;
  width: 120px;
  padding: 0px; }
 .linked a:hover, .linked a:focus { text-decoration: none; font-weight: bold; }
 .space2 { width: 248px; 
  display: block; } 
 .weblanguage, .weblanguage a { width: auto; text-decoration: none; 
  padding: 0px; 
  width: 90px;
  display: block; }
 .weblanguage a:hover, .weblanguage a:focus { text-decoration: none; font-weight: bold; 
  display: block; }
 
 /*Text Areas & Columns*/
 #center { width: 950px; 
  margin: auto; }
 #copy { float: left; 
  margin: 20px 0px 10px 0px; 
  border-left: 1px solid #9f9f9f; 
  border-right: 1px solid #9f9f9f; 
  padding: 0px 10px 20px 10px; 
  width: 575px; }
 .left { float: left; clear: right; font-weight: bold;
  width: 130px; }
 .right { margin: 0px 0px 4px 0px; 
  float: right; 
  width: 435px; }
 #footer { clear: both; 
  padding: 0px 0px 0px 170px; 
  width: 950px; 
  height: 20px; 
  display: none; }
  
 /*Image Areas & Background Images*/
 #header_de { padding: 0px; display: block; 
  margin: 0px; 
  width: 960px;
  height: 120px; 
  background: url(950_web/header_de.png) no-repeat; 
  background-size: 960px 120px; }
 #header_en { padding: 0px; display: block; 
  margin: 0px; 
  width:  960px;
  height: 120px; 
  background: url(950_web/header_en.png) no-repeat; 
  background-size: 960px 120px; }
  
 #productimage { clear: none; margin: 0px; 
  float: left; 
  display: block; }
 #product-icon { display: block; 
  width: 134px; 
  height: 201px;
  margin: 25px 10px 0px 16px; 
  background: url(950_web/producticon.png) no-repeat; 
  background-size: 134px 201px; }
  
 #appstore_de { width: 169px; 
  height: 58px; 
  margin: 0px 10px 10px 0px; 
  background: url(950_web/appstore_de.png) no-repeat; 
  background-size: 169px 58px;
  float: left; 
  display: block; }
 #appstore_en { width: 169px; 
  height: 58px; 
  margin: 0px 10px 10px 0px; 
  background: url(950_web/appstore_en.png) no-repeat; 
  background-size: 169px 58px;
  float: left; 
  display: block; }
  
 #preview { float: right; clear: none; padding: 0px; 
  width: 180px; 
  margin: 20px 0px 0px 0px; 
  display: block; }
 #preview_01 { width: 180px; height: 280px; margin: 10px 0px 0px 0px; padding: 0px; border-bottom: 1px solid #9f9f9f; display: block; background-size: 180px 270px;
  background: url(950_web/preview_01.png) no-repeat;}
 #preview_02 { width: 180px; height: 280px; margin: 10px 0px 0px 0px; padding: 0px; border-bottom: 1px solid #9f9f9f; display: block; background-size: 180px 270px;
  background: url(950_web/preview_02.png) no-repeat;}
 #preview_03 { width: 180px; height: 280px; margin: 10px 0px 0px 0px; padding: 0px; border-bottom: 1px solid #9f9f9f; display: block; background-size: 180px 270px;
  background: url(950_web/preview_03.png) no-repeat;}
 #preview_04 { width: 180px; height: 280px; margin: 10px 0px 0px 0px; padding: 0px; border-bottom: 1px solid #9f9f9f; display: block; background-size: 180px 270px;
  background: url(950_web/preview_04.png) no-repeat;}
 #preview_01_en { width: 180px; height: 280px; margin: 10px 0px 0px 0px; padding: 0px; border-bottom: 1px solid #9f9f9f; display: block; background-size: 180px 270px;
  background: url(950_web/preview_01_en.png) no-repeat;}
 #preview_02_en { width: 180px; height: 280px; margin: 10px 0px 0px 0px; padding: 0px; border-bottom: 1px solid #9f9f9f; display: block; background-size: 180px 270px;
  background: url(950_web/preview_02_en.png) no-repeat;}
 #preview_03_en { width: 180px; height: 280px; margin: 10px 0px 0px 0px; padding: 0px; border-bottom: 1px solid #9f9f9f; display: block; background-size: 180px 270px;
  background: url(950_web/preview_03_en.png) no-repeat;}
 #preview_04_en { width: 180px; height: 280px; margin: 10px 0px 0px 0px; padding: 0px; border-bottom: 1px solid #9f9f9f; display: block; background-size: 180px 270px;
  background: url(950_web/preview_04_en.png) no-repeat;}
 
 #toplink { float: left; display: block; width: 100%; height: 16px; margin: 0px 0px 40px 0px; text-align: right; background-size: 16px 16px;
  background: url(950_web/top.png) no-repeat right; }  
Zweisprachigkeit

Das vorliegende Beispiel ist auf Deutsch und Englisch verfügbar. Damit das auch von Screen Readern erkannt wird, geben wir die Sprache direkt im HTML-Tag mit an:

<html lang="de" xmlns="http: //www.w3.org/1999/xhtml">

Außer dem Produkt-Icon und dem Bild, das wir als Link zum Seitenanfang einsetzen, enthalten alle Bilder Text, der in die jeweilige Sprache übersetzt wurde. Die geänderten Bilder werden einfach über eigene Klassen-IDs integriert.

[ header = Die Einbindung der verschiedenen CSS-Dateien ]

Die Einbindung der verschiedenen CSS-Dateien

Die Reihenfolge, in der die unterschiedlichen CSS-Dateien via Media Queries eingebunden werden, ist ausschlaggebend für den Erfolg. Die Eigenschaft media=“handheld“ – einst speziell zur Identifi kation mobiler Geräte vorgesehen – führt leider auf allen Testgeräten zu Fehlern. Das erste CSS zielt auf ältere Smartphones, die ihre Screenbreite nicht kennen. Die optimale Darstellung wird auf Bildschirmen mit 240*320 Pixeln erzielt:

<link type="text/css" rel="stylesheet" media="screen"
href="css/240_phones.css" />

Die ersten iPhone-Generationen kennen ihre Breite, daher lautet das CSS für 320*480 Pixel:

<link type="text/css" rel="stylesheet" media="screen and
(min-device-width: 320px)" href="css/320_phones.css" />

Das iPhone 4 mit seinem Retina-Display ist ein Sonderfall. Im Normalfall lädt es die gleichen Inhalte wie seine Vorgänger und interpoliert sie auf die doppelte Größe. Für die Ladezeiten und Effekt-Scripts generell schön, nicht jedoch für die Darstellungsqualität von Bitmap-Grafiken. Die einzige Möglichkeit, für das iPhone 4 ein eigenes CSS einzubinden, führt über die Web-Kit-spezifische Media-Eigenschaft –webkit-min-device-pixelratio:2. Das CSS, das wir hier einbinden, beinhaltet nur die Größenangaben für die Bildelemente. Alle anderen Werte wurden bereits im CSS in der letzten Zeile festgelegt und müssen nicht überschrieben werden:

<link type="text/css" rel="stylesheet" media="screen and (min-device-width:
320px) and (-webkit-min-device-pixel-ratio: 2)" href="css/320_ratio2.css" />

Ähnlich verhält es sich bei Android-Geräten. Hier wurde die Anpassung exemplarisch für eine Bildschirmauflösung von 480*800 und eine Browserauflösung von 369*622 Pixeln erstellt. Die optimale Darstellung bei Geräten mit den beschriebenen Formaten, z. B. dem HTC Desire HD, wird folgendermaßen integriert:

<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 369px)"
href="css/369_android.css" />

Als Zwischenformat zwischen 320 und 640 Pixeln Breite wurde die Version für 480*800 Pixel große Bildschirme umgesetzt:

<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 480px)"
href="css/480_phones.css" />

Da die Grafiken bereits für die Bildschirmbreite von 640*960 Pixeln für das iPhone 4 aufbereitet wurden, decken wir auch alle anderen Geräte mit dieser Bildschirmgröße mit einem eigenen CSS ab:

<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 640px)"
href="css/640_phones.css" />

Beim iPad gibt es einen Bug, der beim Drehen vom Quer- ins Hochformat sichtbar wird: Die Seite wird nach links aus dem Fenster herausgeschoben. Dem kann am einfachsten entgegengewirkt werden, indem für jede Ausrichtung ein eigenes Media Query angegeben wird. Dabei ist es nicht zwingend nötig, verschiedene CSS-Dateien einzubinden, wenn das Layout flexibel aufgebaut ist. In unserem Beispiel nutzen wir die beiden Media Queries jedoch direkt, um die App-Screenshots im Hochformat aus- und im Querformat einzublenden:

<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 768px) and
(orientation: portrait)" href="css/768_pad.css" />

In der Breite hat das iPad 1024 Pixel. Genügend Platz, um die Version für das stationäre Web mit seiner Breite von 950 Pixeln anzuzeigen:

<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 768px) and
(orientation: landscape)" href="css/950_web.css" />

Für Netbooks und andere Geräte mit einer Breite von gerade mal 800 Pixel verwenden wir das iPad-CSS ohne Screenshots. Da sie nicht über einen Flip-Screen verfügen, wissen sie in der Regel nicht, dass sie im Querformat genutzt werden. Folglich benötigen sie ein eigenes Media Query:

<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 800px)"
href="css/768_pad.css" />

Um die Wahrscheinlichkeit zu verringern, dass Grafiken, die auf allen Geräten dargestellt werden sollen, zunächst in allen kleineren Größen geladen werden, beinhalten die entsprechenden Elemente in allen bisherigen CSSDateien die Eigenschaft display: none. Durch das folgende CSS-Dokument werden die Bilder für den Header, das Produkt-Icon und den Link zum Seitenanfang mit display: block; eingeblendet. Das Darstellungsverhalten der App-Store-Grafik wird später via User Agent gesteuert:

<link type="text/css" rel="stylesheet" media="screen" href="css/activator.css" />

Computer mit größeren Bildschirmen erhalten das CSS mit den Screenshots:

<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 950px)" href="css/950_web.css" />

Der Internet Explorer interpretiert die min-device-width nicht und nutzt einfach das erste CSS für die Bildschirme in 240 Pixeln Breite – also richten wir noch eine altmodische Browserweiche für ihn ein:

<!--[if IE ]> 
<link type="text/css" rel="stylesheet" media="all" href="css/950_web.css">
<![endif]-->

Damit haben wir das Kernstück unserer Responsive Website fertiggestellt.

[ header = Einschub: Barrierefreiheit auf iPhone und iPad ]

Einschub: Barrierefreiheit auf iPhone und iPad

Grundsätzlich erfüllen wir mit unserer „Responsive Website“ (eine Website, die sich selbständig an verschiedene Geräte anpasst) eine der Grundanforderungen der Barrierefreiheit. Die Suche nach der optimierten Version entfällt so für den User. Nun sind Mobiltelefone nicht unbedingt für ihre Barrierefreiheit bekannt, holen jedoch zunehmend auf. iPhone und iPad sind ab der Softwareversion 4 mit verschiedenen Bedienungshilfen ausgestattet und erfreuen sich großer Beliebtheit u. a. bei blinden und sehbehinderten Usern. Über den Menüpunkt BEDIENHILFEN in den Einstellungen kann man verschiedene Optionen auswählen, um die Nutzungsbarrieren seinen individuellen Bedürfnissen nach zu reduzieren.

  • VoiceOver verändert die Bedienung des Gerätes grundlegend, da bei einfacher Selektion nur der Inhalt des markierten Elements vorgelesen wird. Um einen Link auszuwählen muss der User nun doppelt klicken, zum Scrollen drei Finger einsetzen und längere Strecken auf der Oberfläche zurücklegen, um die Aktion deutlich von dem suchenden Abtasten abzuheben. Bei Bildern wird nicht wie erwartet der Alt-Tag, sondern der Title-Tag vorgelesen (beide werden bei der Selektion ohne aktivierte VoiceOver-Funktion nicht angezeigt). Sehr wichtig für die Sprachausgabe ist das lang-Attribut im öffnenden HTML-Tag. Darüber kann die Sprachausgabe unabhängig von der Systemsprache gesteuert werden, was auf dem iPad z. B. ohne zusätzliche Sprachinstallation hervorragend funktioniert. Einzelne englische Wörter, z. B. via <span lang=“en“>…</span> auszuzeichnen, führt jedoch leider dazu, dass die Vorlesefunktion mitten im Absatz beendet wird. Ähnlich verhält es sich mit anderen Tags, unabhängig davon, ob sie inline oder als Blockelement ausgezeichnet wurden. Hier muss Apple noch kräftig nachrüsten, denn herauszufinden, wo auf dem Bildschirm der Lesefluss unterbrochen wurde ist – zumindest für sehende User mit geschlossenen Augen – verwirrend.
  • Zoomen erlaubt dem User, auch dann eine Seite zu zoomen, wenn dies durch den Programmierer der Seite im Viewport (s. u.) deaktiviert wurde. Gezoomt wird dabei immer der gesamte Bildschirminhalt. Die Funktion hat also keine Auswirkungen auf das HTML-Gerüst oder die CSS-Auszeichnungen.
  • Großer Text ermöglicht es, für die Applikationen Kontakte, Mail und Notizen die Schriftgröße auf Werte zwischen 20 und 56 Punkt einzustellen. Eine spezielle Einstellungsmöglichkeit für Safari existiert nicht.
  • Weiß auf schwarz invertiert den Bildschirm komplett, auch wenn eine Seite schon weiß auf schwarz angelegt wurde – sie erscheint dann schwarz auf weiß. Grundsätzlich ist die Farbkombination von weißer Schrift auf schwarzem Grund für blendempfindliche Menschen angenehmer. Allerdings gibt es auf dem iPad das Problem, dass der Bildschirm bei schwarzem Hintergrund mehr spiegelt. Wer auf Nummer sicher gehen will, integriert ein zweites Farbschema mit CSS-Wechsler – den wir jedoch in diesem Beispiel außen vor lassen. Mit einem möglichst hohen Kontrast zwischen Vorder- und Hintergrundfarbe liegt man in der Regel richtig.
Tipp: Um die Bedienhilfe-Funktionen nach dem Testen schnell wieder deaktivieren zu können, sollte die Funktion „Home-Dreifachklick“ auf „Fragen“ eingestellt werden
Inhaltstyp Stationäres Web iPhone/iPod, iPad Andere mobile Geräte
Favoriten-Icon rel=“shortcut icon“ rel=“apple-touch-icon“ Je nach Gerät
App-Screenshots Ja

Nein, da im App-Store verfügbar.
Ausnahme: iPad-Querformat

Nein, da für diese Geräte nicht installierbar
Download-Link Ja Ja

Nein

Tabelle 1: Inhaltsübersicht auf den verschiedenen Plattformen

Bilder einbinden

Die Bilder sollen für die verschiedenen Bildschirmgrößen angepasst dargestellt werden. Um die Ladezeiten so gering wie möglich zu halten, sollten die Bilder für jede Größe optimiert vorliegen. Zugeordnet werden die Bilder ganz einfach über die verschiedenen CSS-Dateien, über die sie in den Hintergrund von Box-Elementen geladen werden. Der Code für den App-Store-Link im CSS-Dokument lautet:

#appstore_de {
background: url(320_phones/appstore_de.png) no-repeat;
}

Im HTML-Quellcode muss nur ein Div-Tag integriert werden, in das wir später weiteren Inhalt einfügen werden:

<div id="appstore_de">...</div>

Allerdings besteht für diese Elemente keine Möglichkeit, Alt- und Title-Attribute einzusetzen, sofern sie kein Bild enthalten und auch nicht verlinkt sind. Da diese Attribute jedoch für die Barrierefreiheit wichtig sind, fügen wir die Elemente im HTML an ein Blank- Gif gebunden ein:

<div id="appstore_de">
<img src="css/blank.png" alt="Link zu "MyFairs" im App Store
von Apple." title="Link zu "MyFairs" im App Store von Apple."
width="100%" height="100%" />
</div>

[ header = Der Link in den App-Store ]

Der Link in den App-Store

Jede App im App-Store von Apple hat einen URL, der mit dem Protokoll itunes:// beginnt. Auf mobilen Apple-Devices kann so in die App-Store-Applikation verlinkt und die Downloadseite der App direkt aufgerufen werden. Im stationären Internet hat Apple inzwischen auch eine Zielseite für diese Links eingerichtet. Wenn auf einem Computer jedoch iTunes installiert ist wird das Programm gleichzeitig geöffnet und die gewünschte App dort angezeigt. Diesen Link legen wir um unser Blank-Gif. Im stationären Internet soll der Link in einem neuen Fenster bzw. Tab geöffnet werden. Für die mobilen Apple-Geräte benötigen wir den target=“new“ nicht, da der Browser sowieso verlassen wird und unsere Seite dort noch geöffnet ist, wenn der User wieder in den Browser wechselt.

<div id="appstore_de">
<a href="http://itunes.apple.com/de/app/myfairs/
id390617870?mt=8#ls=1" target="_new">
<img src="css/blank.png" alt="Link zu "MyFairs" im
App Store von Apple." title="Link zu "MyFairs" im App
Store von Apple." width="100%" height="100%" />
</a>
</div>

Damit der Link nicht auf allen mobilen Geräten angezeigt wird, blenden wir das komplette Element zunächst in allen CSS-Dateien aus, die potenziell von Mobiltelefonen verwendet werden:

#appstore_de {
background: url(320_phones/appstore_de.png) no-repeat;
display: none;
}

App-Store-Link anhand von User Agents ein- und ausblenden

Mithilfe einer kleinen User-Agent-Abfrage wird ein zusätzliches CSS-Dokument auf den betreffenden Geräten in den Header integriert (Listing 2).

<script type="text/javascript">
var userAgent = navigator.userAgent;
    if(userAgent.indexOf('iPad')!=-1) {
document.write('<link type= "text/css" rel="stylesheet" media="screen" href="css/itunes.css" />');
    } else if (userAgent.indexOf('iPhone')!=-1) {
document.write('<link type= "text/css" rel="stylesheet" media="screen" href="css/itunes.css" />');
    } else if (userAgent.indexOf('iPod')!=-1) {
document.write('<link type= "text/css" rel="stylesheet" media="screen" href="css/itunes.css" />');
    } 
  </script>

Auf Netbooks, Laptops und stationären Computern, die potenziell iTunes installiert haben und ebenfalls für den Download der App in Frage kommen, wird der Link im CSS zunächst grundsätzlich eingebunden. Die Mindestbreite von 800 Pixeln ist jedoch schon bei einigen Smartphones erreicht. Damit der Link wenigstens auf den Android-Geräten (z. B. Tablets mit entsprechender Browserauflösung) nicht erscheint, ergänzen wir die Browserweiche um den Link wieder auszublenden:

else if (userAgent.indexOf('Android')!=-1) {
document.write('<link type= "text/css" rel="stylesheet" media="screen"
href="css/noapp.css" />');
}

Im CSS-Dokument itunes.css steht als Eigenschaft der Klasse appstore_de lediglich display: block; während noapp.css das Element wieder ausblendet. Ein Besucher meines Vortrages auf der MobileTech-Con hat darauf hingewiesen, dass Tests mit document.write bei ihnen zu häufigen Fehlern geführt haben, weil die Funktion vor dem Dokument geladen wurde. Der Grund, warum das gezeigte Beispiel funktioniert, liegt vermutlich darin, dass die Geräte zunächst die CSS-Daten aus den Media Queries laden und die über document.write eingebundenen CSS-Dateien mit ihren 115 Byte kaum ins Gewicht fallen.

Sollbruchstellen im Text erzeugen
Im Print werden Texte in gut gestalteten Erzeugnissen per Hand so umgebrochen, dass die Silbentrennung korrekt ist und der Flatter- oder Blocksatz ein ausgewogenes Schriftbild ergibt. Im Web entfällt diese Möglichkeit: Text kann per Tastenkombination skaliert werden. Die Zeilenlänge variiert entsprechend. Im mobilen Internet kommt hinzu, dass die Bildschirmbreite und die Laufweite der Schrift zu einem sehr unterschiedlichen Zeilenfall führen. Damit lange Wörter von den Browsern an den richtigen und sinnvollen Stellen umgebrochen werden, kann man sie mit „bedingten Trennstrichen“ versehen. Diese werden mithilfe der HTML-Entity &shy; erzeugt, z. B. „Auslands&shy;messe&shy;pro&shy;gramme“. Wenn das Wort nicht mehr komplett in eine Zeile passt, werden die Bindestriche nun an den passenden Stellen gesetzt. Die Entity &shy; (soft hyphen) ist dem Dezimalcode &#8203; (zero width space) und dem Tag <wbr /> (word break) vorzuziehen, da ersterer nicht von allen Geräten unterstützt wird und letzterer keinen Trennstrich erzeugt. Das iPhone zeigt an den Sollbruchstellen einen etwas zu großen Buchstabenabstand an, der dem Typografie-Laien nicht weiter störend auffällt. 
Auf dem Internet Explorer 5 für Mac kommt es zu Darstellungsproblemen: jedes &shy; wird mit einem Bindestrich und einem Leerzeichen dargestellt. Da dieser Browser jedoch seit 2005 nicht mehr von Microsoft unterstützt wird, können wir ihn ignorieren.
Der Indizierung des Textes durch Suchmaschinen tut diese Schreibweise keinen Abbruch [2].
Wo wir gerade bei HTML-Entitys sind: Bitte nicht vergessen, &nbsp; zu nutzen, um einen Zeilenumbruch zwischen Wert und Einheit – z. B. HTML&nbsp;5.0 – oder direkt vor bzw. nach einem Gedankenstrich zu verhindern!

Bitmap-Bilder auf dem iPhone 4 hochauflösend einbinden

Das Retina-Display, das die doppelte Aufl ösung von 640*960 Pixeln auf der gleichen Fläche des alten 320*480-Pixel-Displays unterbringt, benötigt ein besonderes Handling. Es skaliert Webseiten, die für den kleinen iPhone-Bildschirm optimiert wurden, einfach hoch. Dies führt zu einer Unschärfe, die den gesamten Effekt eines brillianten Displays – der im User Interface gegeben ist – im Browser zunichte macht. Der Workaround, um dem entgegenzuwirken, ist etwas umständlich: Bilder, die in der richtigen Aufl ösung vorliegen, dürfen nämlich nicht als Image-Tag im HTML integriert werden, sondern müssen via CSS im Hintergrund eines Elements eingesetzt werden. Das Element erhält seine Größenangaben auf Basis des 320-Pixel- Screens. Das Bild muss die doppelte Aufl ösung bei gleicher Elementgröße haben. Damit es korrekt in das Element eingefügt wird bekommt es jedoch die Maße des Elements mitgegeben. Für unser Header-Bild, das die Ausmaße 960*120 Pixel hat, sieht das im CSS so aus:

#header_de {
height: 60px; width: auto;
background:url(iphone_4_images/header_de.png) no-repeat;
background-size: 480px 60px; […] }

Abb. 4: Achtfache Vergrößerung der Pixel-Darstellung auf dem Retina-Display, ohne (links) und mit (rechts) angepasstem CSS

Besonderheiten von Smartphone-Browsern

Browser von Smartphones sind dafür ausgelegt, zunächst (fast) alle Webseiten anzeigen zu können. Aus diesem Grund verhalten sie sich in einigen Punkten grundlegend anders als die Browser von Featurephones und Desktop-Computern. Damit unsere Seite auf Smartphones nach unseren Wünschen dargestellt wird, benötigen wir ein paar spezielle Codeschnipsel in HTML und CSS. Von anderen Browsern werden diese sehr spezifischen Anweisungen nicht interpretiert, sodass wir keine wir keine weiteren Weichen integrieren müssen, um sie anderswo auszublenden.

Den Bildausschnitt festlegen

Da wäre zunächst die Einstellung des Viewports im Head-Bereich der HTML-Datei. Wenn wir diese Zeile weglassen wird unsere Seite auf dem iPhone im Hochformat in 33 Prozent und im Querformat in 50 Prozent dargestellt. Wir wollen jedoch, dass sie in 100 Prozent dargestellt wird und wir die volle Kontrolle über die Darstellung behalten:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

Da die Seite bereits für die Darstellung auf Mobiltelefonen ausgelegt wurde, wird die Möglichkeit zur Skalierung durch den User auch über die Minimal- und Maximalwerte ausgeschlossen. User, die bereits die Zoomfunktion aktiviert haben, können die Seite nach wie vor vergrößern. 

Lange Zeit habe ich die Breite des Contents außerdem mit dem Wert „width=320px“ festgelegt. Da der Viewport jedoch auch von Android-Geräten zur Steuerung des Zoomfaktors genutzt wird und wir es dadurch mit weiteren Bildschirmbreiten zu tun haben, verlassen wir uns hier auf die Angabe des Skalierungsfaktors. 

[ header = iPhone und Co. – Textzoom im Querformat kontrollieren ]

iPhone und Co. – Textzoom im Querformat kontrollieren

Was die automatische Skalierung des Textes im Querformat betrifft, so gibt es auch hierfür eine Möglichkeit, diese zu unterbinden, sofern dies gewünscht ist. Dafür wird im CSS die Eigenschaft -webkit-text-size-adjust: none; gesetzt. Ein prozentualer Wert ist ebenfalls möglich, um den Effekt gezielt einzusetzen. Global für die ganze Seite geht dies am schnellsten über den Typselektor body

iPhone und Co. – Adressleiste verbergen

Um die Adressleiste nach dem Laden des URL auszublenden, wird der Body-Tag im HTML um eine kleine JavaScript-Funktion ergänzt, die beim Laden der Seite ausgeführt wird. Die Funktion verschiebt den Inhalt und die Adressleiste nach oben, bis letztere außerhalb des sichtbaren Bereichs liegt. Da auf dem iPad die Adresszeile mit den Bedienelementen zusammengelegt wurde, hat diese Funktion dort keine Auswirkungen:

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);" >

iPhone und Co. – Wechsel zwischen Hoch- und Querformat

Die zweite Funktion, die im Body-Tag untergebracht wird, reagiert auf die Ausrichtung des Screens und sorgt (theoretisch) dafür, dass der Seiteninhalt korrekt gedreht wird:

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);" onorientationchange="updateOrientation();">

Telefonnummern

Damit Telefonnummern von Smartphones als solche identifiziert werden können, müssen sie in einem ganz bestimmten Format geschrieben werden. Es müssen mindestens vier Ziffern direkt hintereinander stehen, Sonderzeichen sind gar nicht und maximal zwei Leerzeichen erlaubt. Aus dem typografisch korrekten +49 (0) 30 – 12 34 56 – 78 muss +493012345678 oder +4930 123456 78 werden. Natürlich könnte man die Telefonnummer auch direkt verlinken, was allerdings auf Geräten ohne Telefonie zu Fehlermeldungen führen kann. 

Inhalte strukturieren

In unserem Beispiel erklären wir einige Begriffe. Diese sollen im stationären Web nebeneinander stehen. Im HTML generieren wir für jeden Eintrag einen Absatz:

<p> <span class="left">Begriff</span> <span class="right">Erklärung</span> </p>

Im CSS für Geräte mit mehr als 640 Pixeln definieren wir fixe Werte für die Breite der beiden Spalten und bestimmen, wie sie einander umfließen sollen:

.left { float: left; clear: right; font-weight: bold;
  width: 130px; }
.right { margin: 0px 0px 4px 0px; 
  float: right; 
  width: 435px; }

Auf allen kleineren Geräten stellen wir Begriff und Erklärung übereinander dar und richten beide Textblöcke links aus:

.left { float: left; clear: right; font-weight: bold;
width: 100%; }
.right { margin: 0px 0px 4px 0px; 
float: left; 
width: 100%; }

HTML 5.0-Tags

Im Quellcode finden Sie die HTML-5.0-Tags nav und aside zur kontextuellen Auszeichnung von Navigation und Zusatzinformationen. Diese können für unsere „Responsive Website“ nur innerhalb von Div-Elementen verwendet werden, damit das CSS zuverlässig angewendet wird. Tatsächlich waren es nicht die Mobiltelefone, die Probleme bereitet haben, wenn es um die Erstellung von Box-Elementen ging, sondern der Internet Explorer 8, der nach wie vor verbreitet ist.

Fazit

Für einfache Seitenstrukturen ohne Spezialelemente können Media Queries wunderbar genutzt werden. Das gezeigte Beispiel ist noch lange nicht das Ende aller Möglichkeiten. Sobald Spezialeffekte mithilfe von JavaScript und Ajax oder gerätespezifische Assets (Wallpaper, Screensaver, Themes) integriert werden sollen, kommt man (noch?) nicht um die Einbindung eines Backends mit Device-Datenbank und Codetransformation herum. Für die Integration von Videos kann man auf HTML 5.0 aufsetzen und Fallback-Videoinhalte über bestehende Plattformen verlinken. 

Aus Bugs, die früher als Feature verkauft wurden, sind inzwischen Features geworden, die sich wie Bugs anfühlen. Hürden, die es zu meistern gilt, gibt es nach wie vor. 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -