Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Internetauftritte für mobile Endgeräte

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Internetauftritte für mobile Endgeräte

Jedes neue Handy oder PDA ist heutzutage in der Lage online zu gehen. Doch die wenigsten Webdesigner haben sich bisher Gedanken darüber gemacht, wie sie eine Website für mobile Endgeräte optimieren. Manuel Bieh zeigt Ihnen verschiedene Möglichkeiten dazu und erläutert die Vor- und Nachteile.

Viele werden sich bisher nicht mit dem Thema befasst haben, viele werden das vielleicht auch in näherer Zukunft erst einmal nicht tun, doch spätestens seit es UMTS und die ersten einigermaßen vernünftigen Browser für Mobiltelefone und PDAs gibt ist das Thema aktueller denn je: die Optimierung von Internetauftritten für mobile Endgeräte.

Fast jeder kennt das, man ist bei Bekannten, hat ein oder zwei Gläschen Wein (wahlweise auch Bier) getrunken, und möchte nun bald heimfahren. Doch natürlich hat man keine Ahnung wann der ÖPNV Richtung Heimat geht. Der Bekannte hat aber leider gerade nicht die Möglichkeit ins Internet zu schauen. Es wäre also jetzt ein leichtes, mit dem Handy samt eingebauten Browser die elektronische Fahrplanauskunft anzusurfen, und sich bequem den nächsten Bus zu suchen.

Leider spielen auch in Zeiten des WAP 2.0 die wenigsten Internetseiten da mit. Zwar erlauben es moderne Mobilgerätebrowser wie der Opera Mini oder der Minimo mittlerweile auch rein für das Web optimierte Seiten auf Handys etc. anzuzeigen, dennoch sind diese oft aufgrund großer Datenmengen oder vorausgesetztem JavaScript nur mit Einschränkungen benutzbar.

Dabei muss in einen Webauftritt, der für mobile Geräte angepasst werden soll, nicht einmal viel Aufwand gesteckt werden. Der angesehene amerikanische Entwickler Cameron Moll spricht dabei von 4 Methoden:

  1. Nichts tun
  2. Styling von Elementen entfernen und ungestaltetes HTML ausgeben
  3. Angepasste media="handheld"-Stylesheets verwenden
  4. Inhalte, Code und Bilder speziell für Benutzer mobiler Geräte anpassen

All diese Methoden haben Vor- und Nachteile, auf die hier kurz eingegangen werden soll.

Nichts tun und hoffen

Natürlich macht es am wenigsten Aufwand, nämlich ziemlich genau gar keinen, wenn man eine Seite nicht für mobile Browser optimiert, und darauf hofft, dass ein Benutzer von Handys oder PDAs alle relevanten Informationen auch ohne eine spezielle Anpassung findet. Wenn alles gut verläuft, so findet der User sogar genau die Informationen, welche er beim surfen mit dem Webbrowser vorfindet. Die Seite wird somit sozusagen „unverfälscht“ auf dem Handy wiedergegeben. Allerdings wird bei dieser Methode auch am wenigsten auf die Bedürfnisse von eben solchen Benutzern eingegangen. Es werden unter Umständen eine Menge an unnötiger Daten, große Bilder, Stylesheets, aufgeblähter Code und so weiter übertragen. Das verursacht dem Benutzer auch in der heutigen Zeit noch recht hohe Übertragungskosten. Ein wenig freundlicher ist da schon die nächste Methode.

„Rohes“ HTML ausgeben

Bei dieser Methode, bei der die Website im Optimalfall zwischen Inhalt (HTML) und Styling (CSS) trennt, wird auf sämtliche Stylesheets verzichtet, der Handheld-Browser somit dazu gebracht browsereigene Stildefinitionen beim Rendern der Seite zu benutzen. Dies spart zumindest ein wenig Code ein, da keine extra Stylesheets, und somit auch keine möglicherweise definierten, speicherintensiven Hintergrundbilder geladen werden müssen. Doch auch hier besteht die Seite eigentlich aus gewöhnlichem HTML Output, welcher in der Regel für die Ausgabe am Bildschirm erstellt wird.

Handheld-Stylesheets einbinden

Eine bessere Variante ist, ein Stylesheet für Mobilgeräte zu optimieren, und dieses für nur eben solche Geräte, mittels media="handheld"-Attribut mit in die Seite einzubinden. Das bietet uns den Vorteil unnötige Elemente ausblenden zu können oder speicherintensive Bilder gar nicht erst laden zu lassen. Der User muss sich somit auch keine zusätzliche Adresse merken (beispielsweise eine Subdomain wie mobile.google.com oder google.com/mobile) und das Prinzip der Geräteunabhängigkeit von Dokumenten bleibt somit außerdem gewahrt. Dennoch muss man bei dieser Methode beachten, dass das media="handheld"-Attribut teilweise immer noch unzureichend unterstützt wird, und selbst dann auch nur einige wenige CSS-Eigenschaften letztendlich vom Browser korrekt interpretiert werden. Der Entwicklungs- und Wartungsaufwand hält sich aber auch bei dieser Methode noch in Grenzen.

Eigenen Content, Code und Bilder für mobile Geräte

Die vierte und somit auch letzte Methode ist wohl die, mit meisten Vor- aber auch Nachteilen. Nämlich die Bereitstellung von eigenen Inhalten speziell für Handhelds. Hierbei wird der Code von allen, für die mobile Darstellung irrelevanten Seitenelementen bereinigt. Beispielsweise werden wohl kaum „Seite drucken“ Links, Bilder in hoher Auflösung und dergleichen auf kleinen Handydisplays benötigt. Der Aufwand ist bei dieser Methode wohl am höchsten, da der Entwickler hierbei für gewöhnlich 2 verschiedene Seiten entwickeln muss. Dies widerspricht außerdem dem Prinzip der geräteunabhängigen Erstellung von Dokumenten für das Web. Weiter muss eine solche Seitenversion meist unter einer separaten Adresse aufgerufen werden, was nicht immer für Jedermann logisch und ersichtlich ist. Ein Aufwand der eines Tages umsonst gewesen sein könnte, wenn Mobile Endgeräte später einmal so leistungsfähig wie Desktop PCs sind. Doch bis dahin sollte wohl noch einiges an Zeit vergehen.

Eine kurze Anleitung wie man einen ersten Schritt in die letzte genannte Methode gehen kann, beschreibt Mike Davidson in seinem Artikel „Make your Site Mobile-Friendly in Two Minutes“ (englisch). Dort wird darauf eingegangen wie man mittels eigener Subdomain, binnen 2 Minuten, eine Seite von unnötigen Elementen bereinigen, und den Code durch entfernen von Leerzeilen verkleinern kann.

Das Ergebnis rechtfertigt den Aufwand

Lohnt sich ein solcher Aufwand für eine verschwindend kleine Minderheit an Benutzern, die unterwegs ins Internet gehen möchten? Das bisher nur wenige Benutzer vom Handy gebrauch machen um ins Internet zu gehen, dürfte momentan jedoch primär daran liegen, dass sich viele Entwickler die gleiche Frage stellen.

  • Der Benutzer hat stets die volle Kontrolle darüber wo er die Inhalte einer Website lesen möchte. Im Bus auf dem Weg zur Arbeit, zuhause auf dem Sofa oder heimlich im stinklangweiligen Seminar.
  • Anbieter von Klingeltönen haben es erfolgreich vorgemacht, schon 12-jährige geben jeden Monat viel Geld für Klingeltöne und Handyvideos aus. Das Handy ist längst als neues Medium neben Internet, TV, Radio und Print anerkannt. Wieso sollte man einem Markt, für vergleichsweise so geringen Aufwand so wenig Beachtung schenken? Nach der Kamera wird auch das Internet in Handys von immer mehr Leuten benutzt. Wieso nicht einfach einmal einer der ersten sein, der diesen Markt für sich erschließt?
  • GPS macht es heute bereits möglich durch fremde Orte und Städte zu navigieren. In Zukunft wird noch viel mehr mit dem Handy in Verbindung mit dem Internet möglich sein. Beispielsweise eine GPS-gesteuerte Suche nach dem nächsten Restaurant in der Umgebung. Ein Handy ist standortunabhängig und kann auch heute schon als Navigationsgerät benutzt werden, entsprechende Software vorausgesetzt.
  • Durch so genannten Semacode ist es möglich, beispielsweise Informationen mit Wikipedia Artikeln zu verknüpfen. Semapedia ist nur ein praktisches Beispiel wie man die Außenwelt über das Handy mit dem Internet in Verbindung bringen kann. Durch Semapedia ist es z. B. möglich, Sehenswürdigkeiten oder interessante Bauwerke mit einem Aufkleber zu bekleben welcher so genannten Semacode enthält (zu finden übrigens auch auf jeder Handyrechnung zur leichteren Auffindung von Kundendaten). Fotografiert man nun mit seiner Handykamera diesen Sticker ist es (ähnlich wie beim EAN-Barcode) möglich, durch diesen auf den entsprechenden Wikipedia-Artikel oder andere Zusatzinformationen geleitet zu werden.
  • Neben dem Internet hat in letzter Zeit vor allem das Handy unsere Welt verändert wie kaum etwas anderes. Mittlerweile ist es möglich nicht mehr nur beides separat zu benutzen, die Übergänge sind mittlerweile fließend. Über Dienste wie Skype oder Jajah ist es möglich über das Internet mit dem Handy zu telefonieren. Mit jedem modernen Handy kommt man problemlos ins Internet. Eine Technologie die sich in den nächsten Jahren mit hoher Wahrscheinlichkeit noch viel weiter entwickeln wird.

Fazit

Auch wenn viele Stimmen, aus teilweise berechtigten Gründen, gegen die .mobi Top-Level-Domain sind: Die bereits abgeschlossene Einführung einer Domain speziell für Mobile Geräte ist ein weiterer Punkt in einer Liste, welche verdeutlichen soll, welchen Stellenwert die Anpassung von Internetseiten für portable Geräte in Zukunft haben wird. Das Internet wird viele neue Möglichkeiten bieten welche mit dem Handy genutzt werden können. Jemand der im Internet Erfolg haben möchte, sollte nicht davor zurückschrecken zumindest einmal einen Blick auf das „mobile Web“ zu wagen.

Weiterführende Links

Kommentare

tim
am 11.01.2007 - 15:49

Habe mich auch ne ganze Weile rumgeschlagen, ob und wie ich mobil machen soll. Zumindest für meinen Blog habe ich ein Plugin gefunden, dass PDAs, Handys usw automatisch umleitet. Zumindest ist das mal ein Anfang.

Permanenter Link

GE
am 12.01.2007 - 15:09

Hallo, ein Thema, das vielleicht schneller wichtig wird, als wir alle denken.

Für mich ist ausschliesslich Methode 4 akzeptabel, weil nur diese Variante auch eigene Inhalte berücksichtigt.

Es geht nämlich nicht nur um Style und Datenvolumen, sondern auch und besonders um die Reduzierung der Inhalte.

Überlegt doch mal, wie ich auf dem Handy-Display scrollen muss, nur um die Inhalte einer einzigen Seite zu erfassen, die einen 19 Zoller ausfüllt. Auch wenn alles untereinander angezeigt wird.

Seiten fürs Handy sind ganz einfach ein ganz anderes Ding. Und damit sich niemand eine gesonderte Domain merken muss, wird vielleicht die index.html als Doorway-Page wieder aktuell, handytauglich (klein und wenig Datenvolumen) und mit 2 Links ausgestattet, zur Handy-Version und zur PC-Version.

Methode 1 ist natürlich auch nicht schlecht ... :-)

Permanenter Link

alexander farkas
am 14.01.2007 - 13:54

@ge

die opera.com seite tut dies beispielsweise mit methode 3. alle inhalte sind im html verfügbar, nicht benötigte inhalte für handys werden dann mit display:none ausgeblendet bzw. vom "handy--browser-aufbereitungsserver" entfernt.

ein interessantes konzept verfolgt übrigens auch iphone, da steckt kein halber handy-browser und auch kein browser mit ssr hinter, sondern der ganz normale safari.
http://www.apple.com/iphone/internet/

interessant wäre zu wissen, ob der iphone-safari ein css mit handheld, dem des screen vorzieht.

letztendlich kann das thema deutlich und auch schnell an bedeutung gewinnen. derzeit ist es aber schwierig ne best practice anleitung zu geben, weil sich da einiges an bewegung ist.

Permanenter Link

GE
am 15.01.2007 - 09:35

Hallo Alexander, ganz sicher wird es auch bei diesem Thema viele verschiedene Herangehensweisen geben.

Ich wollte eigentlich auch nur darauf hinweisen, dass es nicht reichen wird, sich um die Darstellbarkeit von für den PC-Bildschirm optimierten Seiten auf Handy-Displays Gedanken zu machen.

Wenn ich will, dass sich jemand meine Seiten auf einem Handy-Display ansieht, muss ich mir zu allererst Gedanken um kompaktere, stark reduzierte Inhalte machen. Vor dem 19 Zoller kann ich stundenlang sitzen und habe einen tollen Überblick über den Inhalt der Seite (wenn sie ordentlich gemacht ist).

Auf dem Handy-Display brauche ich schon eine Menge Ausdauer, um mich durch die gleiche Seite durchzuscrollen, und nach ein paar Minuten tun mir die Augen weh. Ich werde diese Seite einfach "nicht durchhalten".

Methode 3 geht davon aus, dass ich an den Inhalten nichts ändere. Die Methode 3 kann eine Seite auf dem Handy zwar darstellbar machen, aber nicht unbedingt "geniessbar".

Ich glaube auch nicht, dass etwas gutes dabei herauskommt, wenn man einen Teil der Inhalte einfach mit technischen Mitteln ausblendet. Dabei entsteht eine Zusammenstellung von Fragmenten einer Seite.

Es ist eben nicht alles nur eine Frage der Technik. Ich bin überzeugt, dass am Ende nur Methode 4 zu einem akzeptablen Ergebnis führen wird. Und ich weiss, dass ich damit auch falsch liegen kann ... ;-)

Permanenter Link

alex
am 15.01.2007 - 16:20

@ge

wollte dir im prinzip auch nicht widersprechen, sondern nur sagen, dass anderer inhalt auch mit methode 3 machbar ist. (bzw. der iphone mit den handy-browsern einen neuen weg einschlägt)

und in der tat auf opera.com ist das design nicht nur geändert und der inhalt etwas gekürzt. nein, es ist vollkommen anderer inhalt.(geh mal mit opera rauf und stell unter ansicht -> "klein-bildschirm" ein) es geht also doch mit mehtode 3. (ob das sinnvoll ist, steht auf nem anderen blatt)

im ergebnis dürfte ein eigener inhalt für handy-browser - allein aus kostengründen - nur für bestimmte wenige anbieter interessant sein (ebay, öpnv-, karten-, telefon-dienst etc.).

deshalb geh ich mal davon aus, dass in zukunft (mittelfristig) methode 3 (die billige variante) und methode 4 nebeneinander existieren werden. zur zeit halte ich methode 1 für die meisten seiten am sinnvollsten.

bis denne
alex

Permanenter Link

GE
am 15.01.2007 - 16:52

Hallo Alex, zumindest, was Methode 1 betrifft, sind wir uns zu 100% einig ;))

Permanenter Link

Max
am 31.01.2007 - 11:31

Es gibt nicht bereits sehr sehr viele, aber doch schon einige fertige Seiten, die sich auf mobile User(Endgeräte) spezalisiert haben, einige werden hier
Schmalbandportale-Handy-und-Co
mit aufgelistet.

Diese haben einen weiteren Vorteil, auch mit einem normalen Browser auf dem PC stellt sich für Modem-User oft ein gutes Gefühl beim Surfen ein. Denn die meisten dieser Seiten bauen sich ja extrem schnell auf, auch über Modem ;-)

Permanenter Link

Timo Büchsenmann
am 03.02.2007 - 17:07

Also mit den mobi Seiten muß man vorsichtig sein.Habe selber einen Bekannten der eine Seite online hatte die nicht von Hand angezeigt weren kann und wurde von mobi gelöscht.

Die greifen hier sehr hart durch und nehmen die Domains weg

Permanenter Link
Manuel Bieh

Manuel Bieh (Autor)
am 13.02.2007 - 16:23

find ich gut! sehr konsequent. sollte man bei manch anderen TLDs auch machen.

Permanenter Link

Vitaliy Köln
am 19.02.2007 - 20:22

Die 1. Methode ist sehr gut, aber sonst, wenn man richtig css einsetzt, soll's nicht so viele Probleme bereiten wie früher. Webstandards haben doch etwas dazu beigetragen, nun ist die Situation schon ziemlich besser als früher.

Permanenter Link

Unerwünschte We...
am 22.07.2007 - 19:27

[Thomas Erichsen, Egerstr. 21, 71679 Asperg, Telefon: 07141-660444 ist ein Spammer. Die Redaktion]

Permanenter Link

Norbert
am 09.10.2007 - 23:04

Die Variante mit der Subdomain finde ich sehr galant. Allerdings habe ich Bedenken ob dies nicht zum duplicate Content führt (der gleiche content auf der subdomain wie auf der domain selbst). Ausprobieren sollte man es aber allemal.

Permanenter Link

Wilfried J. Klein
am 07.05.2008 - 23:08

Hallo zusammen,

das Publizieren im mobilen Internet wird durch die Verwendung von entsprechenden Plugins wie z.B. für wordpress schon stark vereinfacht. Zusätzlich können benutzerdefinierte Felder für kleinere Fotos verwendet werden.

Der Spielraum für Kreative ist trotz allem nicht eingeengt. Wir sollten ruhig unsere Gehversuche im mobilen Internet machen - es schadet nichts. Mir macht es sehr viel Spass - habe einigen meiner Domains den Plugin spendiert und meine Reichweite erhöht.

Gruss aus Mittelhessen
Wilfried

Permanenter Link

Die Kommentare sind geschlossen.