Webdesign für mobile Endgeräte Options

von tonja vom 13.10.2019 - 137 Hits -

Gestern noch ein Raunen, steht Mobiles Webdesign heute auf der Agenda jeder Webdesign-Agentur. Mobiles Webdesign bedeutet, Inhalte so zu gestalten und auszuliefern, dass sie auch auf mobilen Endgeräten (Handys, PDA’s, Iphones etc.) fehlerfrei angezeigt werden können. Dass Konzerne wie BMW, Neckermann oder das Fusballmagazin Kicker längst mobile Webinhalte präsentieren, zeigt, dass dieser Trend nicht nur von Informationsdiensten, Wetterstationen, Suchmaschinen oder Auktionsportalen ernst genommen wird. Zudem will die seit Mitte 2006 genehmigte Top Level Domain .mobi mit strengen Richtlinien einen Standard für mobile Endgeräte sicher stellen. Hierbei geht es um mehr als nur eine abgespeckte, um Formatanweisungen berreinigte Version der regulären Webseite: Mobile Informationen müssen auf das Wesentliche reduziert sein. Ladezeiten müssen verringert, Layouts und Grafiken verkleinert werden. Die unterschiedlichen Displays und Bildschirmeigenschaften, Hard- und Softkeys sowie Texteingaben stellen neue Anforderungen an den Programmierer. Der Fokus auf die mobilen Kleingeräte erfordert Kenntnisse auf einem für viele Webdesigner noch unbekanntem Terrain.

Ob es überhaupt sinnvoll ist, neben der Screenvariante eine mobile Version seiner Website zur Verfügung zu stellen, hängt von den Inhalten und der Zielgruppe ab. Was für Webseiten im Allgemeinen gilt, gilt für das mobile Web im Besonderen: Beschränkung auf das Wesentliche verbunden mit der Frage, welche ausgewählten Inhalte und angebotenen Funktionen in der mobilen Version tatsächlich informativ und nutzbar sind. Ein Museum oder ein Hotel mit Gallerie, 360°-Rundgang, text- und bildlastigem Webauftritt wird sich auf Öffnungszeiten, Buch- oder Suchfunktionen beschränken müssen. Eine Anwaltskanzlei kann Rechtsgebiete und Ansprechpartner mit Kontaktdaten anbieten, BGH-Entscheidungen werden mobile Surfer auf dem Minidisplay kaum lesen wollen. Schwer vorstellbar sind außerdem Shopangebote, in denen das visuelle, eine interaktive Präsentation der Produktes im Vordergrund steht (Konfektion, Möbel etc.). Schnelle Recherche, geschürzte Darstellung von Dienstleistungen und Produkten, Preisabfragen oder Buchungssysteme, das sind Inhalte, die sich vorrangig für den mobilen Einsatz eignen.Technische Voraussetzungen

Eine strikte Trennung zwischen Inhalt und Form mittels externer CSS-Datei, in der die Formatierung und Position verschiedener Elemente festgelegt werden, ist heutzutage Standard jeder professionellen Webseite. Seit CSS 2.0 gibt es die Möglichkeit, mit Hilfe der Anweisung "media=" nach Ausgabemedien zu unterscheiden. So referiert die Angabe media=“screen“ href=“screen.css“ auf eine CSS-Datei für die normale Monitoransicht, die Angabe media=“print“ verweist auf CSS-Anweisungen für die Druckansicht. Für mobile Endgeräte gilt das Attribut media=“handheld“. Je nach Ausgabegerät und Browser wird auf diese Weise das entsprechende Ausgabeformat ein und desselben Inhalts geladen werden.

Mobiles CSS oder mobile (X)HTML Version?

Eine Miniaturisierung der Webseite über CSS (verkleinerte Schrift, kleinere Container und reduzierte Grafiken) ist mit wenig Aufwand verbunden und hat den Vorteil, dass keine zusätzliche Version der Webseite aufgebaut werden muss. Sowohl Content Management als auch Blog-Systeme bieten inzwischen eine Reihe mobiler Plugins an. Die CSS-Variante birgt jedoch zwei schwerwiegende Nachteile:
1. Auch wenn man die Anzeige bestimmter Sektionen oder Grafiken mit dem Befehl „display:none“ unterbindet, das Datenvolumen des heruntergeladenen Quellcodes bleibt bei vielen mobilen Endgeräten gleich und bremst den Datentranfer aus.
2. Immernoch viele mobile Endgeräte bringen ihren eigenen Browser mit, ignorieren CSS-Angaben ganz oder interpretieren diese nicht einheitlich.
Eine mobile (X)HTML-Version der Seite mit bereinigtem Quellcode würde hingegen schnellere Ladezeiten und ein konsistentes Erscheinungsbild liefern. Seiteninhalte müssten jedoch seperat eingepflegt und aktualisiert werden.

Geeignete Formatvorgaben für mobile Endgeräte

Trotz bequemer Zoom- und Scrollfunktionen, die bereits Opera-Mini und auch das Iphone an Bord haben: Einspaltige Layouts mit einer Breite zwischen 150px bis 230px ersparen das horizontale Scrollen und sind benutzerfreundlich. Navigation, RSS und Suchfunktion gehören ganz nach oben, wenn möglich über oder direkt unter die schmale Kopfzeile. Flash und Javascriptfunktionen haben vorerst noch keine Chance und werden nicht geladen. Wer längere Seiten hat, sollte Sprungmarken („top“, „bottom“) einsetzen oder die Seiten aufspalten. Schwarze, serifenlose Schrift auf weißem bzw. kontrastreichem Hintergrund sind zumindest für den Content empfehlenswert.

Checkliste für mobilfreundliches Webdesign

1. Denken Sie an die Größe der Displays
2. Vermeiden Sie unnötige Effekte, wie z.B. das Entfernen der Standardunterstreichung von Hyperlinks. Bei monochromen Bildschirmen kann das sehr behindernd sein.
3. Verzichten Sie auf Spielereien wie animierte Gifs, Java-Applets oder PlugIn-basierte Animationen.
4. Achten Sie auf hohen Kontrast, geringe Dateigrösse und minimale Ausdehnung Ihrer Pixelgrafiken.
5. Verzichten Sie nach Möglichkeit auf feste Breiten- und Längen-Attribute.
6. Auchten Sie darauf, dass JavaScript mobil nur selten (und dann nicht im vollen Umfang) oder gar nicht zur Verfügung steht. Bieten Sie immer Alternativen an.
7. Richten Sie Ihr Augenmerk auf geringe Dateigrößen und eine möglichst logische Seitenstruktur und Navigation.
8. Denken Sie daran, daß die meisten Pocketbrowser nur HTML-Standardsatz interpretieren können und versuchen Sie möglichst nur gebräuchliche Tags einzusetzen.
9. Testen Sie Ihre mobile Webseiten nicht nur mit Emulatoren wie mtld.mobi/emulator.php oder www.operamini.com/beta/simulator/
am PC, sondern direkt mit verschiedenen mobilen Endgeräten.

[Kommentar schreiben]

Ich möchte eine Frage im Forum stellen