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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".