Das Responsive Layout einer Website: Die optimale Breite von Inhalten auf verschiedenen Endgeräten 


Diese Seite dient dem besseren Verständnis von Responsive Webdesign in der Praxis. 

Beim Responsive Layout sprechen wir über die anteilige Breite, die der Content (bestehend aus einzelnen Elementen wie Texten und Bildern) auf der Website einnimmt. Dieser Text nutzt 3/4 der verfügbaren Breite auf großen Bildschirmen und das Bild rechts mit unserem Logo nutzt 1/4 der Breite.

 

Allerdings braucht der Text mehr Höhe, wenn der Bildschirm schmaler wird und dann entspricht das Layout nicht mehr den Grundsätzen guter Gestaltung.

Das passende Layout für jedes Endgerät ist Einstellungssache

Im Responsive Webdesign werden die Layoutbereichte als Breakpoints bezeichnet. Das Layout kann und sollte bei Bedarf verändert werden, wie Sie auf dem Bild mit den verschiedenen Endgeräten sehen. Auf vielen Websites werden Sie nur einen Breakpoint finden, an dem von einem mehrspaltigen Layout auf ein einspaltiges Layout gewechselt wird. Ein Breakpoint ist meist zu wenig. Je mehr Breakpoints sinnvoll eingesetzt werden desto besser für die Websitebesucher, weil sie unabhängig vom Endgerät eine gut dargestellte Website sehen.


Unser Beispiel für das Layout oben auf dieser Seite:


Auf dem Smartphone mit einer Bildschirmbreite unter 768px wir meist ein einspaltiges Layout verwendet.

Auf Tablets mit einer Displaybreite von mindesten 768px im Hochformat kann man mehrspaltige Layouts nutzen. Im Beispiel nutzen Text und Bild jeweils eine Hälfte der verfügbaren Breite.

Auf Tablets im Querformat stehen über 992px in der Breite zur Verfügung, so dass der Text mit 2/3 Breite und das Bild mit 1/3 Breite dargestellt werden kann. Gleiches gilt für Laptops mit weniger als 1200px Bildschirmbreite.


Wie das Layout der Website sich auf unterschiedlichen Geräten verhält ist immer abhängig vom Inhalt. Wir versuchen den Platz möglichst sinnvoll zu nutzen, um optimale Ergebnisse zu erzielen. 

Wie testet man das Layout einer Website mit Responsive Webdesign?

Am einfachsten kann man das Layout testen, indem man auf einem großen Bildschirm den Webbrowser auf den Fenstermodus einstellt. 

Man kann dann mit der Maus die Breite des Browserfensters anpassen und prüfen, ob die Darstellung der Website sich problemlos an die Fensterbreite anpasst. 


Werden Inhalte zu große oder zu klein dargestellt, liegt meist ein Layout Problem vor, das der Webdesigner durch die Anpassung der Darstellungsregeln beheben kann. 


Häufige Fehler im Responsive Webdesign:

  • Zu große Schrift, der Text läuft über den Bildschirmrand hinaus.
  • Zu groß dargestellte Bilder die verpixelt sind
  • Zu klein dargestellte Bilder, auf denen man nichts erkennt
  • Zu große oder zu kleine Abstände von Inhalten zueinander
  • Bilder und Text nebeneinander auf Smartphones 
  • mehrere Bilder untereinander ohne erklärenden Text

Wie vermeidet man Darstellungsfehler im Responsive Webdesign?

Bei der Erstellung von Websites gibt verschiedene Gestaltungsansätze. Desktop first und Mobile first sind die üblichen Webdesign-Prozesse.


Desktop First bedeutet, dass der Internetauftritt für große Bildschirme geplant und gestaltet wird. Die Anpassung der Darstellung auf kleineren Bildschirmen erfolgt nachträglich.


Mobile First bedeutet, dass die Website zuerst für mobile Endgeräte wie Smartphones geplant und gestaltet wird. Inhalte auf kleinem Raum sinnvoll anzuordnen und zu gestalten ist zwar aufwändiger, verspricht jedoch eine wesentlich höhere Benutzerfreundlichkeit der Website.

Die anschließende Gestaltung der Website für größere Bildschirme ist dann einfacher und geht schneller.


Für Grafiker und Webdesigner sind beide Gestaltungsansätze aufwändig und erfordern Erfahrung im Bereich Responsive Webdesign.

Links zu weiteren Responsive Webdesign Kategorien

Responsive Schrift

Responsive Styles 

Responsive Bilder

Ihre Agentur für Responsive Webdesign, SEO und Webprogrammierung aus Gütersloh

Erneuerung von Websites innerhalb weniger Tage

SEO für gute Platzierung in Suchmaschinen