Media Queries Breakpoints für responsives Webdesign 2021

Media Queries Breakpoints spielen eine immer wichtigere Rolle im responsiven Webdesign. In diesem Artikel berichten wir über die Standards für 2021.

Bonus: Viewportgrößen-Tabelle.

Responsive Webdesign – zeitgemäße Lösung

Die Internetnutzung wird zunehmend von mobilen Endgeräten dominiert, aber neben Smartphone und Tablet, müssen beim Design auch Laptops und Desktop-Computer berücksichtigt werden. Dazu vergrößert sich die Palette der auf dem Markt erhältlichen, internetfähigen Geräte stetig. Theoretisch kann eine Webseite mit über 200 verschiedenen Auflösungen angezeigt werden und im Idealfall wird sie in jeder Auflösung übersichtlich und nutzerfreundlich dargestellt. Das stellt eine Top-Usability sicher.

Beim responsiven Webdesign handelt es sich um eine Technik, die flexibel auf die Größe und die Eigenschaften des genutzten Gerätes reagiert.

Im CSS-Code werden Breakpoints gesetzt, die bestimmte Auflösungen definieren, an denen das Seitenlayout sich verändern soll. So kann zum Beispiel eingestellt werden, dass ein seitlicher Werbeblock automatisch unter den Haupttext springt sobald die Viewport-Breite kleiner als 500 Pixel wird. Um das für jeden Bildschirm exakt passende Seitenlayout zuzuordnen, fragen sogenannte Media-Queries den Gerätetyp, sowie die spezifischen Eigenschaften eines Gerätes ab.

Warum ist responsives Webdesign 2021 wichtiger denn je?

Die Nutzung mobiler Endgeräte nimmt stetig zu

Schwer les- und bedienbare Seiteninhalte stören die Nutzer und erhöhen die Absprungrate. Damit werden Chancen vergeben, denn jeder Besucher einer Website erhöht den Traffic und ist ein potenzieller Kunde. Ob Ihre Seite häufig von mobilen Geräten aufgerufen wird, können Sie mit Analyse-Tools überprüfen.

Lassen Sie eine neue Website entwickeln oder planen einen Relaunch?

Nutzen Sie die Chance und setzen Sie beim gesamten Entwicklungsprozess konsequent auf responsives Webdesign und aktuelle Technik.

Suchmaschinenoptimerung (SEO):

Google, Bing und andere Suchmaschinen bewerten responsive Websites deutlich besser, als Sites die diesen Ansatz nicht verfolgen. Eine gute Position im Organischen-Listing ist ein wesentlicher Baustein im Online-Marketing, denn je besser eine Website in den Suchmaschinenergebnissen positioniert ist, desto häufiger wird sie aufgerufen. Insbesondere bei der mobilen Suche, werden Websites bevorzugt, die auch für mobile Endgeräte optimiert wurden.

Aktuelle Technik, modernes Design:

Mit Hilfe von aktuellem, responsiven Webdesign strahlt Ihre Website Professionalität und technische Kompetenz aus.

Gute Bedienbarkeit (Usability):

Ein Besucher der eine Website gerne besucht, verweilt länger, nutzt die auf der Seite angebotenen Leistungen und Informationen, kauft Waren oder nutzt eine andere CTA. Mit dem Responsive Webdesign wird eine Webseite auf allen Displaygrößen optimal angezeigt. Der Besuch der Website macht mehr Spaß und bedeutet eine positive Nutzer-Erfahrung (engl. User Experience). Besucher werden wiederkehren, sie weiterempfehlen und das ist genau das, was wir erreichen möchten.

Zwei unterschiedliche Vorgehensweisen bei der Umsetzung

Die Umsetzung von Responsive Design erfolgt mit HTML5 und CSS3, dann stehen Media Queries zur Verfügung, mit denen Informationen vom Endgerät erfragt werden können.

Max-Width

Breakpoints mit max-width beginnen mit dem Layout für den größten Monitor, also beim Design für den Desktop, und überschreiben nach und nach Stile, um die Seiten an immer kleinere Displaygrößen anzupassen.

Min-Width

Min-width ist intuitiver und besser lesbar.

Endgeräte

Bei der Planung müssen keine „typische Monitorgrößen“ herausgesucht werden – es ist schlicht unmöglich einzelne Gerätetypen vom iPhone 8-XII, die Samsung-Familie mit Handys und Tablets, die iPad-Modelle bis hin zum Google Pixel gezielt anzusprechen. Es ist sinnvoller zwei oder drei Breakpoints zu nutzen, an denen das Layout der Seiten umspringt.

Bei der CSS-Erstellung für mobile Geräte ist es wichtig zu beachten, dass die Nutzer die Smartphones und Tablets auch drehen können. Wenn der Benutzer das Gerät dreht, müssen Schriftgrößen, Bildgrößen und das Layout u.U. angepasst werden. Diese Abfrage regelt Orientation: landscape (Querformat) bzw. Orientation: portrait (Hochformat).

Die Anzahl von Viewportgrößen ist unüberschaubar geworden, besonders bei Android-Geräten, aus diesem Grund fassen wir exemplarisch die Information von einigen Apple-Geräten zusammen.