Vorheriger Artikel Nächster Artikel

Sponsored Post: Responsive Webdesign mit CSS3

Heutzutage werden Websites mit den unterschiedlichsten Endgeräten besucht. Vom traditionellen Desktop PC über Laptops, , bis hin zu iPhones, und Fernsehgeräten samt Spielekonsole. Wie gelingt es aber, dass auch jeder Besucher die Website auf seinen Bildschirm angepasst präsentiert bekommt? Dieser Artikel gibt eine Einführung in Responsive Webdesign mit .

Sponsored Post: Responsive Webdesign mit CSS3

(Web)Seitenverhalten

Die meisten Websites haben ein Problem mit der Vielzahl an Endgeräten. Das Problem liegt im Design des Layouts begründet. Lange Zeit war es Mode, ein fixed Layout zu benutzen. Meist hat man hierzu im CSS folgendes definiert:

.page {
   margin: 0px auto;
   width: 980px;
}

Die CSS Klasse „.page“ zentriert das jeweilige Element in die Seitenmitte mit einer Breite von 980 Pixeln. Im unteren Beispiel ist die Klasse auf ein „div“ Element angewendet.

Das funktioniert super, solange die Mindestbreite des Browsers 980 Pixeln entspricht. Als zweites Beispiel nehmen wir ein Blog. Das Beispiel-Blog verwendet WordPress und das Theme hat folgende Layout-Definition

#wrapper { width: 960px; margin: 30px auto;
background: #fff; border: 1px dotted #000;
}
#main { width:610px; padding: 2em 30px; }
.col-full { width: 960px; margin:0 auto; }
#main.fullwidth, .layout-full #main {
   width: 900px; margin:0 auto;
}
#sidebar { width:290px; background: #f2f2f2; }
#sidebar .secondary { width:140px; }
.entry img { max-width:610px; }

Dies definiert, dass der eigentliche Seiteninhalt in zwei Spalten mit einer Gesamtbreite von 960 Pixeln angezeigt wird.

Oops, my layout sucks!

Smartphones haben in der Regel keine 960 Pixel breiten Displays. Sie bedienen sich aus diesem Grund für die Anzeige eines einfachen Tricks. Websites werden in die Smartphone-Auflösung reinskaliert. Besucher erhalten in der Regel die identische Seite wie auf einem Desktop angezeigt, wenn keine spezielle mobile Version der Seite vorliegt. Auf einem Lumia 800 wird die Seite auf eine Größe von 800 x 480 Pixeln heruntergerechnet.

Das funktioniert eigentlich ganz gut, man muss lediglich für die Lesbarkeit in den Text zoomen. Besser wäre jedoch eine Version der Website, die sich optimal auf diesem Display darstellt. Und genau hier kommt Responsive Webdesign ins Spiel.

Responsive Webdesign

Eine vereinfachte Definition von Responsive Webdesign lautet:

Responsive Webdesign ist die Anpassbarkeit einer Webseite auf verschiedene Formfaktoren. Dabei bleiben alle wesentlichen Elemente visuell und funktional erhalten.

Testen wir mal die Responsiveness des Beispiel-Blog. Im Web existieren verschiedene Online Tools, um Responsive Webdesign zu testen. Eines davon ist von Matt Kersley. Sein Tool für das Responsive-Webdesign-Testing zeigt die angegebene URL in verschiedenen Auflösungen.

Das Tool emuliert keine Endgeräte, sondern dient vielmehr dazu, schnell ein Gefühl dafür zu bekommen wie sich die eigene Webseite in verschiedenen Screen-Größen verhält. Das Resultat für das Blog: Absolut nicht responsive.

Besser machen

Beispielhaft soll eine Textbasierte Seite mit Hilfe von ein paar CSS Hilfsmitteln „Responsive“ gemacht werden. Dazu nimmt man das „article“-Elemente mit folgenden Inhalt:

<article>
   <h2>Überschrift</h2>
   <p>Inhalt...</p>
<article>

Mit einigen Lorem Ipsum Texten und einer Hintergrundgrafik die oben rechts positioniert ist sieht die Website wie folgt aus:

Wenn man mit neuen CSS-Techniken arbeitet, kommt man noch nicht um Vendor-Prefixe herum. Damit spricht man speziell eine noch nicht final standardisierte Implementierung eines Browsers an. Damit das Beispiel nicht zu umfangreich wird, berücksichtigt man vorerst lediglich den Internet Explorer 10 und Webkit-fähige Browser wie Chrome und Safari.

Einfaches Layout mit dem Grid

Fangen wir mit der Positionierung des Inhaltes an. Hierfür nehmen wir ein GridLayout. Das Gridlayout ermöglicht eine Aufteilung eines Elements in Spalten und Zeilen. Neben den üblichen fixen Positionierungsmöglichkeiten wie Pixeln gibt es auch die „fractions“-Einheit. Diese deklariert die Anteile eines verfügbaren Platzes. Der Browser rechnet dementsprechend in Pixel um. Das Layout für das Beispiel soll etwas links versetzt angezeigt werden, mit mehr Platz nach rechts, wie unten im Schaubild nachgestellt.

Die GridLayout-Definition für das „body“-Element für die Seiteninhalte sieht dann in CSS so aus:

display: -ms-grid;
   -ms-grid-columns: 1fr 5fr 2fr;
   -ms-grid-rows: 1fr 12fr;

Die „section“ muss nun entsprechend in die richtige Zeile und Spalte platziert werden.

section {
-ms-grid-row: 2;
-ms-grid-column: 2;
}

Hier gibt es noch keine WebKit-Implementierung der W3C Spezifikation, deshalb lediglich der -ms Prefix. Das Resultat im Browser spiegelt das angedachte Layout des Grids wider.

Texte, bitte Mehrspaltig

Neben dem traditionellen 4:3 Bildschirm Format sind heute Seitenverhältnisse von 16:10 und 16:9 angesagt. Einen breiteren Screen sollte man auch ausnutzen. Allerdings liest sich Text nicht besonders gut auf einem Breitbildschirm über dessen gesamte Breite. Hier bietet es sich an, diesen mehrspaltig darzustellen. Das ist mit Hilfe des CSS Multi-column Layout Module schnell realisiert:

article {
   -webkit-column-count: 3;
   -webkit-column-gap: normal;
   -webkit-column-rule-color: gray;
   -webkit-column-rule-style: solid;
   -webkit-column-rule-width: 1px;
   -webkit-column-width: auto;
   ###
   column-fill: auto;
   column-gap: normal;
   column-rule: 1px solid gray;
   columns: 3 auto;
   ###
   height: auto;
   overflow-x: auto;
   overflow-y: auto;
   margin-bottom: 50px;
}

Der CSS-Code definiert für das „article“-Element eine dreispaltige Textverteilung, mit einer Trennlinie von einem Pixel dazwischen.

Media Queries

Die letzte CSS-Technik die wir verwenden sind sogenannte Media Queries. Damit kann der Webentwickler – abhängig von Abfrageparametern – Elemente unterschiedlich stylen.

Dazu wird folgende Grundsyntax verwendet:

@media [type] [and (query) | * ]

Typischerweise fragt man „width“ ,„height“ , „device-width“ , „device-height“ , „aspect-ration“ , „device-aspect-ratio“ und „orientation“ ab. Es gibt noch die Möglichkeit, Farbunterstützung und sogar die Scan-Rate des Fernsehgerätes in der Query anzugeben.

Möchte man zum Beispiel einen Style für ein deklarieren, so definiert man einfach:

@media screen and (max-device-width: 480px) {
   /* hier kommen die CSS Regeln rein */
}

Auch die Beispielseite soll nun Media Queries erhalten. Dazu legt man nun fest, dass bei einer Mindestauflösung von 720p der Text dreispaltig angezeigt wird. In allen anderen Fällen wird der Text zweispaltig und auf Smartphones nur noch einspaltig und ohne GridLayout angezeigt.

Hierfür definiert man zwei Media Queries:

@media screen and (max-width: 480px) {
   /* 1-Spaltig, kein GridLayout, 64 Pixel Grafik, Schriftgröße 100% */
}
###
@media screen and (min-width: 1280px) and (device-aspect-ratio: 16/9) {
   /* 3-Spaltig, GridLayout, 512 Pixel Grafik, Schriftgröße 150% */
}
###
{
   /* 2-Spaltig, GridLayout, 256 Pixel Grafik, Schriftgröße 120% */
}

Die CSS-Definitionen sind nur angedeutet und können auf der Demo Seite im Quellcode betrachtet werden.

Wir haben für die Demo nicht die Geräte-Werte abgefragt, sondern die momentane Browser-Größe. Für eine richtige Anwendung muss man hier auch die entsprechenden „device-*“-Abfragen nutzen. Zu guter letzt sei noch erwähnt, dass zusätzlich für mobile Geräte noch ein Meta Tag hinzugefügt werden sollte.

<meta name="viewport"
   content="width=device-width,
      initial-scale=1,
      maximum-scale=1">

Mit dieser Meta-Anweisung wird ein Mobilgerät nicht versuchen, eine Desktop-Seite einfach herunterzuskalieren, sondern das Responsive Design kann direkt angewendet werden.

Ihr seid dran

Dieser Artikel kratzt nur an der Oberfläche von Responsive Webdesign. Wer sich tiefer mit dem Thema beschäftigen möchte, dem sei das Buch Responsive Web Design empfohlen. Es behandelt ausführlich die Erstellung einer Seite nach diesen Prinzipien. Des Weiteren noch eine Alternativ-Empfehlung zum Online Testen einer Webseite namens ScreenFly.

Falls Eure Webseite noch nicht "Responsive" ist und Euch Inspiration fehlt, dann werft doch einen Blick auf die Gewinner des 10k Apart "Responsive Edition" Wettbewerbs.

Weiterführende Links:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
13 Antworten
  1. von peter am 06.03.2012 (12:28Uhr)

    lese ich hier gerade einen gesponserten post von _microsoft_ (mir fällt sonst niemand ein, der ernsthaft den IE verwenden sollte) über responsive webdesign?! ^^ diese ironie... xD

    Antworten Teilen
  2. von Felix am 06.03.2012 (12:49Uhr)

    haha, das dacht ich mir auch :D

    Antworten Teilen
  3. von Thomas Quensen am 06.03.2012 (12:55Uhr)

    "Wir haben für die Demo nicht die Geräte-Werte abgefragt, sondern die momentane Browser-Größe. Für eine richtige Anwendung muss man hier auch die entsprechenden „device-*“-Abfragen nutzen"

    Nein, wieso?

    Ist doch egal, wie groß das Gerät ist, es kommt nur darauf an, wie groß das Browserfenster ist!

    Und wieso sollen nur Geräte mit "device-aspect-ratio: 16/9" das 3-Spalten Layout angezeigt bekommen? auf einem 16/10 oder 4/3 Monitor mit entsprechender Browserbreite ist das doch genau so passend...

    Ansonsten: schöner Beitrag :)

    Antworten Teilen
  4. von Norman am 06.03.2012 (13:49Uhr)

    Cross-Browser CSS bitte!

    Antworten Teilen
  5. von michsch am 06.03.2012 (13:55Uhr)

    Technisch mag das Meiste einiges durchaus richtig sein, aber das ist auch nicht mehr ganz so neu. Mir fehlt hier die Differenzierung der abweichenden Paradigmen "Mobile First" und "Progressive Enhancement" bei dem Vorgehen ein Responsive Design umzusetzen.

    Oops, my layout sucks!
    Das trifft wohl auch auf das hier beschriebene Beispiel zu, wenn man nicht die neueste Browser-Version installiert hat.

    Von maximum-scale=1 halte ich persönlich nichts, weil es dem Anwender die Möglichkeit nimmt die Webseite zu vergrößern. Das ist nicht benutzerfreundlich. Außerdem schließe ich mich Thomas Meinung zu device-* und device-aspect-ratio an.

    Zu guter Letzt würde ich bei einem Sponsored Post doch gerne etwas über den Autor und die Intention dieses Beitrags erfahren. Welchem Zweck soll dieser Post dienen? So ganz anonym wirkt das schon sehr dubios.

    Antworten Teilen
  6. von Responsi ve am 06.03.2012 (20:45Uhr)

    Ich frage mich aber immer mehr, ob es nicht Aufgabe des Browser wäre, z.b. einspaltig den Content linear anzuordnen während man auf breiten Bildschirmen Spalten maximal mit Höhe des Browserfensters macht aber dann nebeneinander so das man Scrollen kann. Aber ich will ja nicht hoch/runter und noch zusätzlich rechts/links scrollen.

    Evtl kommt diese falsche Grundeinstellung vom DPT/Typesetting wo man große Zeitungs-Papiere oder auch Bücher mehrspaltig anordnet. Auch beim Ipad Aufrecht/Quer wären zwei Spalten nebeneinander ganz ok aber nicht wenn man hoch/runter-Scrollen muss.
    Da muss erst Apple mit Reader-Mode o.ä. zeigen wie mans richtig(er) macht.

    Antworten Teilen
  7. von Dariusz Parys am 06.03.2012 (21:30Uhr)

    @Thomas Quensen,
    Ich habe den device-aspect-ratio einfach reingenommen um eine weitere Query Abfrage zu haben. Sollte nur Beispielhaft sein, hätte ich im Text besser ausdrücken müssen.

    @michsch
    Sorry das es ziemlich anonym wirkt. Kurz zu mir: Ich bin Developer Evangelist bei Microsoft Deutschland und die Intention des Posts war es einfach Responsive Webdesign zu propagieren.

    @Norman
    Meinst Du konkret noch weitere Browser außer IE + WebKit?

    Antworten Teilen
  8. von Norman am 06.03.2012 (21:37Uhr)

    @Dariusz: ähm.. ja. Firefox, Opera und der Standard an sich, also ohne Prefix, fehlt ja auch.

    Antworten Teilen
  9. von Dariusz Parys am 06.03.2012 (22:01Uhr)

    @Norman,

    Stimmt. Beim GridLayout habe ich mir das erlaubt weil noch kein weiterer Browser dieses implementiert, zumindest mein Kenntnisstand von letzter Woche (bitte berichtigen falls falsch) und beim Multi-Column Layout habe ich Safari und Chrome berücksichtigt. Ich hatte das zumindest im Artikel erwähnt. Das scheint mir auch die gängige Praxis von anderen Artikeln zu sein das meist nur ein paar der Browser erwähnt werden.

    Antworten Teilen
  10. von Michael am 06.03.2012 (23:13Uhr)

    Responsive Design mit mit Grid Layout - das ist ja wohl mal bitte ein wenig daneben. Es ist ja schon schlimm genug das inzwischen so ziemlich alles was sich noch im Working Draft befindet rauszukramen um damit schon zu arbeiten - aber das ich hier einen Beitrag lese, der rein mit dem ie10 funktioniert (bitte korrigieren wenn ich mich da irre) ist doch wohl ein Witz.

    Responsive Design verfolgt das Ziel sovielen Nutzern wie möglich Inhalte zu liefern, die Crossbrowser und Hardwareunabhängig zur Verfügung gestellt werden sollen. Was bringt mir dann ein 'only IE10 + Präfix' Beispiel?

    Dann lieber ein ausführlicheren Post über die Multi-column Layout Module - immerhin ist Microsoft ierbei der einzige Verein der das Präfix weg lässt. Und das ganze wurde schon als Empfehlung rausgegeben und ist halt kein Arbeitsentwurf mehr.

    Antworten Teilen
  11. von Till am 06.03.2012 (23:22Uhr)

    Einen sehr schönen - da semantischen - Ansatz verfolgt übrigens auch das "Semantic Grid-System"... nur so nebenbei :)

    Antworten Teilen
  12. von Dariusz Parys am 07.03.2012 (06:39Uhr)

    @Michael
    Du hast Recht dass das GridLayout Stand heute nur im IE10 und in Windows 8 Metro Style Apps funktioniert. Trotzdem habe ich die Hoffnung das die Spec auch von den anderen Browser Herstellern bald implementiert wird. Im übrigen habe ich mir kurz überlegt für den Artikel das Bootstrap Grid von Twitter zu benutzen, bin dann aber doch auf das CSS3 Grid Layout Module gegangen nachdem ich gesehen habe das an WebKit daran gearbeitet wird.

    Alternativ hätte ich auch eine FlexBox nehmen können, da ist der Support Browserübergreifend schon besser, doch ich finde grundsätzlich ist es nicht falsch einen Grid-basierten Ansatz für ein Responsive Design zu nutzen.

    Antworten Teilen
  13. von Michael Seiler-Gerstmann am 07.03.2012 (11:29Uhr)

    @Dariusz
    An sich hast du ja recht, nur bin ich halt der Meinung das unser Ziel als Entwickler und Designer eine Crossbrowser/Crossplattform Lösung sein sollte um Inhalte zu transportieren. An sich freue ich mich ja über einen Artikel zum Thema Grid Layout Module, halt nur nicht im Bezug auf das Ziel von Responive Design. Sollte ein Artikel 'Responsive mit FlexBox' kommen, hast du einen interessierten Leser (:

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema iPhone
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Die 10 beliebtesten Artikel der Woche: Unveröffentlichte Apple-Produkte, Google-Löschformular und kreative Landingpages
Die 10 beliebtesten Artikel der Woche: Unveröffentlichte Apple-Produkte, Google-Löschformular und kreative Landingpages

Diese Wochen sind wieder zehn Artikel besonders aufgefallen. In unserem Wochenrückblick präsentieren wir euch unter anderem 15 Apple-Produkte, die es nie in die Produktion geschafft haben. » weiterlesen

Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop]
Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 36 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen