Usability Made in Hamburg (2.2.15)

Am 2.2.15 lädt das eBusiness-Forum in die Handelskammer zum Thema Usability – Made in Hamburg ein. Geplant sind 6 Kurzvorträge von Matthias Finck (effective webwork), Frank Hohenschuh (GfK), Martina Peris (Uni Hamburg), Christopher Menkens (MemeSoft), Frank Jacob (Human Interface Design) und Matthias Müller-Prove (das bin ich), sowie eine Podiumsdiskussion über Smart Services und Industrie 4.0.

Eingeladen sind Firmen aus Hamburg und jeder, der diese Ankündigung liest! Die Anmeldung ist kostenlos, aber notwendig über die Seite der Handelskammer.

Die Veranstaltung wird organisiert von HALLO SME (Hamburg Usability Living Lab for Small and Medium Enterprises).

PS: Hier meine Slides
Und ich drohe schon mal an, dass auch noch ein Video nach kommen könnte. 😉

WebApp-Icons für Chrome auf Android definieren

WebApps sind im Grunde einfach Webseiten, die man mit eigenen Icon auf seinen Smartphone installieren kann. Die Nutzer brauchen so nicht über einen Appstore zu gehen.Um eine solche WebApp zu entwickeln müssen wir dem HTML-Code einer Webseite zusätzliche Informationen mitgeben: die generelle Eigenschaft “WebApp-fähig” sowie mindestens ein Icon. Apple hat sich hier ein Link-Element mit Namen “apple-touch-icon” ausgedacht, zunächst in der krummen Größe von 57 Pixel. Dann kamen neue Geräte und Auflösungen, und Ruck-Zuck durfte man 4 verschiedene Icons allein für Apple definieren.Android hat WebApps bisher zwar auch unterstützt, aber eher halbherzig. Und Android möchte gerne andere Icon-Größen haben, die Vielfalt ist noch höher als bei Apple. Die Icon-Größen sind hier 48/72/96/144/192. Natürlich wollten die Android-Entwickler nicht die Tags nutzen, die das Wort “Apple” im Namen haben. All diese Bilder müssen im Kopfbereich der HTML-Datei verlinkt werden. Der Kopfbereich wird dadurch immer größer, ohne das irgend ein substanzieller Inhalt hinzukommt.

Die neue Lösung

Mit Chrome ab Version M39 hat sich Google jetzt der WebApp-Funktionalität noch einmal angenommen. Die Lösung ist eine zusätzliche Datei, die von der Originaldatei mit einem Link-Element referenziert wird:

<link rel="manifest" href="manifest.json">

Der Browser braucht die Informationen in der Datei nur anfordern, wenn der Nutzer die Webseite wirklich als WebApp auf den Startbildschirm installieren will. In der Datei können wird die verschiedenen Icons definieren, sowie einige nützliche Extra-Informationen:

  • name: Der Name, der auf dem Startbildschirm erscheinen soll. Der sollte möglichst kurz sein, also oft anders als der HTML-Title.
  • orientation: Man kann landscape oder portrait als Ausrichtung festlegen.
  • start_url: Das ist meistens einfach “index.html”
  •  display: “standalone” Dieses Attribut schaltet die Webapp Funktionalität in Chrome an.

Weitere Informationen gibt es in der Chrome-Entwicklerdokumentation: Add To Homescreen

Ergebnis

Die Auslagerung der Web-App-Definition macht den Head-Bereich von Webseiten wieder kleiner (oder zu mindestens wächst er nicht mehr mit jeder neuen Icon-Größe). Das gewählte Format ist offenbar wieder mal ein Alleingang einer amerikanischen Firma. Weder CSS, noch der ebenfalls “Manifest” genannte Appcache-Definition, noch die XML-Widget-Definition des W3C wurden verwendet. Leider fehlt bei Chrome immer noch eine definierte Möglichkeit, wie die WebApp erkennen kann, dass sie im Standalone-Modus läuft.