Sie befinden sich hier:
» 
» 
01.04.2013

Responsive Webdesign - Was sind die Hauptmerkmale?

Responsive Webdesign bedeutet: Die Webseiten passen sich automatisch an die Gegebenheiten der jeweiligen Endgeräte an. Je nach Auflösung, Bildschirmgröße, Ausrichtung (horizontal, vertikal) werden die Inhalte optimiert dargestellt.

Basis für responsive Webdesign

Grundvoraussetzung für responsive Webdesign ist ein mehrspaltiges Layout. Je nach Erfordernissen werden die einzelnen Blöcke nebeneinander oder untereinander angeordnet, d.h. es werden keine Inhalte weggeblendet, sondern sie werden umstrukturiert (evtl. mit reduziertem graphischen Umfang). Hierfür kommen Media Queries (CSS3) zum Einsatz. Browser, die keine Media Queries unterstützen (IE<9), können z.B. mit respond.js entsprechend nachgerüstet werden (Einbindung per conditional comment).

responsive Webdesign schematisch dargestellt

Anpassungen, um eine Website responsive zu gestalten

  • Erstellen Sie ein „floating“ Layout, d.h. lösen Sie sich von festen Angaben.
  • Geben Sie Maße möglichst in Prozent und nicht in Pixel an
  • Verzichten Sie bei Schriftgrößen auf feste Pixelangaben, sondern definieren Sie die Schriftgrößen in „em“. Damit passen sich die Schriftgrößen an die jeweiligen Verhältnisse an.
  • Geben Sie aber trotzdem eine maximale Gesamtbreite Ihrer Website vor (z.B. css: max-width:940px;). Dadurch vermeiden Sie, dass die Website z.B. bei einer Auflösung von 1920x1200 endlos in die Breite gezogen wird.
  • Machen Sie Ihre Bilder flexibel (z.B. css: max-width:100%;)
  • Unterstützen Sie die unterschiedlichen Eingabemöglichkeiten (Tastatur, Maus, Finger = TouchEvents)

Responsive Webdesign und mobile first

Da nur noch eine Website-Variante verwaltet wird, läuft man natürlich Gefahr, Elemente zu laden, die gar nicht benötigt werden. Dadurch würde man insbesondere für die kleinste Version (für Smartphones) Ladezeit und Übertragungsvolumen unnötig erhöhen. Dies kann man durch den mobile first Ansatz umgehen. Das bedeutet, es werden als Basis zuerst nur die Stylesheets und Bilder der kleinsten Version geladen. Je nach Geräteeigenschaften werden weitere Stylesheets und Bilder nachgegeladen. So schafft man es, für die kleinste Version das zu übertragende Datenvolumen maßvoll zu halten.

Sinnvolle Abstufung der Media Queries

Wie bereits erläutert, werden bei einem responsive Webdesign die Inhalte je nach Anforderungen per Media Queries umstrukturiert. In der Praxis bewährt sich dabei eine grobe Unterteilung in drei Basisgrößen. Je nach Abstufung kann die Unterteilung weiter verfeinert werden.

  • Smartphone (bis 480px)
  • Tablet (bis 800px)
  • Desktop-PC (größer 800px)

Da Media Queries auf zwei verschiedene Wege implementiert werden können, hier die Notation der beiden Varianten.

Laden unterschiedlicher css-Dateien über Media Queries:

<link rel="stylesheet" media="screen" href="default.css" />

<link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 800px)" href="tablet.css" />

<link rel="stylesheet" media="screen and (min-width: 801px)" href="desktop.css" />

Laden nur einer css-Datei und die Unterscheidung innerhalb der Datei:

/* Basis CSS, die immer benötigt werden */
  :
  :
@media screen and (min-width: 481px) and (max-width: 800px) {
  /* zusätzliche CSS für die mittlere Größe (Tablets) */
  :
  :
}
@media screen and (min-width: 801px) {
  /* zusätzliche CSS für die Vollversion (Desktop-Version) */
  :
  :
}

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

60

Kommentare:

06.September2013

Hallo,

ich habe htaccess verwendet, um auf die mobile Seite zu leiten. Leider werde ich auch vom Ipad auf die mobile Seite geleitet. Kann man dies verhindern in der htaccess. Oder gibt es evtl. eine andere Möglichkeit ?

Beste Grüße

Jan

06.September2013

Hallo Jan,

ich würde es mit folgender Bedingung probieren
RewriteCond %{HTTP_USER_AGENT} "i(Phone|Pod)"

Allerdings denke ich, dass responsive Webdesign und die Unterscheidung der Versionen via Media-Queries die bessere Variante ist. Du hast sicherlich 7" und 10" iPads abzudecken, das Gleiche noch für die verschiedensten Android-Tablets. Irgendwann ufert es aus.
Ich denke auch, dass es nicht die Ideallösung ist, Tablets generell die „volle“ Desktop-Version zu geben. Schließlich geht es bei den Tablets auch um Bandbreite, Übertragungsvolumen und da fährst du mit einem responsive Ansatz besser. Auch wenn es vielleicht zu Beginn mit mehr Aufwand verbunden ist.

Gruß Harry

25.Juni2014

Hallo, warum soll ich die Maße in Prozent angeben und nicht in Pixel?
Was ist das für ein Unterschied? Du hast aber selber die Maße in Pixel angegeben.
Lg Lisa

25.Juni2014

Hallo Lisa,

Prozentangaben sind relativ, d.h. die Größe der Elemente passt sich der Größe des Frontends an. Bei Pixel sind die Maße statisch und unveränderlich fest.
Bei mir haben die primären Elemente üblicherweise Angaben im Prozent oder em. Bildbereiche in CSS-Sprites können natürlich nur in Pixel definiert werden. Für ganz schmale Bereiche und Linien habe ich ebenfalls Pixelangaben verwendet.

Gruß Harry

02.Februar2016

Hi, also ich habe für mein Design feste Pixel-Maße verwendet. Das kann man auch machen. Es hängt einfach vom jeweiligen Design ab, was für die Seite besser funktioniert, würde ich sagen. Firefox hat in der Entwicklerkonsole übrigens ein praktisches Tool zum testen der verschiedenen Monitor-Größen.

02.Februar2016

Feste Pixel-Maße haben aber nichts mit Responsive zu tun.

23.März2016

Ja stimmt, per Definition müssen sich die Elemente bei einem responsive Design an die jeweilige Größe anpassen. Ich verwende den Begriff manchmal nicht ganz korrekt, als Gegenstück zum Mobilen Template. Sozusagen für alles was über media queries läuft.