Android Cloud to Device Messaging

Transkript

1 Ausgabe 3/2011 MobileTech Conference 2011: Alle Infos im Beihefter! Deutschland 9,80 Österreich 11,70 Schweiz sfr 17,50 Luxemburg 11,90 magazin Android Cloud Android Cloud to Device Messaging Google TV Wie Sie Ihre Android-App auf den Fernsehschirm bringen Webdesign für Tablets Webseiten für Android Tablets optimieren Google Maps und GPS Karten und Geopositionen unter Android TUTORIAL Geld verdienen mit Android Mobile Apps im Höhenfl ug

2 TABLETS TABLET-OPTIMIERTE WEBSITES Webdesigner schenken Android-Tablet-Browsern noch zu wenig Beachtung ein kapitaler Fehler Design für Tabletoptimierte Websites User Experience Design prägt unseren täglichen Mensch-Maschine-Kontakt. Es ist das Interface zwischen uns und der digitalen Welt. Touch-Technologie, Gesten, Websites, App GUIs und Digital Publishing für Android und ipad Tablets sorgen für eine intuitivere Nutzbarkeit der Geräte in unserem Alltag. Wie wird sich das auf die herkömmliche Websitegestaltung und -nutzung auswirken? Dieser Artikel zeigt auf, welche einfachen Regeln für eine erfolgreiche Websiteoptimierung für Tablets aktuell gelten und geht auf Besonderheiten bei Android Tablets ein. von Christian Kuhn User Experience (UX) ist die Einheit aus Nutzwert (Look), Nutzererlebnis (Feel) und Usability (intuitive Bedienbarkeit). Erfolgreiche (Mobile-)Produkte stehen in einem starken Abhängigkeitsverhältnis zum Zusammenspiel dieser drei Eigenschaften einer User Experience (Abb. 1). Im Vergleich zu den Hard- und Softwareprodukten von Desktopcomputern der letzen Dekade wurde die Bedeutung von User Experience durch Touch Devices und Tablets in neue Sphären gehoben. Die intuitive, kinderleichte Bedienung eines komplexen Geräts ohne Anleitung und Einweisung ist spätestens seit Einführung des iphones der gesetzte Maßstab. Bei genauerer Betrachtung dessen, was erfolgreiche mobile User Experience auf Tablets beeinflusst, sind drei Ebenen zu identifizieren: Hardware, Software und eine auf das Gerät und OS optimierte Website (Abb. 2). Die Hardware-User-Experience Ein Gerät aus hochwertigen Materialien wie Metall und Glas fühlt sich schlichtweg gut an. Diese haptischen Reize werden oft aus Kostengründen nicht ausreichend bedient. Abgesehen vom Motorola Xoom und die neueste Samsung- Galaxy-Generation können die meisten verfügbaren Kunststoff- Tablets nicht wirklich überzeugen. Dafür heben sich die beiden Erstgenannten auch im Preis deutlich von ihren Mitbewerbern ab. Die Performance und Touch-Fähigkeit (Reaktionszeit) der aktuell verfügbaren Geräte liegen indes nicht weit auseinander. Websites bauen sich Abb. 1: Drei Eigenschaften einer User Experience fast gleich schnell auf und lassen sich flüssig bedienen. Auf Websites eingebundene Videos werden ruckelfrei abgespielt. Bei den Bildschirmgrößen tendiert die erste Generation der Android Tablets (2.2) zu 1024 x 600 Pixeln, ist also kleiner als der Platzhirsch ipad mit 1024 x 768 Pixeln. Neben dem ipad wird auch das neue Gerät von HP mit WebOS 3 und dieser Bildschirmgröße ausgestattet sein. Die aktuellen Honeycombs punkten wiederum mit HD-fähigen 1280 x 800 Pixeln und bieten somit deutlich mehr nutzbare Fläche an (Abb. 3). Die Operating System User Experience In Punkto Operating System User Experience steht Android Honeycomb dem ios in nichts nach und überrascht mit vielen nützlichen Details, die sich nun auch beim neusten ios 5 wiederfinden werden. Das ipad bietet im Moment noch einige Gesten zur Fingersteuerung, die, wenn alle Patentfragen geklärt sind, auch in naher Zukunft auf dem Android zu erwarten sind. Eine Übersicht über die aktuell unterstützten Gesten befindet sich unter [1]. Die allgemeinen Regeln der intuitiven Benutzbarkeit beherrschen beide Systeme. Simplifizierung und maximale Reduzierung der Bedienelemente auf wesentliche sowie Context-bezogene Inhalte zeichnen diese aus. Neben den von Haus aus gelieferten Webkit-basierenden Browsern Safari und Chrome erfreuen sich auch Dolphin-HD-, Opera- und Firefox-Mobile-Browser unter Android wachsender Beliebtheit. Allen gemein ist die Unterstützung von HTML5, CSS3 und Flash (ausgenommen Safari). Ab Android 24 android

3 TABLET-OPTIMIERTE WEBSITES TABLETS Abb. 2: Drei Ebenen einer erfolgreichen User Experience auf Tablets Abb. 3: Nutzbare Flächen auf Tablets im Vergleich 3.1 bietet der Chrome auch einen Fullscreen-Modus mit Schnellnavigation. In der Verbreitung der Betriebssysteme wird Android seinen Erzrivalen ios nach Meinung von IT-Marktbeobachtern (IDC [2]) bis 2014 überholen. Damit wird gerätebedingt unter den Tablets wohl auch das Bildschirmformat von 1280 x 800 Pixeln überwiegen. Abb. 4: Die Quick-Navi sollte beim Gestalten berücksichtigt werden Die App/Website User Experience Dass Webseiten übersichtlich, anspruchsvoll und gut strukturiert gestaltet sein sollten, darüber hinaus intuitiv zu bedienen, selbstverständlich suchmaschinenfreundlich eingerichtet, interaktiv und multimedial ausgestattet, mit wertvollen Inhalten versehen und dazu auch noch schnell sein sollten, ist nichts Neues. Prinzipiell unterscheiden sich diese Anforderungen nicht von denen, die auch schon vor fünf Jahren jedem Projektbriefing zugrunde lagen. Und dennoch werden Seiten gelauncht, auf denen man sich schnell verliert, die überladen sind mit Inhalten und dadurch langsam reagieren und die in der Regel alles andere als eine Optimierung für Mobile Devices aufweisen. Die Regelwerke für die User-Interface-Gestaltung von Android, ios, MeeGo und Windows Phone 7 sind ein Muss für jeden Mobile-Webdesigner. Durch die Touch- Interfaces zu intuitiven und Context-bezogenen Strukturen gezwungen, die verpackt in universell leicht zu erfassenden Icons und Buttons präsentiert werden müssen, stellen die Anbieter ihr Wissen in den jeweiligen Developer-Centern bereit. Auf dieses Wissen, das auf intensiven Analysen basiert, können Designer sich stützen. Vor allem dem Windows-Metrodesign sollte man Beachtung schenken. Es ist die konsequente Umsetzung eines generischen Designprinzips für die Vielfalt der abzudeckenden Viewport-Größen. In der Gestaltung der Webseite gilt es oft, zwischen einem individuellen Design und einem Identitätsverlust der Seite zugunsten einer starken Integration in die OS-Umgebung abzuwägen. Bei Native-Apps, Web-Apps und Websites ist zu beobachten, dass sich diese in der Gestaltung immer mehr annähern und dadurch enger mit dem Endgerät verwoben sind, ganz zum Vorteil des Nutzers. Er findet sich schnell zurecht und erkennt anhand der gestalteten Elemente wie Buttons und Icons die dahinter liegenden Funktionen. Nutzer lesen in der Regel nicht, sie scannen Inhalte. Eine Auswahl an Vorlagen für Wireframing, Prototyping, Icons und GUI-Vorlagen für Android befinden sich unter anderem bei Speckboy.com [3]. Für den Chrome-Browser unter Android 3.1 stellt com [4] eine Photoshop-Ebenendatei als Gestaltungshilfe zur Verfügung. Durch die Honeycomb-Systemmenüleiste am unteren Bildschirmrand ergibt sich eine Nettofläche von 1280 x 647 Pixeln im Browser. Bei eingeschalteter Quick-Navi im Fullscreen-Modus erhalten wir eine Höhe von 752 Pixeln. Auch die Quick-Navi selbst sollte beim Gestalten berücksichtigt werden (Abb. 4). Tablet-optimierte Websites bestechen durch folgende Eigenschaften Einfachheit und Reduzierung auf das Wesentliche (Simplicity) Weißraum: Helle Flächen fördern die Übersicht und reduzieren Spiegelungen im Touchscreen Weniger Bilder, um auch bei geringer Bandbreite gute Ladezeiten zu ermöglichen Das Design der Navigations- und Funktionselemente (Icons) ist an die aktuellen GUIs von Android und ios angelehnt. Das bietet einen hohen Wiedererkennungs wert für den Nutzer und eine bessere Integration in die Umgebung Layout optimiert für Landscape- und Porträtmodus Verzicht auf Dropdown-Menüs und Pop-ups Content hat die höchste Priorität, fl ache Informationshierarchie Größere Schriftgrößen als bei der Desktopversion Scrollen bzw. Swipen nur in eine Richtung Noch fast keine Werbung android

4 TABLETS TABLET-OPTIMIERTE WEBSITES Abb. 5: Vergleich: Amazon App (links) versus Website (rechts) Licht und Schatten Die Amazon Window App ist ein Beispiel dafür, wie schön einfach und vor allem übersichtlich die Nutzung von Amazon auf einem Tablet sein könnte. Eine ansprechend gestaltete Katalogwelt lädt den User zum Stöbern ein. Die Desktopvariante lässt sich zwar vollständig auf einem Tablet nutzen, jedoch ist diese stark textüberladen und wegen der kleinen Schriftgrößen sehr anstrengend zu bedienen. Ein Transfer des Konzepts und der Gestaltung der Native App zu einer browseroptimierten Mobile-Version ist hier zu empfehlen (Abb. 5). Andere Seitenbetreiber sind den Weg bereits weiter gegangen. Die speziell auf das ipad Mobile-optimierte Zeit ( ist ein wahrer Genuss in der Handhabung, wird jedoch leider nur für das ipad angeboten (Abb. 6). Beim Besuch der Seite mit einem Android 2.2 bis 3.1 bekommt der User nur die Mobile-Version für Smartphones zu Gesicht. Die ipad-version lässt sich nicht ansteuern, obwohl das flexible Layout ideal für die Darstellung auf größeren Tablets geeignet wäre. Grund dafür ist, dass im Moment der User Agent noch nicht eindeutig auf eine Tablet-Version des OS abgefragt und deshalb die Smartphone-Version ausgeliefert wird (übrigens ein häufig anzutreffendes Problem bei WordPress-Seiten). Da das weit verbreitete WP-Touch-Plug-in nicht zwischen Android 2.2 und 3.x unterscheiden kann, wird nur die für Smartphones bestimmte Mobile Site angezeigt. Abhilfe schafft ein Workaround von Rene Hesse, den er auf seinem Blog [5] beschreibt. Zeit.de könnte also durch eine erweiterte User-Agent- und Viewport-Abfrage dem Gros der Android Tablets zur Verfügung gestellt und somit zur Tabletoptimierten Version umbenannt werden. Zwar bietet Chrome die Möglichkeit, die User-Agent- Kennung in den Einstellungen zwischen Tablet, Desktop und Mobile einzustellen, jedoch hat die Unterscheidung zwischen Mobile und Tablet im Moment leider noch keine Auswirkung beim Surfen im Web. Vorbildliche ipad-optimierte Shops wie der von Nike USA können den Poträtund Landscape-Modus nicht richtig abfragen, sodass dem Anwender die elementaren Funktionen verwehrt bleiben (Abb. 7). Der Android User bekommt die Poträtversion im Landscape-Modus angezeigt. Bilder und Links liegen Abb. 6: Vergleich: Zeit auf Android (links) versus Zeit auf ipad (rechts) 26 android

5 TABLET-OPTIMIERTE WEBSITES TABLETS Abb. 7: Vergleich: Nike US auf Android (links) versus Nike US auf ipad (rechts) außerhalb des sichtbaren Bereichs und sind nicht mit einem Swipe oder Scrollen erreichbar. Auch hier würde Nike durch eine einfache Nachbesserung mehr User erreichen und könnte sich vor allem die Enttäuschung der Early Adopter ersparen. Wenn man die Nike-US-Seite direkt ansurft, bekommt man übrigens auch nur die Smartphoneversion angeboten. So bleiben Nachrichtenportale und Microsites dem Android Surfer versperrt. Als Alternative stehen meist nur Tablet-untaugliche Desktopversionen zur Verfügung. Eine gute User Experience wird hier durch zu kleine Touch-Flächen für Links und Funktionen, schwer zu bedienende Dropdown-Menüs, Scrollen in iframes und die Performance fressende Flash-Werbung verhindert. Ein Gegenbeispiel gefällig? Die mobile Version von YouTube glänzt in beiden Welten mit einer optimierten Seite. Unter den Einstellungen werden die universellen, einfach zu verstehenden Icons aus dem Android GUI genutzt. Die Reduzierung der Seitenelemente fördert die Übersicht und einfache Nutzung der Site (Abb. 8). Die Entwicklung lässt sich nicht ignorieren. Mit den stark wachsenden Nutzerzahlen des Mobile-Webs, durch den steigenden Absatz der Endgeräte (weltweit) und dem damit verbundenen Ausbau bandbreitenstarker Netze wird sich jede Website daran messen lassen müssen, ob diese auch mobil so ansprechend und leicht bedienbar ist wie auf einem Desktoprechner. In einer perfekten Welt sollte sich der Webauftritt auf jedem Medium gleichermaßen übersichtlich und einfach bedienen lassen. Aufgrund der Notwendigkeit, Webseiten so herzustellen, dass sie auch noch auf Smartphones/Touchphones, Netbooks und Tablets eine gute User Experience aufweisen, sollten die grundlegenden Regeln für gute Websites befolgt werden, wovon die meisten aktuell vorhandenen Seiten noch profitieren können. Je nach Zielgruppe wird sich dieser Regelwandel beschleunigen. Wenn sich unter den Anwendern (Zielgruppe) ein relevanter und schnell wachsender Anteil von Tablet-Usern befindet, sollte geprüft werden, in wie weit auf Touchscreen-ungeeignete Dropdown-Menüs, Hover-Effekte und zu kleine Bedienelemente von vorneherein verzichtet werden kann oder ob auf Abruf entsprechend angepasste Versionen ausgeliefert werden sollten. Abb. 8: YouTube auf Android android

6 TABLETS TABLET-OPTIMIERTE WEBSITES Abb. 9: Alle Schriften dieser Seite sind in Arial formatiert und werden auf dem Tablet Chrome durch die Droid Sans ersetzt Zudem sollte man sich immer wieder projektbezogen der Flash-Frage stellen. Android Tablets unterstützen Adobe Flash, was immer wieder als Verkaufsargument kommuniziert wird. Jedoch stürzten die Flash-Seiten auf unseren Testgeräten mit Froyo und Honeycomb regelmäßig ab. Das ist keine gute User Experience und grenzt ohne Fallback die aktuell größte Tablet-Nutzergruppe der ipad User aus. Videos lassen sich mittlerweile sehr einfach und schnell via HTML5 einbinden und dazu auf allen Geräten abspielen, sodass man auf Flash verzichten kann. Das Font-Drama Ganz gleich, welcher Browser auf einem Froyo oder Honeycomb installiert ist, ganz gleich auch, welche Standard- Listing 1: Beispiel in HTML <link rel="stylesheet" href="index_files/mobile.css" type="text/css" media="screen and (max-device-width: 480px)"> <link rel="stylesheet" href="index_files/tablet.css" type="text/css" media="screen and (min-device-width: 768px) and (max-device-width: 1280px)"> Listing 2: Beipsiel in der url(desktop.css) url(print.css) url(tablet.css) screen and (min-device-width: 768px) and (max-device-width: 1280px) Listing 3: Beispiel innerhalb einer only screen and (max-device-height: 800px) and (max-device-width: 1280px) and (orientation : landscape) { /* Hier der CSS-Code speziell für das Android Tablets mit 1280x800 im Querformat */ only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) { /* Hier der CSS-Code speziell für das ipad im Querformat */ } 28 android webschrift wie Verdana, Arial oder Times in der Website genutzt wird, die Fonts werden durch den entsprechenden Schriftschnitt der Google-Droid-Font-Familie ersetzt (Abb. 9). Das mag für den gewöhnlichen User kein Problem sein, sind die Droid Sans, Serif und Co. immerhin screenoptimierte Schriften, die sich dank der kostenfreien Verteilung durch Google großer Beliebtheit bei Webdesignern erfreuen. Dieser Mechanismus sorgt aber bei ArtDirektoren und Webdesignern für graue Haare und ist für CI- und Marketingverantwortliche oft nicht akzeptabel. In Gestaltungs- und Abstimmungsprozessen mit Agenturen und Kunden ist das Erscheinungsbild der Schrift ein relevanter Punkt. Wenn nicht die durch die Corporate Identity festgelegte Hausschrift zum Einsatz kommen kann, dann sollte wenigstens eine einheitliche Copyfont medienübergreifend eingesetzt werden. Doch die Rettung ist nah. Dank Font Embedding und einem stetig wachsenden Angebot an Schriften kann für ein medienübergreifendes Schriftbild gesorgt werden. Dieses lässt sich allerdings immer nur auf Kosten der Ladezeit umsetzen. Für eine Standardschrift wie Arial extra einen Font vom Server zu laden, kann nicht im Interesse des Nutzers liegen. Eine für alle? Die Vielfalt an Viewports hat durch die Tablet-Schwemme stark zugenommen, und eine für das ipad optimierte Website wird einem Honeycomb mit einer 1280-x-800Auflösung nicht gerecht. Wenn das automatische Zoom in Chrome aktiviert ist, wird die Seite entsprechend im Viewport eingepasst, was aber zur Folge hat, dass die eingebundenen Bilder unscharf werden. Ist das Auto-Zoom durch den Benutzer oder via <meta> Tag deaktiviert, bleiben die Bilder scharf, doch die Bildfläche wird durch das unglückliche Seitenverhältnis mit ungenutzten Flächen an den Rändern nicht voll ausgenutzt. Über einen <meta> Tag kann das Zoom deaktiviert werden. Darüber hinaus kann die minimale und maximale Skalierung festgelegt werden: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> Auch wenn das Zoomen zu einer unschönen Darstellung führt, ist es doch ein Feature von Tablets, das vom Benutzer erlernt wurde und diesem deshalb nicht vorenthalten werden sollte. Er erwartet, durch die erlernte Gestik (Spread) den Inhalt vergrößern zu können. Wenn ihm das verwehrt bleibt, führt das zu Enttäuschung. Bei bestehenden Websites, die um eine Tablet-optimierte Version erweitert werden sollen, empfiehlt sich der Einsatz von CSS3 Media Queries. Neben der Art des Ausgabemediums wie Print, Screen etc. kann für die entsprechende Auflösung, Bildschirmgröße, Ausrichtung oder Farbdarstellung ein Stylesheet definiert werden. Dabei können Media Queries genutzt werden, um verschiedene CSS-Dokumente einzubinden oder nur bestimmte Abschnitte innerhalb einer CSS-Datei zu definieren. Um Bandbreite zu sparen und keine Elemente zu laden, die

7 TABLET-OPTIMIERTE WEBSITES TABLETS 1 2 Abb. 10: Responsive Webdesign: (1) Android Tablet quer, (2) ipad quer, (3) Android Tablet hoch, (4) ipad hoch (Quelle: bei einer tablet.css-version nicht dargestellt werden sollen, empfiehlt es sich, mit mehreren CSS-Dateien zu arbeiten (Listing 1 und 2). Innerhalb der tablet.css-css-datei kann gezielt auf die Darstellung der Website auf Android oder ipad im Querformat eingegangen werden (Listing 3). CSS3 Media Queries werden von mobilen Browsern unterstützt. Will man sie auch für einen veralteten Desktopbrowser einsetzen, kann man sie mit einem JQuery-Plug-in via JavaScript nachrüsten [6]. Eine andere Möglichkeit bietet Device Detection mit PHP. Hierbei erkennt eine PHP-Funktion diverse Mobile User Agents und Browser und leitet den Besucher der Website auf die jeweilig optimierte Version für das Smartphone oder Tablet um [7]. Für den Neustart: Responsive Webdesign Responsive Webdesign [8] ist das Resultat unseres Bedürfnisses, auf allen Endgeräten optimal dargestellte Inhalte zu sehen (Abb. 10). Der Aufwand, für die stark wachsende Anzahl an Bildschirmgrößen von Tablets und Smartphones zu entwickeln, ist nur durch ein Umdenken im Webdesign zu bewältigen. Es erfordert allerdings beim Kunden und beim Designer Flexibilität bei der Erstellung des Gestaltungskonzepts. Durch Responsive Design werden Bilder automatisch mit dem Seitenlayout skaliert oder beschnitten. Das bedeutet, dass ein Webseitenlayout automatisch auf unterschiedliche Bildschirmgrößen reagiert und sich entsprechend dem Bildschirmformat anpasst, ganz gleich von welchem Hersteller, OS oder Browser. Diese Punkte sollten mit dem Auftraggeber, mit den Nutzern der Endgeräte und Websites angestrebt werden. Denn eine gute User Experience sorgt für wiederkehrende Anwender, eine intensive Nutzung und damit zum Erfolg der Website. Links & Literatur [1] [2] jsp?containerid=pruk [3] GUI-Vorlagen für Android bei Speckboy.com: [4] [5] Work-a-round von Rene Hesse: [6] [7] Christian Kuhn ist geschäftsführender Inhaber von NUISOL ( Mit seinem Team entwickelt er seit über zehn Jahren medienübergreifende Kommunikationslösungen. Er ist Fachautor und hält Vorträge zu den Themen Social Media, User Experience Design für Tablet-optimierte Websites und Livevideostreaming für mobile Endgeräte. [8] Beispiele für Responsive Design Sites: android