Webinhalte für Smartphones und Pocket PCs aufbereiten

Wer Internetseiten erstellt, steht seit jeher vor der großen Herausforderung, die Inhalte für möglichst viele Browser und Systeme gleich aufzubereiten. Dank zunehmend einheitlicher Konventionen und CSS-Standards – vom Internet Explorer einmal abgesehen – hat sich dieses Problem trotz größerer Browser-Vielfalt relativiert.

Seitdem Internetseiten nicht nur per PC und Notebook aufgerufen werden können, sondern auch per Mobiltelefon und PDA, stehen Webdesigner vor neuen Herausforderungen. Wollen Website-Betreiber die wachsende Zahl der mobilen Surfer mit ihren kleinen Displays nicht durch ständiges Scrollen verärgern, sind sie gut beraten, Internetseiten speziell für dieses Medium aufzubereiten.

Die einfache Lösung

Dank Cascading Stylesheets ist es möglich, für verschiedene Ausgabemedien unterschiedliche Stylesheets einzubinden, wie es für den Druck einer Website schon lange üblich ist. Auf diese Art können Sie zusätzlich auch ein Stylesheet für ein mobiles Gerät referenzieren:

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

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

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

Vorteil: Diese Methode ist recht schnell und ohne größeren Aufwand realisierbar. Die Inhalte werden nur einmal angelegt und mithilfe separater CSS-Datein unterschiedlich dargestellt.

Nachteil: Die Inhalte lassen sich nur bedingt an mobile Geräte anpassen – zum Beispiel Bilddateien. Theoretisch lassen sich Bilder zwar auch per CSS kleiner darstellen. Allerdings wird immer das Bild in Originalgröße geladen. Wünschenwert wäre, dass für Mobilgeräte Bilder direkt in geringerer Dateigröße geladen werden. Das ist mit dieser Methode nicht möglich.

Die komplexere Lösung

Die Alternative zur CSS-Lösung besteht darin, eine spezielle Version der Website für Mobiltelefone anzubieten. Die meisten Anbieter, wie Tagesschau oder stern.de, haben sich für diese Variante entschieden. Statt nur die CSS-Datei zu wechseln, wird eine komplett eigene mobile Website angeboten, die man auch mit einem normalen Browser anschauen kann.


mobile Website von stern.de (mit fester Spaltenbreite)

Über eine Browser-Weiche wird zudem der automatische Wechsel zur Mobilversion ermöglicht, sodass man automatisch immer die passende Website angezeigt bekommt. Eine Browser-Weiche lässt sich bequem per PHP realisieren. Über die Funktion »get_browser()« lassen sich nicht nur verwendeter Browser und Version feststellen, sondern auch, ob es sich um ein mobiles Gerät handelt.

Den Browser per PHP ermitteln

Die Funktion »get_browser()« liefert einen Array zurück, der alle Informationen über den Browser enthält. Folgender Code macht den ausgelieferten Inhalt davon abhängig, ob es sich um ein so genanntes »mobile device« handelt:

<?
$browser = get_browser(null, true);
if ($browser["ismobiledevice"] == true) {
echo "mobile Inhalte";
} else {
echo "normale Inhalte";
}
?>

Es hat sich mittlerweile etabliert, mobile Websites über die Subdomain „m.“ erreichbar zu machen, zum Beispiel so: m.sueddeutsche.de.


Die mobile Website der Süddeutschen Zeitung

Genaue Anpassung mit WURFL

Wer seine mobile Website noch genauer an die mobilen Geräte anpassen möchte und daher mehr Informationen über die jeweiligen Geräte braucht, kann auf WURFL zurückgreifen.

WURFL steht für Wireless Universal Resource FiLe und ist ein Open-Source-Projekt. Bei WURFL handelt es sich um frei verfügbare XML-Datei zum Herunterladen. Diese Datei enthält für über 400 Mobilgeräte Informationen zur Auflösung der Displays sowie zu den unterstützten Bildformaten.

Darüber hinaus lassen sich über die XML-Datei Informationen zum Dateiformat der Klingeltöne bis hin zur Auflösung von Hintergrundbildern für das Display abfragen. Die bereitgestellten Informationen variieren von Modell zu Modell und geben teils eine sehr genaue Funktionsübersicht der Geräte wieder.

Die XML-Datei lässt sich mit einer beliebigen Programmiersprache, beispielsweise mit PHP, auslesen. So lassen sich mobile Websites ganz konkret auf einzelne Geräte abstimmen. Vor allem, wenn man spezielle Dienste wie den Download von Klingeltönen oder Hintergrundbildern anbietet, kann WURFL helfen, dem Besucher der Website direkt das richtige Format anzubieten.

Ausschnitt aus der WURFL-XML-Datei:

<device id="htc_x7500_ver1_subua" user_agent="HTC_X7500" fall_back="htc_x7500_ver1">
<group id="product_info">
<capability name="has_qwerty_keyboard" value="true"/>
<capability name="pointing_method" value="stylus"/>
<capability name="uaprof" value="http://www.htcmms.com.tw/gen/Athena-1.0.xml"/>
<capability name="model_name" value="Athena"/>
<capability name="brand_name" value="HTC"/>
<capability name="marketing_name" value="Advantage"/>
</group>
<group id="wml_ui">
<capability name="softkey_support" value="true"/>
<capability name="table_support" value="true"/>

XHTML und CSS für das mobile Web

Für die speziellen Amforderungen an das mobile Web haben sich mittlerweile auch speziell angepasste Versionen von XHTML und CSS entwickelt. Das XHTML Mobile Profile oder kurz XHTML MP wurde entwickelt von der Open Mobile Alliance (OMP). Dabei handelt es sich um einen Zusammenschluss von Dienstleistungs- und Produktanbieter aus dem Bereich Mobilfunk.

XHTML MP besteht aus den Elementen von XHTML-Basic sowie einigen zusätzlichen Elementen zur Textauszeichung sowie zur Gliederung von Formularen, wie man es bei XHTML auch kennt. Eine Anpassung von XHTML auf XHTML MP ist in der Regel also ohne großen Aufwand möglich. Folgender Doctype leitet ein XHTML-MP-Dokument ein:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Wireless CSS

Auch für CSS hat sich eine spezielle Variante für mobile Geräte entwickelt. Wireless CSS oder kurz WCSS heißt der Standard, der eine Teilmenge des CSS2-Standards ist, aber auch einige zusätzliche Möglichkeiten mitbringt. So lassen sich Eingabefelder mittels WCSS beispielsweise so einrichten, dass sie nur bestimmte Zeichen oder Zeichenfolgen zulassen. Bei folgendem Beispiel werden nur Buchstaben als Eingabe gestattet, wobei der erste Buchstabe ein Großbuchstabe sein muss:

<input type="text" style="-wap-input-format: 'A*a'"/>

Ein weiteres Beispiel, bei dem die Eingabe einer vierstelligen Zahl (etwa eine PIN) erforderlich ist:

<input type="text" style="-wap-input-format: 'NNNN'"/>

WCSS binden Sie ganz genau wie CSS ein: Entweder direkt über Inline-Tags im HTML-Element oder über eine separare CSS- beziehungsweise WCSS-Datei.

Eine weitere zusätzliche Funktion von WCSS ist das Einbinden eines Lauftextes. Man kennt diese Funktion aus alten Zeiten des Internet Explorers. Wurde ein Lauftext beziehungsweise Marquees früher per HTML eingefügt, so geschieht das bei einer mobilen Website mittels Stylesheet. Der Einfachheit halber zeigen wir hier als Beispiel ein Inline-Tag:

<p style="display: -wap-marquee; -wap-marquee-dir: rtl; -wap-marquee-style: scroll">Dieser Text bewegt sich von rechts nach links.</p>

Wer ein Mobilgerät hat, welches WCSS unterstützt, wird bei diesem Code einen von rechts nach links laufenden Text sehen.

Was die Browser machen

Einer der verbreitetsten Browser für Mobilgeräte ist Opera. Da gibt es den Opera Mini für Mobiltelefone und PDAs und den Opera Mobile für Smartphones und Pocket PCs mit Windows Mobile, Symbian OS und Linux.

Opera Mini beziehungsweise Mobile sind auf vielen Geräten vorinstalliert. Opera nimmt somit eine Vorreiterrolle unter den Browsern für mobile Geräte ein. Opera war es auch, der das sogenannte Small Screen Rendering eingeführt hat. Durch diese Methode werden Internetseiten für Mobilgeräte optimiert dargestellt. Fotos werden verkleinert und alles wird in einer Spalte dargestellt. So lassen sich auch „normale“ Websites auf den kleinen Displays darstellen.

Was bei der Darstellung nicht optimierter Seiten von Vorteil ist, wird bei Seiten, die speziell für mobile Geräte optimiert wurden, zum Nachteil. Denn das Small Screen Rendering ignoriert die Einstellungen, die das Stylesheet der Website vorgibt, und wählt immer das eigene Rendering. Selbst wenn bei der Stylesheet-Einbindung speziell das Medium „handheld“ verwendet wird, ignoriert Opera diese Angaben.

Erst durch eine spezielle Meta-Angabe, die dem Browser mitteilt, dass es sich bei der Website um eine für Mobilgeräte optimierte Version handelt, verzichtet Opera auf den Einsatz des Small Screen Renderings:

<meta name="viewport" description="width=device-width, height=device-height" />

Die Meta-Angabe „viewport“ wurde ursprünglich von Apple für dessen iPhone eingeführt. Damit lassen sich Angaben über den Viewpoint einer Seite festlegen. Über die Meta-Angabe lassen sich auch weitere Vorgaben machen, die in der Regel jedoch nur vom iPhone interpretiert werden. So lässt sich einstellen, ob der Benutzer die Website skalieren kann oder nicht:

<meta name="viewport" description="user-scalable=no" />

Mobiles Flash

Was für Browser gilt, gilt auch für Flash. Auch hier gibt es eine spezielle Version für Mobilgeräte, genannt Flash Lite. Es handelt sich bei Flash Lite um eine abgespeckte Version des Flash-Players, der eine wesentlich geringere Prozessorlast verursacht, dabei aber auch weniger Darstellungsmöglichkeiten besitzt. Filter, mit denen sich im normalen Flash Player zum Beispiel Unschärfe- und Glüheffekte darstellen lassen, werden von Flash Lite nicht unterstützt.

Grundsätzlich entspricht die aktuelle Flash-Lite-Version 3.1 aber der Flash-Player-Version 9. Flash-Lite-Inhalte lassen sich mit der normalen Flash-Software generieren. Zu beachten ist, dass einige mobile Geräte wie das iPhone und das neue iPad von Apple  ohne Flash Lite ausgeliefert werden. Dessen muss man sich bewusst sein, wenn man Flash-Inhalte für das mobile Web einsetzt.

Tipp: Ob ein Gerät Flash Lite unterstützt, lässt sich im Übrigen auch über WURFL feststellen.

Was noch zu beachten ist

Es gibt eine ganze Reihe von technischen Aspekten, die bei der Umsetzung einer mobilen Website zu beachten sind.

Gestaltung

Was die Gestaltung betrifft, sollte man beachten, dass aufgrund der kleinen Displays von mobilen Geräten eine Mehrspaltigkeit von Inhalten tabu ist. Auch auf eine feste Spaltenbreite sollte man verzichten, da die verschiedenen Smartphones und Pocket PCs sehr unterschiedliche Auflösungen haben und man bei einer festen Breite immer nur bei einer kleinen Anzahl von Geräten eine optimale Darstellung erwirkt.

Navigation

Die Navigation sollte am Seitenanfang stehen und aus wenigen Einträgen bestehen. Denn der Platz auf den kleinen Display ist kostbar. Insgesamt ist eine übersichtliche und reduzierte Darstellung von Navigation und Inhalt angebracht, damit der Besucher der Seite nicht den Überblick verliert.

Ladezeiten

Einige Netzanbieter verwenden Proxyserver, die Bilder und Grafiken stark komprimieren, um einem hohen Datenaufkommen beim Herunterladen von Webseiten entgegenzuwirken. So kann es passieren, dass Fotos mit einer schlechteren Qualität dargestellt werden. Auch Opera Mini bietet einen speziellen Proxyserver an, über den man Inhalte komprimiert empfangen und damit Datenaufkomen reduzieren kann.

Tipp für iPhone-Fans

Noch was für iPhone-Freunde: Mit dem iPhone lassen sich Links zu Websites auch auf dem Homescreen ablegen. Mit folgender Zeile – eingebunden ins HTML-Dokument – wird dann auch das passende Icon zu dem Link angezeigt:

<link rel="apple-touch-icon" href="/icon.png"/>

Das Icon sollte in der Größe 60 × 60 Pixel und als PNG abgepeichert werden.

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
blackfox
Gast
6 Jahre 5 Monate her

Mobile Endgeräte sind aus unserer Zeit einfach nicht wegzudenken. Umso wichtiger wird es, sich mit der passenden Seitendarstellung auf solchen Geräten zu beschäftigen. Ich finde die Tipps in diesem Artikel sehr hilfreich und habe sie direkt gepinnt.

phan
Gast
6 Jahre 5 Monate her

Auf Flash würde ich generell bei mobilen Sites verzichten. Es gibt beim W3C einen „Mobile OK Checker“ der einem wichtige Hinweise gibt.

Klawischnigg
Gast
Klawischnigg
6 Jahre 5 Monate her

Sehr hilfreich, Danke…!

René Löffler
Gast
6 Jahre 5 Monate her

Da ist leider noch ein kleiner Tippfehler unter „Die einfache Lösung“ enthalten..

„handeld“ sollte wohl eher „handheld“ heißen ;-)

..ansonsten interessanter Artikel! :)

Mali
Gast
Mali
6 Jahre 5 Monate her

Vielen Dank für die Übersicht. ^^

Kleine Frage hätte ich aber dennoch: Gibt es auch Browserhacks für Mobile Browser?

Maik
Gast
Maik
6 Jahre 5 Monate her

Ich habe kürzlich gehört, dass es Anbieter gibt, die auf Basis von XML (also der Content der eigenen Seite) Ausgaben für div. Endgeräte generieren. Ist sicher auch eine Alternative.

Christiane Rosenberger
Gast
6 Jahre 5 Monate her

@René
vielen Dank :-), Fehler ist korrigiert.

Matteo Alt
Gast
6 Jahre 5 Monate her

großartiges tool…es wurde auch zeit für sowas!

Helli
Gast
6 Jahre 5 Monate her

Zur „einfachen Lösung“: Bilder kann man sehr wohl auch auflösungs- bzw. größenbezogen über die CSS steuern, indem man sie als Backgroundgrafik eines Elements (z. B. div ) direkt in der CSS definiert und im HTML entsprechend das Element plaziert und nicht das Bild als img einbindet.

Manuela Müller
Mitglied
6 Jahre 5 Monate her

@Helli

Das ist allerdings nur bei kleinen, statischen Websites praktikabel. Bei einem Internetauftritt mit Content Management System, in dem Inhalte und HTML-Template voneinander getrennt sind, ist das nicht möglich.

Peter Hellinger
Gast
6 Jahre 5 Monate her

@Manuela Müller Das geht auch mit CMS, praktiziere ich zum Beispiel mit Joomla und sollte auch mit Drupal oder WordPress funktionieren. Grafiken in Beiträgen behandle ich allerdings nicht so, da ist der Aufwand zum Nutzen zu groß, aber alle Gestaltungselemente sind grundsätzlich so eingebunden.

Peter
Gast
Peter
6 Jahre 5 Monate her

Für Login-Seiten suche nach einer Möglichkeit die Geräte-ID auszulesen. Wäre super wenn es in dem Artikel darauf Hinweise gäbe.

Mudder
Gast
6 Jahre 5 Monate her

Tolle Beschreibung, Danke.

Man sollte aber noch anmerken, dass es für die User stets die Option geben sollte: „Normale Webseite aufrufen“. Beim Surfen mit dem Milestone ist es nun schon mehrmals vorgekommen, dass ich partou nur die Mobile-Variante einer News-Seite zu lesen bekam was ich aber gar nicht wollte.

Manuela Müller
Mitglied
6 Jahre 5 Monate her

@Peter Hellinger – ja ok, bei einzelnen Gestaltungselementen kann man auch bei CMS-Systemen Grafiken ins HTML-Template einbinden.
Bei den Grafiken der Inhaltselemente ist das je nach CMS nicht oder nur mit großem Aufwand möglich. Zudem widerspricht das der grundlegenden Idee eines Content-Management-Systems, in dem Inhalte, Struktur (HTML-Template) und Format (CSS-Template) ja getrennt sein sollen.

trackback

[…] Webinhalte für Smartphones und Pocket PCs aufbereiten | Browser, CSS, iPhone, Opera, PHP, WAP, Webd… Wer Internetseiten erstellt, steht seit jeher vor der großen Herausforderung, die Inhalte für möglichst viele Browser und Systeme gleich aufzubereiten. Dank zunehmend einheitlicher Konventionen und CSS-Standards – vom Internet Explorer einmal abgesehen – hat sich dieses Problem trotz größerer Browser-Vielfalt relativiert. […]

Andreas Mükker
Gast
6 Jahre 5 Monate her

Hallo, habe mal den PHP-Code getestet, bei mir erscheint Warning: get_browser(): browscap ini directive not set. in /mobile.php on line 2, dann aber NORMALE Inhalte. Woran liegt das ?

Helge Krausen
Gast
6 Jahre 4 Monate her

Heißt das nicht …meta name=“viewport“ content=“… anstatt …description=“… ?
Aber ein guter Artikel.

trackback
6 Jahre 4 Monate her

[…] und hoffe mit diesem Linktipp anderen dabei zu helfen das Mobile Internet angenehmer zu gestalten: Webinhalte f

trackback

[…] Webinhalte für Smartphones und Pocket PCs aufbereiten | Dr. Web Magazin – Ziemlich gute Anleitung, wie man Websites handytauglich machen kann […]

Karsten Klaas
Gast
5 Jahre 10 Monate her
In diesem Beitrag geht es um die technische Seite des Aufbereitens von Inhalten für Smartphones und Pocket PCs. Die interessanten Fragen hinter der puren Technik sehe ich in folgenden Gebieten: 1. Wird sich das mobile Internet in dieser Form durchsetzen? Auf Expertenkonferenzen wird „Mobile“ ja schon seit mehreren Jahren „durchs Dorf getrieben“. Schätzungsweise dürfte aber der Iphone-Trend als Beschleunigungsmotor für den Mobile-Trend wirken. Ob 2011 das Jahr im Zeichen des Mobile-Trends sein wird? 2. Sollte sich das Mobile Internet durchsetzen, wer passt sich dann wem an? Passen sich die Webseiten an die kleineren Handydisplays an, passen sich die Handys an… Read more »
trackback

[…] WordPress für Datennomaden WordPress und das iPhone – Optimierung und Nutzung Webinhalte für Smartphones und Pocket PCs aufbereiten […]

Tamer Ücer
Gast
Tamer Ücer
4 Jahre 2 Monate her

Ich lese diesen Beitrag leider jetzt erst.
Daher würde es mich Interressieren ob die oben genanten eigenschaften noch voll funktionstüchtig sind oder ob es schon neuerungen oder änderungen im Programmieren von Mobilen Inhalten gibt, sogar neue Versionen der genanten Sprachen?

Alex
Gast
Alex
2 Jahre 3 Monate her

Für Smartphones und Mobiltelefone optimierte Webseiten sind sehr wichtig. Der Markt und die Kundschaft sind viel häufiger im mobilen Internet. Egal ob man den responsiv Ansatz wählt oder eine separate Seite erstellt, heute braucht jede Firma / KMU eine mobile Webseite. Es gibt auch schon genügend Dienste wie wew.mobilonso.com, pocy, mplanet etc. die einem den Grossteil der Arbeit abnimmt. Online Shops als mobile Webseiten werden bestimmt sehr bald kommen.

trackback

[…] Webinhalte für Smartphones und Pocket PCs aufbereiten (Dr. Web Magazin) […]

Madeleine Schwerin
Gast
1 Jahr 2 Monate her

Bei den Auswertungen meiner Besucher meiner Homepage zeigt sich immer mehr, dass die Zugriffe immer häufiger über Mobilgeräte erfolgen. Und der Trend wird sich sicher weiter dahin entwickeln, dass die mobile Nutzung des Internets steigt.
Auch Google bewertet neuerdings jede Webseite danach, ob die Darstellung auch für Mobilgeräte geeignet ist.
Deshalb ist der obige Artikel sehr hilfreich und auch für „Nichtspezialisten“ verständlich.

trackback

[…] […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen