Anzeige
Anzeige
UX & Design
Artikel merken

Standardkonforme Websites für mobile Endgeräte entwickeln: Mobiles Surfvergnügen

Eigentlich ist das mobile Web ein alter Hut. Praktisch alle Handy-Hersteller liefern seit Jahren recht gute webtaugliche mobile Endgeräte, fast jedes neue Handy hat heute einen „vollwertigen“ Webbrowser an Bord. Und dennoch: Erst der Medien-Hype um die Einführung des iPhones hat das Thema einer breiten Öffentlichkeit nähergebracht. Wir zeigen, wie Websites für mobile Geräte gestrickt sein sollten und geben Tipps zur Programmierung.

8 Min. Lesezeit
Anzeige
Anzeige

Mobilfunkanbieter bauen derzeit unter Hochdruck ihre High-Speed-Netze aus. Neue, immer erschwinglichere Daten-Optionen sorgen zudem dafür, dass dem mobilen Surfen auf breiter Basis bald nichts mehr im Wege stehen dürfte. Dabei ist es allerdings selten sinnvoll, diesen mobilen Geräten die Darstellung einer primär für den PC-Bildschirm entwickelten Website zuzumuten. Ziel sollte es vielmehr sein, eine schlanke Anwendung anzubieten, die dem Netzwerk, der Hardware und den veränderten Bedürfnissen des mobilen Surfers gerecht wird. So wird beispielsweise ein Klick auf einen Link der Art <a href="tel:+4930123456789">Rufen Sie uns an</a> das Handy anweisen, die verlinkte Telefonnummer direkt anzurufen. Für unterwegs ist dies praktisch, am PC eher nicht. Gute Gründe also, sich das Wie und Warum des Mobile-Web-Development etwas genauer anzusehen.

WAP 2.0

Anzeige
Anzeige

Nie war es so einfach, Handheld-optimierte Webangebote zu erstellen. Entwicklern stehen zahlreiche Fachbücher zur Seite [1]
[2]
[3], zudem benötigt man weder einen speziellen WAP-Server noch muss man sich mit WML (Wireless Markup Language) und allem, was dazugehört, beschäftigen. Das aktuelle WAP 2.0 ist XHTML plus CSS, genauer: XHTML-MP und WCSS. Dabei steht MP für „Mobile Profile“ und das W für „Wireless“. Ausgeliefert wird über einen ganz normalen HTTP-Server via TCP/IP, also erstmal nichts Neues für den erfahrenen Webworker. Wichtig sind hier allerdings der korrekte MIME-Type sowie das Encoding: XHTML-MP-Seiten sollten als UTF-8 mit dem MIME-Type „application/xhtml+xml“ (nicht text/html) ausgeliefert werden.

XHTML-MP
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel des Dokumentes</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="Cache-Control" content="max-age=3000" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
* {margin: 0;padding: 0;}
body {font-family: sans-serif;}
</style>
</head>
<body>
<h1>Überschrift H1</h1>
<p>Lorem ipsum ...</p>
</body>
</html>

Listing 1

Auf der Basis eines validen XHTML-MP-Dokuments kann man dann wie gewohnt per CSS losstylen. Zusätzlich zu den bekannten CSS-Anweisungen gibt es auch einige nützliche mobile Besonderheiten. So beschränkt die CSS-Eigenschaft „-wap-input-format“ ein Eingabefeld auf bestimmte Zeichen, was bei Eingaben über Telefontastaturen sehr hilfreich sein kann. Ein Eingabefeld wie <input type="text" style=‘-wap-input-format: "A*a"’/> beispielsweise gibt vor, dass nur Buchstaben eingegeben werden können und der erste ein Großbuchstabe sein muss – praktisch etwa bei Eingabefeldern für Namen [4].

Anzeige
Anzeige

Eingebunden werden Styles wie gehabt inline direkt im <head>-Bereich oder als externe CSS-Datei. In der Praxis hat sich allerdings die Einbindung direkt im <head>-Bereich bewährt, denn fast jedes Gerät rendert externe CSS-Dateien erst nach dem HTML, sodass es oft zum so genannten FOUC (Flash Of Unstyled Content) kommt – also die vorübergehende, unschöne Darstellung ohne CSS.

Anzeige
Anzeige

Screendesign für kleine Bildschirme

Die am weitesten verbreitete Auflösung bei Mobiltelefonen ist QVGA, also 240 x 320 Pixel. Diese sollte man als Referenzgröße und kleinsten gemeinsamen Nenner bei Konzeption und Design besonders im Auge behalten. Es ist anzunehmen, dass wer mit dem Handy im Web surfen will und sich dazu eine geeignete Datenoption bucht, auch ein geeignetes Gerät besitzt oder erwirbt. In seltenen Fällen greifen Handys mit kleineren Auflösungen wie 176 x 220 Pixel auf die Seite zu, noch geringer wird es eher nicht. Von daher kann man heute QVGA im Hochformat getrost als Basis für das Design annehmen. Daraus ergibt sich dann eine maximale Größe für Grafiken: Abzüglich etwas Toleranz für den vertikalen Scrollbalken ist man mit circa 215 Pixel Breite auf der sicheren Seite.

Es gibt aber auch deutlich höhere Auflösungen. So bietet zum Beispiel das iPhone eine Auflösung von 320 x 480 Pixel. Außerdem ist zu bedenken, dass fast jedes Gerät auch im Landscape-Mode (Querformat) genutzt werden kann. Einige Blackberrys arbeiten von Haus aus im Querformat – ein flexibles, elastisches Design ohne fixe Breiten passt sich den mobilen Gegebenheiten am besten an.

Anzeige
Anzeige

Darüber hinaus ist unbedingt auf einen überdurchschnittlich hohen Kontrast zu achten. Während man am PC-Arbeitsplatz sicherlich für geeignete Lichtverhältnisse sorgen kann, bewegt sich der mobile Nutzer mit seinem Handheld in den unterschiedlichsten Situationen. In gleißendem Sonnenlicht kann es enorm schwer werden, hellblaue Schrift auf dunkelblauem Hintergrund zu lesen, während genau das beim nächtlichen Design-Geistesblitz vielleicht für Verzückung gesorgt hat.

Neben Größe und Auflösung des Displays ist die Art, wie navigiert wird, die nächste spannende Frage während der Design- und Konzeptionsphase. Die Spanne der Möglichkeiten reicht von Tab-mäßigem „Von Link zu Link springen“, Mauszeiger-ähnlichen Methoden via Vier-Wege-Ringe, Mini-Joysticks oder Trackballs über stiftgesteuerte Touchscreens bis hin zum puren „Finger auf Touchscreen“-Konzept wie bei einigen HTC-Geräten oder eben dem iPhone.

Je nach Variante sind verschieden gestaltete und platzierte Navigationen sinnvoll. Wer Tab-mäßig navigiert, wird sich ungern erst durch viele Links „tabben“ müssen, daher sollten Navigation oder Linklisten tendenziell eher am Seitenende angesiedelt werden (was auch aus Platzgründen sinnvoll ist). Fingergesteuerte Touchscreen-Geräte dagegen brauchen möglichst große Klickflächen – ein kleiner Pfeil für „weiterlesen“ könnte da schwer zu treffen sein.

Anzeige
Anzeige

Eine große Herausforderung sind auch tiefere Navigationsebenen. Diese können oft nicht wie am Desktop-PC in Form von ausgeklappten Linklisten oder einer Breadcrumb abgebildet werden. Hier behilft man sich meistens mit „Zurück zur Übersicht“-Links am Anfang und Ende einer Unterseite. Eine gute Lösung haben hier unter anderem heise-online.mobi, m.barmer.de oder m.spiegel.de gefunden.

Content-Adaption

Oft ist es erwünscht, dynamisch verschiedene Versionen für unterschiedliche Geräteklassen auszuliefern oder überhaupt zwischen Desktop-PCs und mobilen Endgeräten zu unterscheiden, um diese dann auf verschiedene Verzeichnisse, Domains oder Subdomains umzuleiten. Möglich wird dies serverseitig, indem man den HTTP-Header ausliest und anschließend ein „redirect“ ausführt.

Ein einfaches PHP-Beispiel für eine so genannte „Mobile Device Detection“ bietet Andy Moores Skript „PHP to detect mobile phones“ [5]. Hier wird lediglich zwischen PC und mobilem Endgerät unterschieden und dementsprechend weitergeleitet. Als typische URL-Schemata für mobiloptimierte Webangebote haben sich folgende Konventionen herausgebildet:

Anzeige
Anzeige
  • Subdomains: mobile.domainname.com, im deutschen auch mobil.domainname.de und die Kurzfassung (schneller getippt) m.domainname.com
  • Verzeichnisse, ähnlich der Subdomains: domainname.com/mobile/ oder … /m/ … /mobil/
  • .mobi-Domain: Ein Sonderfall ist die relativ neue dotMobi-Toplevel-Domain à la domainname.mobi. Diese neue Domain ist nur für mobiloptimierte Angebote reserviert. Dem mobilen Surfer soll so signalisiert werden, dass hier auf jeden Fall eine mobiltaugliche Version geboten wird.

Trotz automatischer Mobile Device Detection sollte man dem Nutzer die Möglichkeit geben, auf Wunsch zwischen den Versionen zu wechseln. Manch einer möchte vielleicht doch die PC-Version nutzen.

Der nächste große Schritt ist die so genannte „Device Capability Detection“, also anhand der HTTP-Header jedes einzelne Gerät zu erkennen, danach in einer Liste dessen Fähigkeiten zu ermitteln (Screensize, Browser, Medientypen, Farbtiefe …) und dann entsprechenden Content auszuliefern, beispielsweise angepasste Grafiken oder eine bestimmte Art der Navigation.

Wenn es um den Verkauf und Download von Spielen, Klingeltönen oder Anwendungen geht, ist es sinnvoll, die genauen Fähigkeiten des anfragenden Geräts zu kennen, um gleich die richtige Version des Produkts zum Download anzubieten. Dies geht mit Lösungen wie WURFL [6]
[7] oder DeviceAtlas [8] und bietet sich eher für größere E-Commerce- und Download-Seiten als beispielsweise für ein Newsportal an. Die meisten Anbieter einfacher mobiler Angebote werden dies kaum benötigen.

Anzeige
Anzeige

Hat man eine serverseitige Technologie wie PHP zur Verfügung, kann man in der mobilen Version die gröbsten Geräte- und Browserunterschiede mit einfachen Mitteln ausbügeln, indem man am Ende der CSS-Anweisungen noch überschreibende CSS-Angaben nachliefert. Blackberry-Browser beispielsweise ignorieren in gewissen Fällen „margin“- und „padding“-Angaben, sodass man hier mit dicken border-Konstrukten die Abstände simulieren muss. Ähnlich wie auf dem Desktop ignoriert der Internet Explorer unter Windows Mobile die Angabe „min-height“ und braucht stattdessen „height“, was wiederum für alle anderen Browser die Höhe des Elements bei mehr Inhalt nicht größer werden lässt. Dies ließe sich mittels CSS-Adaption recht einfach lösen, wie das folgende Beispiel einer CSS-Anweisung im <head>-Bereich einer PHP-Seite zeigt:

CSS
 1. <style type="text/css">
 2. 
 3. #content div {
 4. margin:10px 0;
 5. border:3px solid #e20026;
 6. min-height:32px;
 7. }
 8.
 9. <?php
10. if(eregi('iemobile',$_SERVER['HTTP_USER_AGENT'])){
11. echo '#content div {height:32px;}';
12. }
13. ?>
14. 
15. </style>

Listing 2

In Zeile 9 wird ermittelt, ob der Client sich mit „iemobile“ als mobiler IE zu erkennen gibt, in der folgenden Zeile wird eine entsprechende CSS-Anweisung geschrieben. Dies ist aber auch nur im kleinen Kontext wirklich sinnvoll, am ehesten durch sukzessives Hinzufügen benötigter Bugfixes. Der Pflegbarkeit halber sollte man dann auch gleich komplette Geräte-spezifische Stylesheets aufrufen und nicht jede einzelne Stelle „hacken“. Und schon ist man wieder mitten im längst vergessen geglaubten Browser-Krieg. Dennoch gut zu wissen: Auf Basis dieses Mechanismus funktionieren grundsätzlich alle Adaptionslösungen.

Die Testumgebung

Entwickelt wird wie gewohnt am Desktop-PC. Hier kann man mit dem Firefox und einer simplen HTML-Seite, die via iFrames verschieden große Screens abbildet, die mögliche Darstellung auf verschiedenen Gerätetypen im Blick behalten [9]. Das echte „handling“ auf dem Gerät, auch das Navigieren oder die Texteingabe, sind damit aber noch nicht getestet, selbst Emulatoren helfen da nur bedingt weiter.

Anzeige
Anzeige

Da es zwischen den verschiedenen Browsern und Endgeräten eine Menge Differenzen bei der Darstellung gibt, sollte man auf möglichst vielen Geräten testen. In Deutschland relevant bei der mobilen Internetnutzung sind:

  • Nokia S60-Serie (z. B. N95, E65 …)
  • Windows Mobile
  • Blackberry
  • iPhone
  • Sony Ericsson
  • Nokia S40-Serie (z. B. 6233 …)
  • Samsung/LG

Hinzu kommen noch Unterschiede bei den Netzen – und nicht nur in Punkto Geschwindigkeit. Einige Netzbetreiber (und auch der Opera-Mini-Browser) verwenden einen Proxyserver, um die Datenmenge zu reduzieren oder das HTML zu komprimieren. So kann unter Umständen in einem Fall eine Grafik „sauber“ durchkommen, im anderen Fall dagegen fast nichts mehr vom Original übrig bleiben. Im Idealfall sollte man also auch SIM-Karten der wichtigsten Netzbetreiber zur Verfügung haben. Am Testen auf echten Geräten und in echten Netzen, auch bei verschiedenen Lichtverhältnissen, führt daher kein Weg vorbei.

Fazit

Immer mehr Geräte in Kombination mit geeigneten Datentarifen kommen derzeit auf den Markt, und immer mehr Menschen greifen mit Handhelds auf verschiedenste Webangebote zu. Dementsprechend wächst derzeit der Bedarf an attraktiven, nützlichen und auf den mobilen Nutzer zugeschnittenen Online-Angeboten. Ein interessantes Umfeld für Site-Betreiber wie Entwickler in einer Branche, in der sich Standards und Best-Practices gerade erst herausbilden.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige