14. Dezember 2015
Das iPad Pro stellt bisherige Annahmen auf den Kopf
Computer haben grössere Bildschirme als Tablets und diese wiederum grössere Bildschirme als Smartphones. In den letzten Jahren war dies eine ziemlich gegebene Sache. Mit dem iPad Pro, das vor wenigen Wochen auf den Markt gekommen ist, ist diese Tatsache Vergangenheit. Das hat auch Auswirkungen für Webdesigner.
Natürlich gibt es schon länger grössere Tablets (z.B. das Samsung Galaxy 12.2") und Tablet-Laptop-Hybride wie das Microsoft Surface Pro. Mit dem iPad Pro hat Apple nun ein Gerät auf den Markt gebracht, das (kraft der Dominanz von Apple) den übergrossen Tablets den Weg ebnen könnte.
Das iPad Pro mit seinem 12,9“ Bildschirm verfügt über einen Viewport 1366 x 1024 Pixeln (bei einer Auflösung von 2732 x 2048 Pixel) und hat somit mehr Platz zur Verfügung als kleinere Laptops (beispielsweise das 12“ MacBook mit 1152 x 720 Viewport mit einer Auflösung von 2304 x 1440 Pixeln).
Bildschirmgrösse sagt nichts über Touch-Events aus.
Responsive Websites sind auf kleineren Bildschirmen heutzutage meistens konsequent für Touch-Events optimiert. Auf grösseren Bildschirmen ist das aber oft nicht der Fall. Grosse Layouts werden meist für Maus und Cursor optimiert: So sind MouseOver-Interaktionen (z.B. bei Navigationen) noch weit verbreitet. Website-Grösse und Input-Optionen (Maus, Finger oder auch Stift, etc.) haben aber nicht wirklich etwas miteinander zu tun.
Da das iPad Pro und andere grosse Tablets diese vermeintliche Verbindung nun definitiv aufheben, ist es um so wichtiger, dass Webdesigner nicht anhand der Grösse entscheiden, ob das Interface für Touch-Interaktionen optimiert wird oder nicht.
Als Konsequenz daraus sollten MouseOver-Interaktionen immer unabhängig der Bildschirmgrösse und vor allem als Bonus eingesetzt werden.
Touch-Fähigkeit via Modernizr entdecken
Der Einsatz der Modernizr-Library ist eine Möglichkeit, um Touch-Events zu entdecken. Modernizr fügt dann dem HTML-Tag die Klassen .no-touchevents oder .touchevents hinzu (bei Modernizr 2.0 waren es noch .no-touch bzw. .touch).
So lassen z.B. für Touch-Devices die Interface-Elemente einfach grösser darstellen.
.button {
color: #FFF;
display: inline-block;
}
.touchevents .button {
background: red;
padding: 10px 20px;
}
.no-touchevents .button {
background: green;
padding: 5px 10px;
}
.no-touchevents .button:hover {
background: blue;
}
See the Pen eJpxjr by Marc Rinderknecht (@kobebeef) on CodePen.
CSS4 Hover-MediaQuery
In CSS4 gibt es neu ein Hover-MediaQuery und bietet somit die Möglichkeit die MouseOver-Fähigkeit eines Browsers zu testen.
Die neueste Generation von Browsern wie Chrome (ab v. 41), Safari (ab v. 9) und Microsoft Edge (ab v. 12) unterstützen dieses Hover-MediaQuery. Einzig Firefox ist noch nicht so weit. Siehe Can I Use__?
@media (hover) {
.button {
background: green;
}
.button:hover {
background: blue;
}
}
@media (hover:none) {
.button {
background: red;
}
}
See the Pen advXVa by Marc Rinderknecht (@kobebeef) on CodePen.
Serverseitige Erkennung
Die serverseitige Erkennung der Gerätekategorie (z.B. via Mobile_Detect.php) kann oft hilfreich sein und ist in der Regel sehr schnell und einfach implementiert.
Das grosse ABER: Wir erkennen zwar die Gerätekategorie, machen aber unter Umständen falsche Annahmen über die Fähigkeiten des Geräts. Zudem sollte die eingesetzte Device-Detection-Library konsequent und regelmässig aktualisiert werden.
Finger-friendly Design
Klickbare Elemente sollten Finger-freundlich und somit immer genügend gross sein. Die Apple Human Interface Guidelines empfehlen eine Grösse von 44x44 Pixel. Die Tasten der iOS-Tastatur sind allerdings lediglich 32x43 Pixel gross - und wohl das absolute Minimum für klickbare Elemente. Zentrale Funktionen einer Website oder App sollten tendenziell grosszügiger behandelt werden.
Finger weg von Device-Spezifischen MediaQueries
Manche Designer verwenden Device-spezifische MediaQueries. Wie zum Beispiel den folgenden Code:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* STYLES */
}
Damit ist man nun einige Jahre gut gefahren, um iPads und iPad minis zu erkennen. Man hat dabei aber Tablets anderer Hersteller ignoriert und ist auch auf das iPad Pro nicht vorbereitet. Device-spezifische MediaQueries gehören in die Mottenkiste eines jeden Webdesigners.
Below the Fold is above the Fold is below the Fold
«Als above the Fold» wird bei Websites der Bereich bezeichnet, der für User auf den ersten Blick sichtbar ist und ohne dass die User scrollen müssen. «Above the Fold» war seit jeher ein schwammiger Begriff, denn der auf den ersten Blick sichtbare Bereich ist bei einem Laptop oder einem grossen Bildschirm wie bei einem iMac sehr unterschiedlich gross.
Viele Tablets verfügen über einen Bildschirm im 4:3 Format, während sich bei Laptops eher 16:9 Formate durchgesetzt haben. Somit sind auf einem Tablet im Landscape-Modus plötzlich mehr Inhalte als auf einem ähnlich grossen Laptop sichtbar.