Was ist eigentlich Responsive Webdesign

Unter „Responsive Webdesign“ versteht man ein Design, welches sich für alle Endgeräte optimal anpasst, dass heißt die Darstellung des Designs passt sich der jeweiligen Größe an.

Dem responsive Webdesign verdanken wir viele praktische Webseiten, welche wir nun auch mit dem Handy sehr einfach aufrufen und anzeigen lassen können.
Da die Tablet und Handy Nutzer in den letzten Jahren immer mehr werden, ist die Wichtigkeit von responsive Webdesign immer mehr angestiegen.

Doch wie genau funktioniert das nun?

Responsive Webdesign ist eine Technik welche mittel HTML5 und CSS3 funktioniert, weshalb es bei älteren Browsern hier auch zu Problemen kommen kann.

Durch CSS3 wird die Möglichkeit der „Media Queries“ geschaffen, da das ganze doch sehr selbsterklärend ist, hier ein Beispiel:

1. #inhalt {
2.   width: 800px;
3. }
4. @media screen and (max-width: 1024px) {
5.   #inhalt {
6.     width: 600px;
7.   }
8. }

In Zeile 1 sehen wir das ein Element mit der ID „Inhalt“ die Breite von 800px bekommt, ist der Betrachter der Seite nun aber ein Bildschirm (siehe Z. 4) und hat eine Maximale Breite von1024px so wäre der Inhalt nur 600px breit (siehe Z. 6).

Von diesen Bedingungen (siehe Z. 4) gibt es nun sehr viele verschiedene wie „handheld“, „tv“ oder „print“, zusätzlich durch die Bedingungen der Breite lassen sich schöne responsive Designs umsetzten.

Da nun bestimmt werden kann wie groß das Endgerät ist, lässt sich das Design optimal für das Gerät mittels CSS optimieren.

Und auch bei diesem Thema stellen wir wieder fest, wie wichtig es ist einen ordentlichen und aktuellen Browser zu benutzten, sei es nun auf dem Tablet, Handy oder PC.

P.S. Diese Seite hat auch ein responsive Design