So optimieren Sie Ihren Webauftritt

Textgröße, Formulare, Ereignisverwaltung

  1. Homepage-Optimierung fürs iPhone
  2. Textgröße, Formulare, Ereignisverwaltung

Insofern ist es besser, wenn Sie zuerst das Standard-Stylesheet wie gewohnt einbinden. Danach verweisen Sie auf die small-devices.css, die dann auf dem iPhone die Vorgaben des Standard-CSS überschreibt. Etwas aus der Mode geraten ist dagegen die Methode per Browser-Weiche ).

Textgröße

Zu den praktischen Funktionen des iPhone-Safari gehört die Möglichkeit, einen Textblock per Doppelklick mit dem Finger so zu vergrößern, dass er das Display in seiner Breite komplett ausfüllt. Wenn Safari eine Seite nach dem Laden rendert, versucht er den enthaltenen Text automatisch auf eine lesbare Größe zu bringen.

Diese automatische Textgröße funktioniert aber nicht immer. Mit der Webkit vorbehaltenen CSS-Eigenschaft -webkit-text-size-adjust können Sie die Automatik abschalten oder den Vergrößerungsfaktor selbst bestimmen:

html {-webkit-text-size-adjust:none}

beziehungsweise

html {-webkit-text-size-adjust:150%}

Die farbliche Hervorhebung eines aktiven Links, steuern Sie über:

a {-webkit-tap-highlight-color:
rgba(200,0,0,0.4)}

Formulare

Die Anzeige und das Ausfüllen von Formularen sind am iPhone recht elegant gelöst. Weil dabei eine Bildschirmtastatur eingeblendet wird, schrumpft der für die Darstellung des Formulars verfügbare Platz aber auf 140 beziehungsweise 34 Pixel.

Scrollt man nach unten, sodass das Adressfeld aus dem sichtbaren Bereich herausrutscht, dann vergrößert sich dieser Raum um 60 Pixel. Berücksichtigen Sie diese Abmessungen bei der Formatierung von Formular-Elementen. Notwendige Anpassungen nehmen Sie am besten im iPhone-Style-sheet vor. Damit Checkboxen und Text-Inputs im iPhone-Look erscheinen, verpassen Sie diesen mit

-webkit-border-radius: 10px

runde Ecken. Außerdem können Sie die Autokorrektur und die automatische Großschreibung des ersten Buchstabens ein- und ausschalten. Das empfiehlt sich, wenn der eingegebene Text mit hoher Wahrscheinlichkeit nicht im Wörterbuch steht, also bei Benutzernamen, Kennwörtern und Produktnamen:

<input autocorrect="off"
autocapitalize = "off">

Bedenkt man, wie unzufrieden die meisten Nutzer mit der Autokorrektur sind, dann sollte man die Funktion vielleicht sogar generell ausschalten.

Ereignis-Verarbeitung

Das iPhone setzt Fingergesten in verschiedene Event-Folgen um, je nachdem ob Erstere über einem klick- oder einem scrollbaren Element ausgeführt wurden. Welche Event-Folgen im Einzelnen entstehen, hat Apple unter ausführlich dokumentiert.

Mobiles Webdesign fürs iPhone

© Archiv

Waagerecht ausgerichtet schrumpft der Viewport weniger stark, sodass Inhalte größer erscheinen.

Dort findet sich auch ein Trick, mit dem Sie Flyout-Menüs für das iPhone aufrüsten, die sich im Desktop-Browser öffnen, wenn Sie mit dem Mauszeiger darübergleiten. Dazu müssen Sie das Menü klickbar machen, sodass es nach Antippen mit dem Finger erscheint:

<span onmouseover = "..." onmouseout
= "..." onclick = "void(0)">
Menüpunkt 1 </span>

Testgeräte

Die eleganteste Plattform für Tests ist die kostenlose Entwicklungsumgebung iPhone Software Development Kit () für rund 100 US-Dollar.

Für Windows gibt es nach unserem Wissen keine vernünftige Alternative. Zwar findet man im Web den ein oder anderen Emulator, z.B unter oder iphonetester.com. Vorausgesetzt man lädt diese mit Safari 3.2, dann werden die Seiten einigermaßen iPhone-ähnlich dargestellt.

Allerdings bilden sie das Viewport-/Display-Konzept des mobilen Safaris nicht ab, sodass die Ausgabe immer so aussieht, als hätten Sie den Skalierungsfaktor auf 1.0 gesetzt. Ein gebrauchter iPod Touch mit aktueller Firmware für rund 100 Euro erlaubt dagegen einen realistischen Test, ist aber nicht ganz so bequem zu bedienen.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…