Responsive Design

Flexible Webseiten mit Hilfe von HTML5 und CSS3 Media Queries gestalten...

Responsive Design ist eine moderne Technik, Webseiten flexibel an die Bildschirmauflösung anzupassen. Verwendet werden dabei die Webstandards HTML5 und CSS3 Media Queries.

Größter Vorteil von Responsive Design ist, dass auf jeder Bildschirmauflösung eine Seite genauso gut bedienbar ist, egal ob Desktop, Tablet oder Smartphone.

Man geht standardmäßig bei der Konzeption und Umsetzung der Seiten in folgender Reihenfolge vor:

  • Anlegen einer Desktop Variante (Bildschirmauflösung 1024px +)
  • Anlegen einer Tablet Variante (768px bis 1024px)
  • Anlegen einer Smartphone Variante (320px bis 480px)

Die Struktur einer Tablet Variante (speziell für iPad Retina Display) könnte in CSS mit einer Media Querie folgender Maßen aufgebaut sein:

/* iPad 3 und 4 (Portrait) ----------- */ 

@media screen and (device-width: 768px) and (-webkit-device-pixel-ratio: 2)
{
 
 /* Styles */ 

}

Mobile Optimierung

In der "mobilen Variante" ist es sehr wichtig, dass die Navigation anders gestaltet sein muss, da diese meist von Platz her nicht ausreicht. Die einfachste Variante ist es, die Navigationspunkte in einer Drop-Down-Box (Auswahllisten) anzuzeigen. Man würde im Prinzip zwei Menüs gestalten, die eine aber im vornherein ausblenden und nur anzeigen, sobald man sich in einer bestimmten Bildschirmauflösung befindet: 


/* Standard Einstellung Desktop */
select#navBoxSmartphone{
  display:none;
}


/* Smartphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
 
  select#navBoxSmartphone{
    display:block;
  }

}

CSS Frameworks

Es gibt mittlerweile CSS Frameworks und Layout Templates, die man in der Praxis wiederverwenden kann, um einfacher flexible Webseiten zu gestalten:

Beispiele

Um einen guten Eindruck von der Idee hinter Responsive Design zu erhalten, sind die folgenden aufgelisteten Seiten in einer Standard Smartphone Größe zu öffnen (320x480):

Weitere Informationen zu Responsive Design finden Sie in der Wikipedia.

X

Um die Webseite optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir eigene Cookies und von Drittanbietern. Durch die weitere Nutzung unserer Webseite stimmen Sie der Verwendung von Cookies zu. Diese Nutzung können Sie in Ihren Browsereinstellungen jederzeit ändern. Weitere Informationen finden Sie in unserem Datenschutz.

Fragen?

Kontaktmöglichkeiten

Projektanfrage?
Andere Frage?
Bewerbung?

Sie benötigen eine Auftragsprogrammierung?
Oder suchen eine unverbindliche Beratung?


Sind sie auf der Suche nach einer neuen Stelle?
Wir freuen uns auf Ihre Bewerbung: