Responsive Webdesign
Responsive Webdesign
Embedded Files
Responsive Webdesign beschreibt das Verhalten einer Webseite, sich der Bildschirmgrösse (Viewport) oder der Orientierung eines Gerätes (Portrait / Landscape) anzupassen.
Ziele:
Ziele:
E7: Ich kann das Layout meiner Webseite einheitlich und responsive umsetzen.
Viewport:
Viewport:
Damit mobile Geräte die responsive Webseite korrekt darstellen, muss das Meta-Tag viewport im <head> eingefügt werden.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
initial-scale=1.0 legt dabei die Skalierung fest, welche der Browser beim Laden der Seite verwenden soll.
Damit wird festgelegt, dass Elemente 1:1 angezeigt werden sollen und nicht skaliert werden.
width=device-width legt fest, dass die Breite der Seite der Breite des Gerätes entsprechen soll.
Dabei werden vier Designansätze bis hin zum vollständigen Responsive-Webdesign unterschieden:
Fixed Design:
Fixed Design:
Diese Art von Design gilt als veraltet und hat gegenüber den neuen Ausgabe-Medien wie Smartphones und Tablets keine Vorteile mehr.
Die Breite wird für alle Bereiche fix definiert und ist daher bei allen Geräten gleich gross und wird so zum Hindernis.
body {
width: 900px;
}
Fluid Design:
Fluid Design:
Ein „flüssiges“ Layout der Seite wird in der Regel mit Prozentangaben erzeugt.
Dieses Layout hat den Vorteil, dass es sich an der Breite des Browsers anpasst. Es stösst jedoch bei sehr kleinen oder sehr grossen Bildschirmbreiten an Grenzen.
body {
width: 95%;
}
Adaptive Design:
Adaptive Design:
Adaptives Layout gilt als Zwischenstufe zwischen fluidem und responsivem Design.
Es passt sich dem Viewport an, indem es für verschiedene Viewportgrössen unterschiedliche Layouts mit fixen Grössenangaben verwendet.
Dabei ändert bei gewissen Breakpoints das Layout, zwischen den Breakpoints wird die Darstellung der Elemente jedoch nicht angepasst.
@media screen and (min-width: 600px) {
body {
width 600px;
}
}
@media screen and (min-width: 900px) {
body {
width 900px;
}
}
Responsive Design:
Responsive Design:
Responsives Layout ist die Referenz in der Website-Programmierung.
Es optimiert das Layout für jede vom Benutzer definierten Grösse. Zwischen dem Layout-Wechsel kommt ein fluides Layout zum Einsatz. Somit können alle Viewport-Breiten in Betracht gezogen werden.
/* Mobile-First */
body {
display: grid;
/* Breite der 1 Spalte */
grid-template-columns: 100%;
/* Höhe der 5 Zeilen */
grid-template-rows: 100px 150px 1fr 0.5fr 100px;
/* Aliases für die Zellen */
grid-template-areas:
"header"
"navigation"
"content"
"sidebar"
"footer";
}
/* für zweispaltiges Layout ab 900 px*/
@media screen and (min-width: 900px) {
body {
grid-template-columns: 80% 20%;
/* Höhe der vier Zeilen*/
grid-template-rows: 100px 100px 1fr 100px;
/* Alias für die Zellen */
grid-template-areas:
"header header"
"navigation navigation"
"content sidebar"
"footer footer";
}
}
CSS Media-Queries
CSS Media-Queries
Media-Queries sorgen dafür, dass wir unser CSS aufgrund von unterschiedlichen Bedingungen anpassen können. Diese Bedingungen können z.B.:
unterschiedliche Ausgabegeräte sein:
all / print / screen / speech / ...Grösse des Viewports (Ansichtfenster):
width / min-width / max-width
height / min-heigth / max-heigthAusrichtung des Gerätes:
orientation: landscape / portrairtSeitenverhältnis
Farbfähigkeit und Farbtiefe
Benutzereinstellungen:
prefers-color-scheme: dark / light
Gerätebasierte Breakpoints:
Gerätebasierte Breakpoints:
Mit Breakpoints definieren wir, bei welcher Bildschirmbreite sich unser Layout ändern soll.
In der Regel werden drei bis vier Breakpoint für die folgenden Geräteklassen verwendet:
0-600 Pixel: Smartphones
600-900 Pixel: Tablets Hochformat
900 - 1200 Pixel: Tablets Querformat
1200 - 1800 Pixel: Laptops
ab 1800 Pixel: Desktops
@media screen and (min-width: 600px){
/* CSS für Tablets (screen) breite Viewport grösser 600px */
}
Vorgehensweise:
Zuerst wird das komplette Layout mit dem Designansatz Mobile-First oder Desktop-First mit CSS entwickelt.
Anschliessend werden innerhalb der Media-Queries jene CSS-Regeln aus dem Grundlayout verändert, welche das Layout in die gewünschte Form bringen.
Inhaltsbasierte Media-Queries:
Inhaltsbasierte Media-Queries:
Anstatt gerätebasierte Breakpoints zu verwenden, ist es manchmal besser, den Inhalt der Website zu verwenden, und Breakpoints anhand des Inhaltes zu definieren. Bei diesem Ansatz setzen wir einen Breakpoint an jede Stelle, an welcher das Layout nicht mehr korrekt aussieht.
Diese Methode vereinfacht die Implementierung erheblich und erleichtert die Verwaltung von Medienabfragen.
Wie im folgenden Beispiel gezeigt, beginnt der Inhalt bei einer Verkleinerung des Bildschirms zu verzerren, was die Lesbarkeit beeinträchtigt. Um dieses Szenario zu vermeiden, fügen wir CSS Media Query Breakpoints ein, um die Lesbarkeit des Inhalts zu verbessern.
Designansatz:
Designansatz:
Es gibt unterschiedliche Möglichkeiten, eine Webseite responsive umzusetzen:
Beim Mobile-First Ansatz wird die Webseite grundsätzlich für Mobile Geräte bis 600px Bildschirm-Breite definiert.
Für grössere Bildschirme werden Media Queries verwendet. Dabei verwenden wir für die Definition der grösseren Geräte die Regel min-width. Übersteigt der Viewport diese definierte Grösse, gelten die CSS-Anweisungen innerhalb dieses Media-Query.Beim Desktop-First Ansatz wird die Webseite für grosse Bildschirme optimiert und anschliessend mit Media Queries für kleine Bildschirme angepasst.
Dabei verwenden wir für die Definition der kleineren Geräte die Regel max-width. Unterschreitet der Viewport diese definierte Grösse, gelten die CSS-Anweisungen innerhalb dieses Media-Query.
Mobile First:
Mobile First:
/* CSS Definition Mobile-First Smartphones bis 600px */
@media screen and (min-width: 600px){
/* CSS für Tablets Hochformat grösser 600px */
}
@media screen and (min-width: 900px){
/* CSS für Tablets Querformat grösser 900px */
}
@media screen and (min-width: 1200px){
/* CSS für Labtops grösser 1200px */
}
@media screen and (min-width: 1800px){
/* CSS für grosse Desktops ab 1800px */
}
Desktop-First:
Desktop-First:
/* CSS Definition Desktop-First für Desktop ab 1800 Pixel */
@media screen and (max-width: 1800px){
/* CSS für Laptops kleiner 1800px */
}
@media screen and (max-width: 1200px){
/* CSS für Tablets Querformat kleiner 1200px */
}
@media screen and (max-width: 900px){
/* CSS für Tablets Hochformat kleiner 900px */
}
@media screen and (max-width: 600px){
/* für Smartphones kleiner 600px */
}
Responsive mit CSS-Grid:
Responsive mit CSS-Grid:
Desktop-First:
Die Layout-Elemente <nav>, <main> und <aside> werden nebeneinander dargestellt.
body {
display: grid;
/* Breite der drei Spalten */
grid-template-columns: 20% 60% 20%;
/* Höhe der drei Zeilen*/
grid-template-rows: 100px 1fr 100px;
/* Alias für die Zellen */
grid-template-areas:
"header header header"
"navigation content sidebar"
"footer footer footer";
}
Optimierung für kleine Geräte:
Verkleinert sich die Bildschirmgrösse unter 900 Pixel, wird ein 1x5 Raster verwendet. Dafür passen wir im Media-Querie DREI CSS-Regeln an:
@media screen and (max-width:900px){
body {
/* Breite der 1 Spalte */
grid-template-columns: 100%;
/* Höhe der 5 Zeilen */
grid-template-rows: 100px 150px 1fr 0.5fr 100px;
/* Aliases für die Zellen */
grid-template-areas:
"header"
"navigation"
"content"
"sidebar"
"footer";
}
}
Video:
Video:
Weiterführende Links:
Weiterführende Links:
Responsive Webdesign Allgemein:
Media Queries
Breakpoints:
Page updated
Report abuse