Responsive Design und die gängigsten „Auflösungen“ in Deutschland

Anpassungsfähige Websites für alle Geräte

In der heutigen, digital vernetzten Welt ist das Internet fester Bestandteil unseres Alltags. Die zunehmende Anzahl verschiedener Geräte und Bildschirmgrößen stellt Webdesigner und Entwickler jedoch vor die Herausforderung, Websites so zu gestalten, dass sie auf allen Geräten optimal dargestellt werden. In diesem Blogartikel werfen wir einen Blick auf das Responsive Design und die gängigsten Bildschirmauflösungen hier bei uns in Deutschland.

Responsive Design ist ein Ansatz im Webdesign, bei dem eine Website so entwickelt wird, dass sie sich automatisch an die Bildschirmgröße und -auflösung des Endgeräts anpasst, auf dem sie angezeigt wird. Dies wird erreicht, indem flexible Layouts, Bilder und CSS-Medienabfragen verwendet werden, um die Darstellung der Seite entsprechend der Eigenschaften des betrachteten Geräts zu ändern.

Die gängigsten Bildschirmauflösungen in Deutschland variieren, abhängig von den verwendeten Geräten. Laut Google sind die häufigsten Auflösungen auf Desktop-Computern 1920×1080, 1366×768 und 1440×900. Bei Laptops sind es 1280×800, 1366×768 und 1440×900. Bei Tablets sind die üblichen Auflösungen 768×1024, 800×1280 und 1280×800. Bei Smartphones hingegen dominieren 360×640, 375×667 und 414×896.

Um eine Website für diese verschiedenen Auflösungen zu optimieren, müssen Designer und Entwickler einige grundlegende Prinzipien des Responsiven Designs beachten. Dazu gehören:

  1. Fluid Grids: Die Verwendung von flexiblen, prozentualen Einheiten für Layouts statt fixer Pixelwerte ermöglicht eine dynamische Anpassung an unterschiedliche Bildschirmgrößen.
    (Das Bild für diesen Beitrag soll das „Barrierefreie Anzeige“ verdeutlichen)
  2. Flexible Bilder: Bilder sollten so eingestellt werden, dass sie ihre Größe automatisch anpassen und nicht über den Container hinausragen, in dem sie angezeigt werden.
  3. Medienabfragen: Mit CSS-Medienabfragen können unterschiedliche Stile für verschiedene Bildschirmgrößen und -auflösungen angewendet werden. Dies ermöglicht eine präzise Anpassung der Darstellung an die jeweilige Bildschirmgröße.
  4. Responsive Navigation: Die Navigation ist ein entscheidender Aspekt jeder Website oder Onlineshops. Bei responsiven Designs sollte die Navigation so gestaltet werden, dass sie auf kleineren Bildschirmen, wie Smartphones und Tablets, leicht zugänglich und benutzerfreundlich ist. Hierzu können beispielsweise mobile Menüs (auch als „Hamburger-Menüs“ bekannt) oder Dropdown-Menüs verwendet werden, die sich bei Bedarf ein- und ausklappen lassen.
  5. Performance-Optimierung: Die Ladezeiten einer Website sind für die Benutzererfahrung und die Suchmaschinenoptimierung (SEO) von entscheidender Bedeutung. Bei responsiven Designs ist es wichtig, die Größe von Dateien wie Bildern und Skripten zu minimieren und den Code effizient zu gestalten, um eine schnelle Ladezeit auf allen Geräten zu gewährleisten. Techniken wie das Lazy Loading von Bildern oder die Verwendung von Content Delivery Networks (CDNs) können dazu beitragen, die Performance zu verbessern. Hierbei müssen wir auf die neue DSGVO hinweisen, nicht jedes CDN ist derzeit DSGVO-konform.

Fazit:

Responsive Design ist unerlässlich, um eine optimale Benutzererfahrung auf allen Geräten und Bildschirmauflösungen zu gewährleisten. Indem Webdesigner und Entwickler die Prinzipien des responsiven Designs anwenden und die gängigsten Auflösungen berücksichtigen, können sie Websites erstellen, die für die Mehrheit der Nutzer ansprechend und zugänglich sind.

Eine kleine Zugabe von meiner Seite noch.

Ich verwende 2 Monitore zum Arbeiten, mein Haupt-Monitor für das Webdesign / Entwicklung mit einer Auflösung von 2560 x 1440 und der zweite mit einer Auflösung von 1920×1080, mein zweiter Setup ist ein Hauptmonitor mit einer 4k Auflösung von 3840 x 2160 für Grafikdesign und 3d Modeling und ein Full HD Curved 1920×1080 für sonstige Arbeiten. Die beiden Varianten zeigen wie unterschiedlich die Nutzung sein kann.

Eduard Spadi – Webdesigner bei ProjectPartner Kleeschulte GmbH

Quellenangabe:

Google. (n.d.). Bildschirmauflösungen in Deutschland. https://www.google.com

Eine kleine Statistik noch auf den Weg!

Quelle StatCounter:

  • 1920 x 1080 wird genutzt von 41,77% der Benutzer
  • 1366 x 768 wird genutzt von 35,07% der Benutzer
  • 1440 x 900 wird genutzt von 5,07% der Benutzer
  • 1280 x 1024 wird genutzt von 4,17% der Benutzer
  • 2560 x 1440 wird genutzt von 3,79% der Benutzer
  • 1600 x 900 wird genutzt von 2,28% der Benutzer
  • Andere Auflösungen: 8,85%

mit anderen Auflösungen sind z.B. alte Nokias gemeint :) und super heftig Monitore wie z.B. 8k Auflösung.