Website als WebApp auf Android und iOS – Part 1

Android (mit dem aktuellen Chrome Browser) und iOS bieten die Möglichkeit Links zu Websites auf dem Homescreen zu platzieren.

Noch wenig Beachtung findet dieses Vorgehen, um aus der eigenen Website mit wenigen Schritten eine WebApp zu machen.

Voraussetzungen:

Die Website sollte für eine gute Benutzererfahrung eine mobile Version bieten, optimal ist also ein Responsive Design.

Touch-Icons:

Da ein favicon eine Auflösung von maximal 32 x 32 Pixeln bietet, wurde für Links auf den Homescreen das Touch-Icon ins Leben gerufen. Für iOS werden für die unterschiedlichen Geräteauflösungen separate Icons definiert, jeweils als png-Dateien.

Ab iOS 7 gelten folgende Auflösungen:

Gerät Pixel
iPhone 60×60
iPad 76×76
iPhone (Retina) 120×120
iPad (Retina) 152×152

Für Android reicht eine png-Datei in 196×196 Pixeln.

Einbinden in den Header der Website

 

Die Zeile

für Android-Geräte bzw.

für iOS sorgen dafür, dass die Website als WebApp gestartet wird.
Es werden dann keine Navigationszeile oder andere Browserbestandteile angezeigt.

Dieser Blog und meine Website www.hoppit.eu nutzen diese Technik.
Probiert es einfach mal. 😉

Im nächsten Artikel werde ich auf die Cache Funktionen eingehen, mit denen der Inhalt der Website offline verfügbar gemacht werden kann.

 

Ein Gedanke zu „Website als WebApp auf Android und iOS – Part 1“

  1. Hallo Hoppit,
    ein super Einstiegsthema auf eurem neuen Blog! Interessanter Artikel, kurz und informativ. Ist total an mir vorbei gegangen, dass man so einfach Web Apps erstellen kann.
    Weiter so!

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">