WebApps für iOS und Android Smartphones

Bereits seit geraumer Zeit ist es unter iOS und Android Smartphones wie auch Tablets möglich Webseiten auf dem Homescreen abzulegen. Die Implementierung von nur wenigen Funktionen kann die Darstellung eine Webseite auf Smartphones und Tablets wesentlich ansprechender gestalten.

Mit einigen wenigen Anpassungen am Quellcode lassen sich Webseiten auf dem Smartphone bzw. Tablet wie native Apps darstellen. Die wichtigsten Funktionen möchte ich euch in diesem Artikel vorstellen.

WebApp-Icons für den Homescreen

Es ist relativ simpel eine WebApp bzw. normale Webseite mit einem Icon für den Homescreen zu versehen. Dieses Icon wird jedoch nicht nur angezeigt wenn der Nutzer die Webseite auf dem Homescreen ablegt. Die Favoriten-Anzeige im mobilen Safari unter iOS 7 verwendet die WebApp Icons beispielsweise ebenso auf der Übersichtsseite, wie auch einige RSS-Reeder und andere Online-Dienste.

Ein schönes WebApp-Icon kann also dazu beitragen, dass der Nutzer öfter mit der Webseite interagiert, weil er die Webseite dank des Icons eher wahrnimmt. Ohne Icon könnte der Nutzer im schlimmsten Fall der Meinung sein, dass sich die Webseite auf dem Homescreen oder den Favoriten nicht dem Look and Feel des Systems anpasst und löscht diese wieder.

Verschiedene Icons für verschiedene Geräte
Während für Android Smartphones lediglich ein Icon erstellt werden muss und das System die Bildgröße selber anpasst, müssen für iOS und die verschiedenen Geräte jeweils eigene Icons erstellt werden. Eingebunden werden die Icons über LINK-Element im Kopfbereich (head) der Webseite.

In der folgenden Liste findet ihr die Angaben für alle relevanten Geräte, die Icon-Größe kann dem „sizes“ Attribut entnommen werden:

<!-- nicht retina iPhones -->
<link rel="apple-touch-icon" href="appicon-57x57.png" sizes="57x57" />
 
<!-- nicht retina iPad -->
<link rel="apple-touch-icon" href="appicon-72x72.png" sizes="72x72" />
 
<!-- nicht retina iPad mit iOS 7 -->
<link rel="apple-touch-icon" href="appicon-76x76.png" sizes="76x76" />
 
<!-- retina iPhone vor iOS 7 -->
<link rel="apple-touch-icon" href="appicon-114x114.png" sizes="114x114" />
 
<!-- retina iPhone mit iOS 7 -->
<link rel="apple-touch-icon" href="appicon-120x120.png" sizes="120x120" />
 
<!-- retina iPad vor iOS 7 -->
<link rel="apple-touch-icon" href="appicon-144x144.png" sizes="144x144" />
 
<!-- retina iPad mit iOS 7 -->
<link rel="apple-touch-icon" href="appicon-152x152.png" sizes="152x152" />
 
<!--Android generell-->
<link rel="shortcut icon" href="appicon-196x196.png" sizes="196x196" />

Ideal wären diese Anpassungen vor allem auch für Webseiten die Spiele oder Tools anbieten, wie z.B. SpielAutomaten.info. Idealerweise wäre hier ein Icon und Startscreen für jedes einzelne Spiel zu setzen, um die User Experience auf mobilen Geräten zu erhöhen.

App Feeling ohne Steuerelemente des Browsers

Damit die WebApp oder Webseite sich auch wirklich anfühlt wie eine richtige native App sollten die Browsersteuerelemente ausgeblendet werden. Dies lässt sich über eine einfach Meta-Angabe, die ebenfalls im Head der Webseite untergebracht wird, erledigen. Durch diese Meta-Angabe werden bei einem Start der WebApp, über den Homescreen, sämtliche Browserelemente ausgeblendet. Das heißt, dass der Nutzer weder eine Adressleiste, noch irgendwelche Steuerelemente sehen oder benutzen kann.

Bei einer entsprechend darauf ausgelegten WebApp kann dies durchaus Sinn machen, bei einer „normalen“ Webseite könnte es allerdings auch hinderlich sein. Es sollte daher genauestens überlegt werden, ob diese Angabe wirklich eingebunden wird.

Die Angaben lauten wie folgt:

<!-- Android -->
<meta name="mobile-web-app-capable" content="yes" />
 
<!-- iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" />

Zusätzlich sollte der Viewport für eine korrekte Ausgabe der Webseite gesetzt werden. In den meisten Fällen dürfte es sinnvoll sein die Viewport-Breite auf die Geräte-Breite zu setzen, vor allem bei Responsive-Websites ist diese Angabe wichtig um ein korrektes Verhalten zu gewährleisten:

<meta name="viewport" content="width=device-width" />

Falls es aus bestimmten Gründen notwendig ist den Viewport individuell zu setzen, kann statt device-width auch ein Pixel-Wert gesetzt werden.

Unter iOS ist es ebenfalls möglich die StatusBar, die als einziges Element des OS weiterhin sichtbar bleibt, zu konfigurieren. Hier stehen folgende Einstellungen zur Verfügung:

<!-- Standard von iOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
 
<!-- Die StatusBar hat einen schwarzen Hintergrund -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
<!--
Die StatusBar hat einen schwarz / transparenten Hintergrund und legt sich über die Webseite.
Diese Einstellung sollte genau geprüft werden, da dadurch Texte oder Bilder im Header verdeckt werden könnten.
Ebenso kann diese Einstellung aber auch bewusst zur Gestaltung der StatusBar verwendet werden.
-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Startbildschirm der WebApp festlegen

Ebenfalls nur unter iOS verfügbar ist der sogenannte Startup-Screen, dabei handelt es sich um eine Grafik die der Nutzer angezeigt bekommt, wenn er die WebApp über den Homescreen startet und während diese geladen wird.

Ähnlich wie mit den Icons müssen auch hier wieder für alle Geräte und zusätzlich für den Landscape und Portrait Modus Grafiken angelegt werden. Die entsprechenden Angaben und Größen sehen wie folgt aus:

<!-- 320x460 - iPhones bis einschließlich 3GS -->
<link href="splash/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
 
<!-- 640x920 - iPhone (Retina) -->
<link href="splash/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
<!-- 640x1096 - iPhone 5 -->
<link href="splash/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
<!-- 768x1004 - iPad (portrait) -->
<link href="splash/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
 
<!-- 748x1024 - iPad (landscape) -->
<link href="splash/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
 
<!-- 1536x2008 - iPad (Retina, portrait) -->
<link href="splash/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
<!-- 1496x2048 - iPad (Retina, landscape) -->
<link href="splash/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Auf den ersten Blick wirken die Formate vielleicht etwas komisch, dass liegt allerdings vor allem an der StatusBar, die hier jeweils aus der Bildgröße raus gerechnet werden muss.