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).
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 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:
:
:
@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) */
:
:
}