öffentlich
Redaktion Druckversion

Responsives Layout für Webseiten

4.4
(5)
Beitrag bewerten
Ersten Kommentar schreiben
Stand: 14. Dezember 2012

Gestatten: Responsive Webdesign

Um einen ersten Eindruck zu bekommen, was das Responsive Webdesign leistet, sollten Sie sich einmal ein Beispiel dazu im Web ansehen. Der Trick dabei: Wenn Sie die Größe des Browserfensters verändern und entsprechend klein ziehen, sehen Sie das Layout so, wie es auf einem Smartphone dargestellt wird.

Ein schönes Beispiel für ein Responsive Layout ist http://bradfrostweb.com/demo/mobile-first/. Die unterschiedlichen Versionen zeigen sich, wenn Sie die Größe des Browserfensters verändern.

Webseite von Brad Frost in großem BrowserfensterDie Beispielwebseite bei viel verfügbarem Platz

Beispielseite von Brad Frost in schmalem Browserfenster... und die Webseite bei wenig verfügbarem Platz

Weitere Beispiele, die einen Besuch lohnen, sind:

  • Auch die Seite der ISO-Organisation (http://www.iso.org/iso/home.html) ist responsive gestaltet und zeigt, dass diese Technik nicht nur bei Blogs und privaten Homepages angesagt ist.

  • Sehr witzig spielt mit den Möglichkeiten der unterschiedlichen Formatierungen die Seite 320 and up (http://stuffandnonsense.co.uk/projects/320andup/), hier wird die im oberen Teil dargestellte Hauptperson je nach Bildschirmgröße ausgewechselt: Bei kleinem Bildschirm ist es ein Junge, bei größerem Bildschirm ein Mann … So etwas ist eher Spielerei, zeigt aber gleichzeitig, was alles möglich ist.

Den Begriff "Responsive Webdesign" hat Ethan Marcotte in einem vielbeachteten Artikel bei A List A Part (http://www.alistapart.com/articles/responsive-web-design/) geprägt. Für ihn gehören drei Komponenten zu einem reagierenden Design:

  • Flüssige Layouts, d.h. Layouts, die für Breitenangaben auf Prozent setzen

  • CSS3-Media Queries: Über diese können Sie CSS-Angaben gezielt je nach Eigenschaften des Ausgabegeräts machen. So können Sie dafür sorgen, dass bestimmte CSS-Angaben nur gelten, wenn mehr als 600px zur Verfügung stehen.

  • Flexible Bilder: Normalerweise haben Bilder feste Größen. Das muss man ändern, damit sie beispielsweise nicht aus einer flexiblen Spalte herausragen.

Zwei weitere Komponenten brauchen Sie in der Praxis:

  • Damit Smartphones und andere Geräte die standardmäßig aktivierte Verkleinerung der Webseiten ausschalten, benötigen Sie eine meta-Angabe, die die Breite des Viewports steuert.

  • Zuletzt brauchen Sie noch ein bisschen Nachhilfe mit JavaScript, damit die Layoutanpassungen auch auf dem Internet Explorer vor Version 9 funktionieren.

Sehen wir uns die Zutaten im Detail an.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Downloads zu diesem Beitrag

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren