Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung
Nexus-5-Black

Was sollte bei Web-App-Grafiken für Android und iOS beachten werden

Webseiten auf dem Homescreen abzulegen ist sowohl mit Android als auch mit iOS möglich. So gelingen Web-Applikationen sowohl über Smartphone wie auch Tablet ohne Browese-Chrome. Einigen ist zwar bekannt, dass auch normale Webseiten auf den Homescreen geholt werden können, aber die Umsetzung fällt oftmals schwer. Ich zeige Euch heute auf, wie dies mit nur einigen Zeilen HTML und einer entsprechenden Grafik gelingt.

HTML

Erster Schlüsselfaktor ist HTML. Selbstverständlich ist es bereits möglich beispielsweise bei iOS-Geräten über das Betriebssystem Icons zu generieren und eine auf dem Title-element basierende Bezeichnung anzulegen. Das Ergebnis ist aber oftmals nicht zufriedenstellend, da es sich in der Regel um ein Screenshot handelt und auch der Browser-Chrome beim Aufruf der App nicht ausgeblendet wird.

Was kann getan werden?

  • Vor- und Zurück-Buttons erscheinen
  • Das Anzeigen der URL-Leiste entfällt
  • Dadurch, dass kein Reload-Button vorhanden ist, muss der Nutzer bei eventuell fehlenden Elementen in der App auf Aktualisierung durch das Betriebssystem warten.

Folgende Meta-Information ermöglicht die Hinterlegung einer Web-App auf dem Homescreen:

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

Kleiner Tipp: Android Chrome unterstützt momentan noch die Meta-Informationen “apple-mobile-web-app-capable”. Verlasst Euch darauf nicht, denn dieser Support wird in absehbarer Zeit nicht mehr unterstützt und eingestellt.

Sofern Responsive Webdesign in Anwendung kommt, was wahrscheinlich oder hoffentlich bei den Meisten der Fall ist, sollte selbstverständlich auch der Viewport konfiguriert werden.

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

Mit den vorgenannten Beispielen kann der Punkt HTML abgehakt werden. Denkt daran, dass es nicht möglich ist mit Chrome Applikationen für iOS-Web zu installieren und die App lediglich auf dem Android-Homescrenn und nicht auch im Applikation-Launcher angezeigt wird.

Icons erstellen

Als nächstes sind Icons unabdingbar. Die vielen verschiedenen Grafiken sind bei Chrome recht überschaubar. Bei den iOS-Geräten muss an viel mehr Größen für die Icons gedacht werden. Hier die Wichtigsten:

Non-retina iPhone vor iOS7
57×57 Pixel
Retina iPhone iOS 7
120×120 Pixel
Non-retina iPad vor Ios7
72×72 Pixel
Retina iPad vor iOS7
144×144 Pixel
Non-retina iPad iOS7
76×76 Pixel
Retina iPad iOS7
152×152 Pixel
Retina iPhone vor iOS7
114×114 Pixel
Android
192×192 Pixel

Um nun die Icon-Grafiken zu integrieren muss folgender HTML-Code in den Bereich eingefügt werden.

1. <!-- non-retina iPhone vor iOS 7 --> 
2. <link href="icon57.png" rel="apple-touch-icon" sizes="57x57" /> 
3. <!-- non-retina iPad vor iOS 7 --> 
4. <link href="icon72.png" rel="apple-touch-icon" sizes="72x72" /> 
5. <!-- non-retina iPad iOS 7 --> 
6. <link href="icon76.png" rel="apple-touch-icon" sizes="76x76" /> 
7. <!-- retina iPhone vor iOS 7 --> 
8. <link href="icon114.png" rel="apple-touch-icon" sizes="114x114" /> 
9. <!-- retina iPhone iOS 7 --> 
10. <link href="icon120.png" rel="apple-touch-icon" sizes="120x120" /> 
11. <!-- retina iPad vor iOS 7 --> 
12. <link href="icon144.png" rel="apple-touch-icon" sizes="144x144" /> 
13. <!-- retina iPad iOS 7 --> 
14. <link href="icon152.png" rel="apple-touch-icon" sizes="152x152" /> 
15. <!--Android--> 16. <link href="196x196.png" rel="shortcut icon" sizes="196x196" />

Styling

Während Android den gesamten Bildschirm für eine Web-App frei gibt, werden bei iOS Balken für Uhrzeit, Betreiberinformationen und Ladestand des Gerätes angezeigt. Mit folgender Anwendung könnt Ihr aber auch diese Balken ändern: <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Setzt Ihr dazu noch verschiedene Werte könnt Ihr das Aussehen des Balkens individuell steuern.

Content –

„default“ – normale Status-Leiste

„Black“ – schwarzer Hintergrund der Leiste

„Black-translucent“ – Balken wircd leicht transparent angezeigt

„default“ oder „black-translucent“ – dann legt sich der Balken über den Inhalt und kann von der Webseite genutzt werden.

„default“ oder „black“ – der Platz kann nicht genutzt werden.

Falls dieser Wert gar nicht festgelegt wird, kann der Balken komplett schwarz und ohne jeglichen Nutzen oder irgendwelche Informationen dargestellt werden.

Namen in iOS festlegen

Zur Zeit bietet Chrome keine Möglichkeit eine Web-App zu benennen. Bei iOS kann dies durch zusätzlichen Meta-Tag geschehen. In der Regel wird bei der Installation das Title-Element der Webseite genutzt, daher ist es sehr schwierig zwischen dem SEO-Title und dem Homescreen einen Titel anzulegen.

Hiermit gelingt es bei iOS:

<title>Langer SEO-Name</title>
<meta name="apple-mobile-web-app-title" content="Kurzer name" />

Auch der Startbildschirm kann bei iOS festgelegt werden

Um während des Ladens der Applikation eine Grafik anzuzeigen, kann der Startbildschirm festgelegt werden. Beachtet dabei unbedingt die Vielzahl der Geräte-Größen!

So könnt Ihr die Startbildschirme implementieren:

1. <link href="splash/apple-touch-startup-image-320x460.png"
2. media="(device-width: 320px) and (device-height: 480px)
3. and (-webkit-device-pixel-ratio: 1)"
4. rel="apple-touch-startup-image">
5. <!-- iPhone (Retina) -->
6. <link href="splash/apple-touch-startup-image-640x920.png"
7. media="(device-width: 320px) and (device-height: 480px)
8. and (-webkit-device-pixel-ratio: 2)"
9. rel="apple-touch-startup-image">
10. <!-- iPhone 5 -->
11. <link href="startscreen_640x1096.png"
12. media="(device-width: 320px) and (device-height: 568px)
13. and (-webkit-device-pixel-ratio: 2)"
14. rel="apple-touch-startup-image">
15. <!-- iPad (portrait) -->
16. <link href="splash/apple-touch-startup-image-768x1004.png"
17. media="(device-width: 768px) and (device-height: 1024px)
18. and (orientation: portrait)
19. and (-webkit-device-pixel-ratio: 1)"
20. rel="apple-touch-startup-image">
21. <!-- iPad (landscape) -->
22. <link href="splash/apple-touch-startup-image-748x1024.png"
23. media="(device-width: 768px) and (device-height: 1024px)
24. and (orientation: landscape)
25. and (-webkit-device-pixel-ratio: 1)"
26. rel="apple-touch-startup-image">
27. <!-- iPad (Retina, portrait) -->
28. <link href="splash/apple-touch-startup-image-1536x2008.png"
29. media="(device-width: 768px) and (device-height: 1024px)
30. and (orientation: portrait)
31. and (-webkit-device-pixel-ratio: 2)"
32. rel="apple-touch-startup-image">
33. <!-- iPad (Retina, landscape) -->
34. <link href="splash/apple-touch-startup-image-1496x2048.png"
35. media="(device-width: 768px) and (device-height: 1024px)
36. and (orientation: landscape)
37. and (-webkit-device-pixel-ratio: 2)"
38. rel="apple-touch-startup-image">

Beim Starten der Web-App wird nun die Grafik angezeigt, jedoch nicht im App-Switcher, da ist das Feld weiß.

So, ich hoffe der Beitrag konnte Euch einen Einblick in die Möglichkeiten geben. Solltet Ihr Fragen oder Anregungen haben, freue ich mich wie immer über Eure Kommentare.