PC Magazin Premium XXL 100 Windows Power-Apps (Vorschau)

70
SOFTWARE
WEBTECHNIK
Webseiten für Smartphones und Tablet-PCs optimieren
Mit kleinen mobilen Geräten sind Informationen im Internet ler verfügbar. Webdesigner stehen hier vor einer weiteren He-
schnelrausforderung:
Handhabung, Aussehen und Funktionalität sind
anzupassen oder sogar speziell zu entwickeln. Mit ein paar Tipps
zeigen wir Ihnen, worauf Sie dabei achten sollten. VON RUTH WINKLER
Tipp 1
Spezielle CSS-Datei einbinden
■ CSS-Dateien steuern das Aussehen einer Internetseite. Es ist
möglich, diese Anweisungen speziell für mobile Endgeräte anzupassen.
Geben Sie dazu in der Referenz des Stylesheet-Dokuments
media=“handheld“ an.
Das ist die einfachste Möglichkeit, die Darstellung der Webseiten
auf Handhelds, Smartphones und Tablett-PCs zu berücksichtigen.
Angaben wie Seitenbreite, Textfluss und die Größe und Darstellung
von Inhalts- und Bildcontainern passen Sie hier an die geringere
Auflösung und die Display-Größe an.
Insbesondere feste Spaltenbreiten sollten Sie hier durch Auto- oder
Prozent-Angaben ersetzen, da die Größe der Displays und deren
Auflösung stark variiert.
Schwierig wird es bei den Bilddateien, die direkt als Grafik im Content-Bereich
der Seite integriert sind. Die Darstellungsgröße können
Sie hier zwar auch über die CSS-Datei verringern, allerdings wird das
Bild trotzdem in der Originalgröße geladen. Gerade das wirkt sich
negativ auf die Ladezeiten aus, die beim Einsatz der Mobilgeräte
unterwegs und ohne Netzwerkverbindung eine große Rolle spielen.
Webseite ganz einfach
die Möglichkeit geben, über einen
Button oder Link auf die mobile Version umzuschalten
oder den Anwender direkt auf die alternative Variante
weiterleiten.
Die Abfrage, mit welchem Gerät der Benutzer auf Ihre Webseite zugreift,
funktioniert recht einfach über eine Abfrage in PHP. Mit einer
Browser-Weiche leiten Sie den Besucher direkt auf die optimierte
Version weiter:
Übersichtlich und
flexibel erscheinen
die Elemente in einer
Spalte. Die Subdomain
m.webseite.de
ist gängig, kann aber
auch beliebig anders
lauten.
Eine Seite,
verschiedene
Ansichten: Die
Darstellung auf
dem Smartphone-Display
(rechts unten)
ist klein und
wenig ansprechend.
Tipp 2
Spezielle Version der Webseite bereitstellen
■ Eine eigene in der Darstellung angepasste Version der Webseite
ist sehr aufwändig – aber effektiv. Sie können dem Besucher auf der
Sie können weitere Versionen für diverse Browser hinterlegen.
Tipp 3
Spezielle XHTML-Version verwenden
■ Die Anforderungen, die das mobile Internet verlangt, können Sie
abdecken, indem Sie die extra dafür weiterentwickelte XHTML-Variante
XHTML MP (MP steht für Mobile Profile) verwenden. In diesem
Profil können Sie wie gewohnt die Elemente von XHTM-Basic und
zusätzlich weitere Bestandteile zur Textauszeichnung verwenden.
Auch für Formulare und Eingabe- und Abfragefelder stellt dieser
Standard spezielle Elemente bereit. Kennzeichnen Sie Ihre Datei als
XHTMLMP-Dokument mit folgendem Doctype im Header der Seite:
PC Magazin 7/2012 www.pc-magazin.de