2 Hardwarevoraussetzungen Checkliste - Apps auf Mobilgeräten bedienen
Kleine Bildschirme.
Nach Möglichkeit mit einer Hand bedienbar.
Sinnvolle Umschaltung zwischen Hoch- und Querformat je nach Haltung des Geräts.
Unterschiedliche Lichtverhältnisse bei App-Gestaltung berücksichtigen.
Internetverbindung kann ausfallen.
Was fällt denn eigentlich genau in die Kategorie der Mobilgeräte? Ist ein Laptop auch mobil? Für dieses Buch definieren wir Mobilgeräte als Geräte, die klein und leicht sind, (fast) immer mitgeführt werden, ausschließlich über einen Touchscreen bedient werden und persönlich sind - kurz gesagt, Smartphones, Tablets und Phablets (Smartphones mit Bildschirmgrößen von 6Zoll und mehr).
2.1 Bildschirmgrößen und -auflösungen
Wenn wir attraktive Apps aufbauen, funktioniert das zu einem großen Teil über die grafische Bedienoberfläche. Um diese Oberfläche ansprechend zu gestalten, ist es für Entwickler wichtig, zu wissen, welche Größe, welches Format und welche Auflösung der Bildschirm hat, für den man entwickelt. Schließlich muss die Schrift lesbar sein, sie darf aber nicht so viel Platz einnehmen, dass andere Gestaltungselemente verschwinden. Gutes Design hängt also maßgeblich davon ab, wie gut man die Zielplattform kennt.
Was ist, wenn sich die Größe des Bildschirms ändern kann? Dann müssen sich auch alle Elemente der Benutzeroberfläche und ihre Abstände an die neuen Dimensionen anpassen.
Trotz der Vielzahl von Auflösungen haben sich die Hersteller der mobilen Betriebssysteme etwas einfallen lassen, um den Entwicklern entgegenzukommen. Bei iOS ist es beispielsweise egal, ob man für ein iPad mit Retina-Display oder ohne entwickelt. Das interne Koordinatensystem, mit dem man als Entwickler arbeitet, ist in beiden Fällen 1.024×768. Lediglich bei der Darstellung später wird die höhere Auflösung verwendet, um ein schärferes Bild zu erhalten.
Retina-Display
Apple nennt seine Bildschirme mit hoher Dichte an Pixeln werbewirksam Retina-Display. Damit meinen sie, dass man mit bloßem Auge und bei normalem Abstand zwischen Augen und Display keine Pixel mehr unterscheiden kann. Dass das MacBook Pro mit Retina-Display lediglich die halbe Dichte des iPhones hat, wird damit begründet, dass der Bildschirm des Laptops in der Regel weiter vom Gesicht weg ist als ein Smartphone.
Unter Android gibt es das Konzept der Density-Independent-Pixel (zu Deutsch: auflösungsunabhängige Pixel), kurz: dp. Dabei wird zwischen unterschiedlichen Pixeldichten unterschieden: ldpi (geringe Pixeldichte), mdpi, hdpi und xhdpi (hohe Pixeldichte) sowie xxhdpi und xxxhdpi (sehr hohe Pixeldichte). Dadurch kann der Entwickler sämtliche Größen- und Positionsangaben in dp machen, und je nachdem, auf welchem Gerät die App läuft, werden die Angaben in echte Pixel umgerechnet.
Bildschirmgrößen beim Smartphone
Sieht man sich die im Folgenden abgebildeten Auflösungen an, fällt auf, dass sie stark variieren. Das betrifft nicht nur die Größe, sondern auch das Seitenverhältnis.
Bild 2.1: Unterschiedliche Auflösungen bei Smartphones.
Bild 2.2: Größenvergleich derphysischen Displays.
Tabelle: Smartphone-Screens in Zahlen.
Nachdem Apple es fünf Jahre lang geschafft hat, die physische Bildschirmgröße des iPhones beizubehalten, haben sie sich 2012 dafür entschieden, ihre neuen iPhones mit größeren 4-Zoll-Bildschirmen - anstelle der alten 3,5 Zoll - auszustatten. Das iPhone 5 hat zwei Jahre später einen physisch größeren Bildschirm erhalten. Die Breite wurde beibehalten, lediglich in der Länge sind einige Pixel dazugekommen. Das interne Koordinatensystem wurde entsprechend angepasst: von 320×480 auf 320×568.
Für iOS-Entwickler hat sich also seit den Anfängen die Bildschirmbreite nicht verändert. Programmtechnisch waren es immer 320 Points. Das erleichtert die Gestaltung der Benutzeroberfläche, denn man kann sich sicher sein, dass das Layout identisch aussehen wird, egal auf welchem Gerät die App letztendlich läuft. Nur die Höhe kann bei den neuen Modellen etwas größer ausfallen als bei den vorherigen. Dies lässt sich aber recht einfach bewerkstelligen.
Mit dem iPhone 6 hat Apple erstmals in der Geschichte der iPhones den Bildschirm deutlich verändert. Die Geräte sind sichtbar größer als die Vorgänger.
Apple bietet mit AutoLayout eine Möglichkeit, die grafische Oberfläche einer App dynamisch an unterschiedliche Gegebenheiten anzupassen. Dazu ist nicht einmal eine Zeile Code nötig, denn AutoLayout ist in den Interface Builder von Xcode integriert. Man kann darüber nicht nur die seitlichen Abstände festlegen, sondern auch Abhängigkeiten herstellen. Objekte können aneinander ausgerichtet werden, und die Abstände zwischen einzelnen Objekten können definiert werden, z.B. »=10 Points«. Dann wird AutoLayout versuchen, diese so anzupassen, dass ihr Abstand maximal 10 Points oder weniger beträgt. Wir reden hier von Points und nicht von Pixeln. Pixel sind die physischen Bildpunkte im Screen, Points hingegen die »virtuellen Pixel« des logischen Koordinatensystems. Das Verhältnis von Point zu Pixel beträgt je nach Endgerät 1:1 (nicht Retina) ,1:2 (Retina) oder 1:3 (iPhone 6 Plus).
Mit den Density-Independent-Pixeln bei Android verhält es sich ähnlich wie mit dem internen Koordinatensystem unter iOS. Als Entwickler hat man ein normalisiertes Koordinatensystem, mit dem man arbeitet, und je nach Gerät wird es dann später mit einem entsprechenden Faktor multipliziert, z.B. mit 0,75 bei einem ldpi-Bildschirm oder mit 1,5 bei einem hdpi-Bildschirm. Da die Hersteller jedoch immer mehr höher auflösende Bildschirme verbauen, werden ldpi, mdpi und hdpi immer seltener verwendet.
Tablet
Smartphones haben Bildschirmgrößen bis ca. 6 Zoll, Tablets hingegen fangen meistens erst bei 7 Zoll an - nach oben hin offen. Jedoch gibt es kaum Tablets, die größer als 13 Zoll sind. Während kleinere Tablets (<10 Zoll) wegen ihrer Größe gern unterwegs genutzt werden, ist vielen Menschen ein Tablet größer als 10 Zoll dafür zu unhandlich und zu schwer. Diese haben ihren Einsatz eher auf dem heimischen Sofa oder in Meetings. Dort werden sie in erster Linie zum Konsumieren aller Arten von Medien verwendet.
Bei Tablets ist die Vielfalt von Auflösungen nicht ganz so hoch wie bei Smartphones. Die meisten bewegen sich in Größenordnungen zwischen 1.024×600 und 2.560×1.600 Pixeln. Das Nexus 7 beispielsweise hat eine sehr hohe Pixeldichte und eignet sich wegen seines länglichen Bildschirms eher zum Lesen von Büchern oder Betrachten von Filmen. Texte zu schreiben ist im Querformat eher anstrengend, da die virtuelle Tastatur schon die Hälfte des Bildschirms einnimmt und nach Abzug von Menü- und Statusleiste kaum noch Platz bleibt für den Text. Beim iPad hingegen hat man mehr Platz für den Text, dafür kann es passieren, dass sich der Text hinter der Tastatur versteckt. Das passiert besonders dann, wenn der Benutzer die geteilte Tastatur gewählt hat. Diese befindet sich dann nicht mehr am unteren Rand, sondern beliebig weiter oben. Das wäre ergonomisch betrachtet sogar ganz gut, jedoch passen die Schreibprogramme das virtuelle Papier nicht daran an, und es verteilt sich auf den kompletten Platz zwischen oberer und unterer Kante. Schade nur, dass da mitten drauf jetzt eine Tastatur liegt.
Bild 2.3: Unterschiedliche Auflösungen bei Tablets.
Tabelle: Tablet-Screens in Zahlen.
Phablet
Die dritte Gerätekategorie sind die Phablets, manchmal auch Smartlets genannt. Der Name setzt sich - wie Sie wahrscheinlich schon vermutet haben - aus den Begriffen »Smartphone« und »Tablet« zusammen. Damit ist der Name nur die logische Konsequenz dessen, was die Geräte sind - nämlich eine Mischung aus Smartphone und Tablet. Man kann sie ebenso gut als große Smartphones oder kleine Tablets mit Telefonfunktion beschreiben. Ihre Anzahl ist noch überschaubar, aber der Trend geht immer mehr in diese Richtung. Verfolgt man die Entwicklung der iPhones oder der Samsung Galaxy S-Reihe, fällt auf, dass sie in den letzten Jahren immer größer geworden sind. Von 3,5 auf 5,5 Zoll bei den iPhones und von 4 auf 5 Zoll bei den Galaxy S.
Die wohl bekanntesten Vertreter der Phablets sind die Geräte der Samsung-Galaxy-Note-Reihe. Ihr 5,3 bis 5,7 Zoll großer Touchscreen kann...
