Media Queries und der Mobile-First-Ansatz: darauf muss man bei der Nutzung achten
Kommentare

Responsive Webdesign hat heutzutage einen enormen Einfluss auf die Anstrengungen, die Webdesigner beim Erstellen ihrer Designs und Implementierungen aufbringen müssen. Kein Wunder, immerhin nutzen immer mehr User ihr Smartphone oder Tablet für den schnellen Zugriff auf das Internet.

Um ein gut funktionierendes Responsive Design zu erstellen, dürfte kaum ein Weg am Einsatz von Media Queries vorbeiführen – gerade auch bei der Umsetzung eines Mobile-First-Ansatzes. Worauf man beim Schreiben von Mobile-First Media Queries achten muss und welchen Vorteil der Mobile-First-Ansatz überhaupt hat, erklärt Chris Poteet.

Mobile-First ist nicht gleich Mobile-First

Mobile-First ist nicht gleich Mobile-First. Während es dabei zwar immer darum geht, auf Mobile-User abgestimmte Designs zu erstellen, gibt es verschiedene „Schattierungen“ des Mobile-First-Ansatzes, etwa das Mobile-First-Design oder die Mobile-First-Implementierung.

Während sich das Mobile-First-Design vor allem auf die Beschränkungen von Mobile Devices – insbesondere die Größe des Displays – bezieht, meint die Mobile-First-Implementierung die technischen Anforderungen von Responsive Designs. Dazu sagt Chris Poteet:

when we actually implement the interface (prototype or production), we start out designing at the smallest viewport possible […] and we then add styles and sometimes other enhancements as the viewport increases.

Richtige Anordnung der Media Queries

Media Queries lassen sich auf unterschiedliche Arten strukturieren. Ein häufiges Problem ist dabei, dass Webdesigner zunächst die Styles einzelner Elemente definieren und sie erst dann für kleinere Viewports mit Media Queries „ausschalten“, weil sie auf den kleineren Displays nicht korrekt angezeigt werden würden.

Dabei lässt sich das ganz leicht umgehen, indem erst der Breakpoint mit dem das Media Query definiert wird und dann die benötigten Styles hinzugefügt werden. So lässt sich gleichzeitig auch auf viel unnötiges CSS verzichten und die Performance der Seite verbessern.

Ein wenig komplexer erweist sich die Anordnung, wenn man das sogenannte DOM Source Ordering bedenkt. Gemeint ist damit die Art und Weise, auf die ein Dokument aufgrund der DOM-Struktur gerendert wird – nämlich von oben nach unten. Vor allem beim Mobile-First-Design und dessen Implementierung müssen sich Webdesigner dessen Auswirkungen bewusst sein, damit die einzelnen Content-Elemente am Ende auch in kleinen Viewports in der richtigen Reihenfolge dargestellt werden.

Chris Poteet verdeutlicht die Auswirkungen der Anordnung von Media Queries mit verschiedenen Code-Beispielen und zeigt auch, wie sich Media Queries mit Präprozessoren wie Sass verwalten lassen. Damit wird deutlich, dass sich der Mobile-First-Ansatz bei der Nutzung von Media Queries in Responsive Webdesigns auf jeden Fall lohnt, um typische Probleme mit der Darstellung in kleineren Viewports zu vermeiden und so am Ende für eine bessere User Experience sorgen kann.

Aufmacherbild: Responsive web design on mobile devices phone, laptop and tablet pc von Shutterstock / Urheberrecht: scyther5

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -