Responsive Webdesign Layout Beispiele

Je nach Grösse des Bildschirms werden sich diese zwei Spalten anpassen. Unter 900 Pixel Breite bricht die zweite Spalte auf die nächste Zeile um. Dies passiert um die Leserlichkeit bei kleineren Auflösungen zu erleichtern und den ganzen Text «durchatmen» zu lassen.

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

Zeilenlänge (ideal 75 Zeichen pro Zeile):

1­2­­3­­4­­5­­6­­7­­8­­9­­1­1­2­­3­­4­­5­­6­­7­­8­­9­­2­­1­2­­3­­4­­5­­6­­7­­8­­9­­3­­1­2­­3­­4­­5­­6­­7­­8­­9­­4­­1­2­­3­­4­­5­­6­­7­­8­­9­­5­­1­2­­3­­4­­5­­6­­7­­8­­9­­6­­1­2­­3­­4­­5­­6­­7­­8­­9­­7­­1­2­­3­­4­­5­­6­­7­­8­­9­­8­­1­2­­3­­4­­5­­6­­7­­8­­9­­9­­1­2­­3­­4­­5­­6­­7­­8­­9­­0­­­2­­3­­4­­5­­6­­7­­8­­9­­1­1­2­­3­­4­­5­­6­­7­­8­­9­­2­­1­2­­3­­4­­5­­6­­7­­8­­9­­3­­1­2­­3­­4­­5­­6­­7­­8­­9­­4­­1­2­­3­­4­­5­­6­­7­­8­­9­­5­­1­2­­3­­4­­5­­6­­7­­8­­9­­6­­1­2­­3­­4­­5­­6­­7­­8­­9­­7­­1­2­­3­­4­­5­­6­­7­­8­­9­­8­­1­2­­3­­4­­5­­6­­7­­8­­9­­9­­1­2­­3­­4­­5­­6­­7­­8­­9­

Spannend an diesem Beispiel ist; die Bilder passen sich wie die Texte auch in der Breite an, die Proportionen der Bilder bleiben aber gleich. Somit werden die zwei Bilder, bis zu 900 Pixel Bildschirmbreite, nebeneinander skaliert, sobald es kleiner wird, bricht die zweite Spalte um und wird 100% in der Breite.

Layout Beispiel links
Layout Beispiel rechts

Auch hier wird das Bild unter 900 Pixel Breite umgebrochen. Die Bilder befinden sich dann ober- oder unterhalb des Textes. Somit nehmen Bild und Text jeweils 100% der Bildschirmbreite ein.

Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.

Responsive Webdesign 2 Spalten
Responsive^Webdesign Text rechts

Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten.