Beim Responsive Design geht es um mehr als nur um die Gestaltung von Websites für unterschiedliche Bildgrößen – zahlreiche Aspekte spielen dabei eine wichtige Rolle. Developer vergessen beim Entwickeln oft, dass die Nutzer nicht zwingend das gleiche Gerät oder den gleichen Bildschirm nutzen wie sie selbst. Das Ignorieren von Responsive Design führt dann dazu, dass man der Ansicht ist, ein responsives Meisterwerk geschaffen zu haben – bis man es sich beispielsweise auf einem mobilen Gerät ansieht: Das Design fällt auseinander, Text verschiebt sich, Animationen laufen rucklig und Formulare sehen überhaupt nicht mehr so aus, wie sie entworfen wurden.

Die 5 häufigsten Stolperfallen beim Responsive Design

Solche Probleme führen natürlich sowohl beim Entwickler als auch beim User zu Unmut. Um die leidige Fehlersuche und aufwendiges Re-Design zu vermeiden, stellt Yaphi Berhanu die fünf häufigsten Stolperfallen beim Responsive Design vor und gibt Tipps, wie sich diese vermeiden lassen.
1.

Unerwartete Schriftgrad-Änderungen

Dreht man ein Smartphone auf die Seite, kann das die Schriftgröße der Website ändern und so das komplette Layout ruinieren. Das Problem tritt besonders häufig mit Fixed-Position-Elements wie Navigationsleisten und Menüs auf. Der einzige Weg den Fehler zu beheben, ist das Aktualisieren der Site.
Nutzt man aber folgenden Code, wird verhindert, dass sich die Schriftgröße ändern kann:

html {
/* Prevent font scaling in landscape while allowing user zoom */
-webkit-text-size-adjust: 100%;
}

Der Code hebt den Ausgleich der Schriftgröße in Landscape auf.
2.

Unerwünschte Formularstile

Tablets und Smartphones besitzen oft vorgegebene Stile, die das Formulardesign durcheinander bringen. Um das zu verhindern, hilft der richtige Code:

input[type=text], button, select, textarea{
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0px;
}

Je nachdem, welches Stil-Element die Probleme verursacht, kann der Code angepasst werden. Will man beispielsweise alle Input-Felder zurücksetzen, ändert man input[type=text] in input. Allerdings beeinflusst diese Code-Änderung auch alle Checkboxen und Radio Buttons.

Emulatoren-Fehler (die gar keine sind)

Testet man eine Website mit einem Browser-basierten Mobile-Emulator, kann das zu einem Problem mit dem Emulator selbst führen: Der Emulator zeigt einen Fehler an, obwohl mit dem Code alles in Ordnung scheint. Am besten sollte das Problemgebiet isoliert und überprüft werden, ob der Code an sich funktioniert. Ist das der Fall, sollte der Code auf einem mobilen Device getestet werden. Funktioniert auch da alles, ist mit großer Wahrscheinlichkeit der verwendete Emulator das Problem.
4.

Rucklige Animationen

Laufruhige Animationen auf einem Desktop-PC müssen nicht zwangsläufig auch auf Mobile Devices glatt laufen. Hierbei spielt vor allem die Performance eine große Rolle. Normalerweise können Browser die Properties translate, scale, rotate, und opacity leistungsfähig animieren:

transform: translate(15px, 40px); /* shift left 15px and down 40px */
transform: scale(2); /* scale to 2 times original size */
transform: rotate(30deg); /* rotate 30 degrees */
opacity: 0.5; /* set opacity at 0.5 */

Stellt man sich eine Website wie einen Esstisch vor, ist das Animieren von Dingen in der obersten Schicht mit dem Verschieben eines einzelnen Löffels gleichzusetzen. Möchte man aber etwas in den unteren Schichten animieren, ist das so, als wolle man die gesamte Tischdecke mitsamt Geschirr verschieben. Es ist möglich, aber schwieriger, da auch die oberen Schichten mitgezogen werden.

Um den Browsersupport für Animationen – im Speziellen auf iOS-Devices – zu maximieren, muss das –webkit--Prefix auf die transform-Properties angewendet werden:

-webkit-transform: rotate(30deg);
transform: rotate(30deg);

5.

Schlecht registrierte Touch-Events

Oftmals wird bei der Entwicklung vergessen, dass die Koordinaten eines Touch-Events anders gespeichert werden als die eines Click-Events. Auf manchen Devices (iOS) sind die Touch-Koordinaten am gleichen Ort wie die Click-Koordinaten gespeichert – auf anderen Devices (Android) befinden sie sich an unterschiedlichen Orten. Alle Touch-Koordinaten lassen sich in der Touch-Event-Data jedes Mobile Devices‘ finden.

Für Touch-Events sollte e.touches[0].pageX anstelle von e.pageX genutzt werden, um die x-Koordinate abzurufen. Um die y-Koordinate zu erhalten, müssen alle X durch Y ersetzt werden. Für einen Mausklick erhält man dann solche Koordinaten:

document.onclick = function(e){
var x = e.pageX; // get x coordinate of click
var y = e.pageY; // get y coordinate of click
console.log('x = ' + x + ', y = ' + y); // show coordinates in console
}

Für ein Touch-Event sehen die Koordinaten beispielsweise so aus:

document.ontouchstart = function(e){
var x = e.touches[0].pageX; // get x coordinate of touch
var y = e.touches[0].pageY; // get y coordinate of touch
console.log('x = ' + x + ', y = ' + y); // show coordinates in console
}

Auch auf Devices, auf denen e.pageX und e.pageY nicht funktioniert, sind diese dennoch verfügbar; ihr Wert für Touch-Events bleibt aber immer 0. Falls man vergisst, wo die Koordinaten für ein Event abgelegt sind, hilft ein Mobile-Emulator. Am wichtigsten beim Aufspüren von Mausklicks oder Touch-Events ist nämlich der korrekte Zugriff auf die Koordinaten.

Fazit

Eine positive User Experience und Accessibility für alle User auf allen Devices zu bieten, ist das Ziel des Responsive Designs. Dass das jedoch oft mit Schwierigkeiten verbunden ist, zeigen die vorgestellten fünf häufigsten Stolperfallen. Sie sind ein Ansatzpunkt, wie sich Responsive Design umsetzen und verbessern lässt. Diese Tipps helfen Ihnen hoffentlich beim Erstellen eines Responsive Designs und sparen Zeit und Nerven.

Da die Darstellung einer Website auf unterschiedlichen Devices auch immer vom Content abhängt, gibt es keine allgemeingültige Regel. Weitere Tipps und Tricks finden Sie im Artikel „Neun Grundprinzipien von Responsive Webdesign„.

Webperformance und Page Speed 2021

mit Sven Wolfermann (maddesigns)

UX Design: Kitsch – du willst es doch auch!

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

SEO loves PR: Wie zwei Disziplinen gemeinsam erfolgreich sein können

mit Anne Kiefer (sexeedo GmbH)

 

Advanced Web Pentesting

mit Christian Schneider (Schneider IT-Security)

What Star Wars Taught Me About Secure System Design

mit Anne Oikarinen (Nixu Corporation)

Aufmacherbild: Computer mouse trap von Shutterstock / Urheberrecht: Alan Bailey