Webdesign, Tutorials und mehr - Webmasterpro.de

Mobile Device Webdesign am Beispiel iPhone

Das Internet ist mobil. Notebooks surfen drahtlos im Web und dort ist das Internet, wie wir es vom Desktop kennen gang und gebe. Der Fokus liegt nun auf den so genannten Mobile Devices, Smartphones, Handhelds, PDAs und Co. Mobiles Internet wird schneller (GSM -> UMTS/HSDPA) und die Geräte leistungsstärker. Der Knackpunkt: Das "echtes Internet": Browser stellen auf kleinen Geräten das selbe dar, was der Browser auf dem Desktop darstellt.

Um dies zu ermöglichen, bedarf es schnellen Verbindungen, Interface-Intuitivität und darauf ausgelegten Funktionen wie weiches Zoomen. Doch vor allem ist der Webmaster dafür verantwortlich...

Grundlagen beachten

Mobile Geräte trainieren den Webdesignern und Webentwicklern professionelles und überdachtes Arbeiten an. Dort wird Semantik und Validität so richtig praxisnah und offensichtlich sinnvoll. Zusammengefasst:

• Struktur und Layout trennen
• HTML semantisch und valide strukturieren
• sinnvolle Grafikgrößen verwenden
• keine großen Hintergrundgrafiken verwenden
• komplizierte Famesets vermeiden, besser: ganz vermeiden

Umstände beachten

Mobil sein, heißt auch oft an das heimische schnelle WLAN verzichten zu müssen. Mobil ist nicht immer WLAN verfügbar sondern lediglich UMTS/HSDPA. Blasen Sie Code und Mediendateien nicht unnötig auf, optimieren Sie Grafikgrößen, kürzen Sie unnötiges JavaScript usw.

Im Folgenden werden die Umstände genauer betrachtet die man mit Mobile Devices hat - hier vorgestellt am iPhone.

Maus != Finger

Eingabegerät: Finger als Maus-Emulation.

• Finger-Druckpunkt größer als der Mauscursor
• Bereitstellen aller Interaktionen: Bewegungen/Verschiebungen/Scrollen, Zoom, Tooltips, Events, ...
• Events beschränkt (mousemove, mousedown, mouseup/click,...)
• click nicht nur für Links sondern auch Form-Elemente etc.
• kein cut/copy/paste, kein drag/drop und kein markieren

Tooltip bei "Berührthalten" des Links

"Echtes Internet"

Auf neuen Smartphones zieht das "echte Internet" - wie es in Werbespots oft genannt wird - inzwischen merklich ein. So wie eine Seite auf dem Desktop gerendert wird, so wird Sie auch auf dem mobilen Gerät gerendert. So auch auf dem iPhone. Es ist nicht explizit nötig, Websites auf die Darstellung auf Smartphone anzupassen, sondern nur um die Usability zu steigern.

• kein Transcoding, kein WML
• Unterstützung von XHTML Mobile
• .mobi oftmals nicht nötig
• @media handheld nicht unterstützt, da unnötig

Viewport

Der Viewport ist das, was man im Augenblick von der Website sieht. Auf dem Desktop bezieht sich der Viewport auf folgende Dinge:

• Layout-Prinzip
• Textumbruch/Textfluss
• Zeigt/versteckt Scrollbalken
• Fenstergröße (vom Benutzer veränderbar)

Wie siehts auf dem iPhone aus?

• Layout-Prinzip
• Textumbruch/Textfluss
• aber: Scrollbalken dynamisch
• und: Fenstergröße fix

Der Viewport auf dem iPhone und iPod touch

Viewport steuern: Meta-Tag

Die Meta-Angabe für den Viewport ist nötig, wenn der Webdesigner im Voraus nicht über den Viewport nachgedacht hat und die Website nur im Desktop-Browser getestet hat. Dann kann es dazu kommen, dass die Website zu schmal dargestellt wird und unnötig weiße Bereiche entstehen. Mit der Anpassung des Viewports für Mobile Devices ist dies verhinderbar.

Auf dem iPhone ist die Standardbreite für den Viewport 980px. Die Anpassung kann minimal 320px betragen, da dies 0% Zoom darstellt. Tabellarisch:

1

<meta name="viewport" content="width=320">

1

<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

Framesets

Framesets sind nicht einzeln scrollbar. Deshalb gelten hier einige Besonderheiten.

• Scrollbare Frames werden ausgeweitet um ihren Inhalt voll anzuzeigen
• Scrollbare Iframes über die volle Breite werden ebenfalls auf ihren Inhalt ausgeweitet
• Alle anderen Iframes bleiben mit einer 2-Finger-Geste scrollbar

Doppeltip-Zoomen

Zoomen lässt sich per 2-Finger-Aufziehgeste oder per Doppeltip. Für Doppeltip gelten einige Besonderheiten die die Usability erhöhen:

Doppeltip-Zoom im Einsatz

• Finden des getippten Elements (Block, Grafik, ...) und zentriert es
  • Block: Zoom bis zur Einpassung der Breite des Blocks in den Viewport
  • Grafik: Zoom bis die Grafik voll in den Viewport passt
• Weiterer Doppeltip: herauszoomen

Der Webdesigner sollte nicht oder zumindest nicht großartig Struktur verändern. Ist die Seite semantisch korrekt und valide steht dem gelungenen Einsatz des Doppeltips nichts im Weg.

• Einfache Block-Struktur
• Sinnvolle Aufteilung
• Spalten-Layouts
• Breite Textblöcke vermeiden: Fließt der Text bis oder fast bis zum Rand, kann der Doppeltip-Zoom nicht oder nur marginal durchgeführt werden. Man müsste dann auf den manuellen 2-Finger-Zoom zurückgreifen und dann lässt sich ein Textblock nicht voll anzeigen (horizontales scrollen) oder nur, wenn man den Landscape-Mode aktiviert.

Schriftgröße

Da oft die Schriftgröße auf einen großen Monitor optimiert wurde oder einfach nie auf mobilen Geräten getestet wurde, kann es sich ergeben, dass selbst nach dem Doppetip-Zoom die Schriftgröße kaum ausreicht. Sie kann aber für Handhelds angepasst werden. Dies geschieht bereits automatisch, doch die folgende Grafik zeigt, dass die automatische Anpassung nicht überall optimal funktioniert.

Die horizontale Navigation ist auf der Wikipedia zu klein - der Text wird abgeschnitten

Die CSS-2-Eigenschaft text-size-adjust, die in CSS 2.1 verworfen und in CSS3 nun wieder aufgegriffen wird, gibt es bereits als -webkit-text-size-adjust für Safari.

1

<div style="-webkit-text-size-adjust:200%;">

Forms

Forms besitzen die selben Objekte wie auf dem Desktop. Zum Beispiel Checkboxes, Buttons oder Dropdown-Menüs. Sie haben jedoch 2 Besonderheiten: Sie sind klickbar (um heranzuzoomen und die Tastatur einzublenden) und sie sind sehr stark mit CSS anpassbar. Und zwar alle Formelemente.

weitere Modifikation

die erste Checkbox besitzt unten stehende CSS-Eigenschaften

1
2
3
4

{
   width: 100px;
   height: 100px;
}

Besondere Links

Viele modernen PDAs sind gleichzeitig auch Mobiltelefone. So auch das iPhone.

Links auf Google Maps werden automatisch erkannt und im Karten-App geöffnet.

1

<a href="tel:1-408-5555-5555">1-408-5555-5555</a>

1

<a href="mailto:info@example.com">Mr. Example</a>

Unterstützung

Standards

Safari iPhone unterstützt die selben W3C-Webstandards wie die Desktop-Applikation.

• HTML 4.01
• XHTML 1.0
• CSS 2.1 und einige CSS3
• JavaScript 1.4 (und AJAX)
• DOM

Erwartet

• HTML 5
• WHATWG

Grafiken

• animierte GIF
  • sehr große GIFs nicht animiert (1. Frame)
  • B * H * 4 * Anzahl Frames < 2 MB
• JPEG
  • sehr große JPEGs mit Pixel-Subsampling
• PNG
• TIFF
• bis zu einer Größe von B * H * 4 <= 8 MB

Ressourcen-Grenze

• maximal 10 MB insgesamt
• maximale JavaScript-Abarbeitung: 5 Sekunden
• maximale Tabs: 8

Sonstiges

• PDF
• Quicktime Audio/Video

Nicht dabei

Folgende Plugins sind nicht implementiert.

• Flash
• Java

Media Queries

Das iPhone unterstützt CSS3 Media Queries.

1

<link media="only screen and (device-width: 320px or device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet">

iPhone per .htaccess umleiten

Wer für das iPhone und andere mobile Endgeräte auf eine andere Domain, oder Subdomain umleiten möchte kann dies recht einfach mittels .htaccess machen:

1
2
3
4
5
6

RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobile.deinedomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*BlackBerry.*$
RewriteRule ^(.*)$ http://mobile.deinedomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*Palm.*$
RewriteRule ^(.*)$ http://mobile.deinedomain.com [R=301]

Über den Autor: meggs

hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten

Kommentare: Mobile Device Webdesign am Beispiel iPhone

Neuen Kommentar schreiben

...

Beantworten

Mit vollem Genuss gelesen, danke sehr interessant!

Darf man noch kurz erfahren, mit welchem Emulator du die Seiten getestet hast oder besitzt du ein iphone?

Darius M. am 25.10.2008 um 19:48

Re: ...

Beantworten

danke :)

haben tu ich n ipod touch, aber wäre auch mit dem "iphone simulator" gegangen

meggs am 25.10.2008 um 19:51

Re: ...

Beantworten

Bookmarked - gibt es den "Iphone Simulator" eigtl. auch für Windows? hab ihn bisher nur für Mac gefunden.

Gruß, Dominik

Dominik Habichtsberg am 16.02.2009 um 08:21

Re: ...

Beantworten

Es gibt einen.

Der nimmt sich aber Bloß Safari, welches auf dem PC installiert ist und packt es in ein kleines Fenster.

Kannst also Safari nehmen und das Fenster ganz klein ziehen.

Felix.S am 24.01.2010 um 14:55

Re: ...

Beantworten

Du installierst dir Safari für Windows und musst dann aber in den Programmeinstellungen das Häkchen bei Entwickler setzen, um die Entwicklerfunktionen zu bekommen (ist dann im Menü ein eigenes DropDown).

Dann kannst du verschiedene UserAgents auswählen (zB iPhone). Das Fenster kleinziehen hilft nix - der iPhone-Safari hat ein paar Besonderheiten im Rendering.

Wer einen _echten_ Simulator des iPhones braucht, den gibts _nur_ zusammen mit dem Developerpaket fürs iPhone zusammen mit XCode. also nur macintosh.

meggs am 25.01.2010 um 16:34

Re: ...

Beantworten

Ich weiß.

Safari unterm iPhone ist viel besser als beim PC. Noch besser sind nur die Nightly Builds. (Für den Mac.)

Ich meine, er könnte das Safari-Fenster ganz klein ziehen, und er bekommt das gleiche Ergebnis wie beim iPhone-Simulator für'n PC.

Felix.S am 29.01.2010 um 12:45