Layoutbilder (Header, Logo, Hintergrundbilder) bei responsive Designs

Wenn man eine Website responsive erstellt, dann muss man auch meistens mehrere Varianten für die Layoutbilder wie z.B. Header, Logo oder Hintergrundbilder entwickeln. Denn, auf Smartphones und sonstigen kleinen Geräten ist wenig Platz. Hat man bei der Desktop-Variante einen hohen Header und verwendet diesen auch bei kleinen Displays, kann es passieren, dass der Header den Großteil des verfügbaren Platzes einnimmt.

Layout auf kleinen Geräten

Ziel sollte sein, dass bei kleinen Geräten zumindest der Großteil durch den Inhalt eingenommen wird. Nachfolgend ein Beispielcode für CSS-Einstellungen mit 3 verschiedenen Headerbildern.

@media only screen and (min-width:320px) {
div.header {
background: url('bilder/header-klein.jpg');
}
}

@media only screen and (min-width:768px) {
div.header {
background: url('bilder/header-gross.jpg');
}
}

@media only screen and (min-width:1024px) {
div.header {
background: url('bilder/header-sehr-gross.jpg');
}
}

Hat man in der Desktop-Größe ein Hintergrundbild, das die gesamte Breite des Containers füllt, kann es passieren, dass das Hintergrundbild bei kleineren Größen entfernt werden muss. Beispielsweise hat man in der Desktop-Größe häufig einen seitlichen Streifen für die Navigation, der bei kleineren Displaygrößen nicht mehr passend sein könnte. Statt einem Hintergrundbild könnte man bei kleineren Displaygrößen z.B. eine passende Hintergrundfarbe zuweisen. Ein Beispielcode.

@media only screen and (min-width:320px) {
div.wrapper {  
background: #ffffff;
}
}

@media only screen and (min-width:768px) {
div.wrapper {  
background: url('bilder/hintergrund.jpg');
}
}

Bei dieser Variante erhält der Container unter 768px eine Hintergrundfarbe. Ab 768px wird ein Hintergrundbild angezeigt.