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.
3.
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
[…] bestmöglich anzeigen zu können. Dass das jedoch oft mit Schwierigkeiten verbunden ist, zeigen die fünf häufigsten Stolperfallen. Sie sind ein Ansatzpunkt, wie sich Responsive Webdesign umsetzen und verbessern […]
[…] große Ding. Manchmal sind die rasanten Veränderungen neuen technischen Fortschritten wie etwa dem responsiven Design geschuldet. Teilweise gehen sie auch auf Veränderungen in der grundlegenden gestalterischen Ausrichtung […]
Vielen Dank für den interessanten Artikel. Beim Responsive-Design kann man wirklich sehr viele Fehler machen. Da sollte man wirklich alle möglichen Fehlerquellen genauestens beleuchten.
Mit besten Grüßen,
Paul