Das Responsive Layout einer Website: Die optimale Breite von Inhalten auf verschiedenen Endgeräten
Beim Responsive Layout sprechen wir über die anteilige Breite, die bestimmter Inhalt 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.
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