Responsive Design

9. Oktober 2015

In der heutigen Zeit sind Tablets und Smartphones kaum noch wegzudenken. Laut einer Studie der ARD und ZDF nutzen durchschnittlich 21% aller Deutschen zwischen 14 und 70 Jahren täglich ein Smartphone (Quelle: http://www.ard-zdf-onlinestudie.de/index.php?id=432  01.10.2015) . Viele von ihnen sind auf der Suche nach Informationen oder surfen im Internet.

Doch wer kennt es nicht, man öffnet eine Internetseite mit dem Smartphone und sie ist kaum nutzbar, am PC funktioniert alles einwandfrei doch auf dem Smartphone oder Tablet muss man lange scrollen, Menüs sind nur schwer oder gar nicht zu bedienen, Grafiken sind verzerrt und Buttons ‚fliegen‘ querbeet in der Seite herum.

Das nervt, ist sehr unpraktisch und macht eine mobile Nutzung der Seite teilweise sogar unmöglich.

 

laptopansicht

Abb. 1 Laptopansicht (Quelle: http://www.schapers-ferienwohnungen.de  01.10.2015)  

 

Tabletansicht 

Abb. 2 Tabletansicht (Quelle:  http://www.schapers-ferienwohnungen.de  01.10.2015)                   

   

   Smartphoneansicht

Abb. 3 Smartphoneansicht (Quelle:  http://www.schapers-ferienwohnungen.de  01.10.2015)        

 

Doch es gibt eine Lösung! Responsive Design – Was ist das?

Mit responsive Design wird ein flexibles Layout für alle Screengrößen bezeichnet. Das bedeutet, dass eine Webseite sich automatisch der Bildschirmgröße des Endgerätes anpasst, sodass sie dem Nutzer weiterhin eine gute Usability bietet. Hierbei werden zum Beispiel die Hovereffekte für Menüs abgeschaltet, Menüs ab einer bestimmten Bildschirmgröße von einem Megamenu zu einer Sidemap oder einem Accordeonmenu umgeswitcht, damit sie auch vom Smartphone oder Tablet bedient werden können.

Bilder und Texte passen sich ebenfalls entsprechend der Größe des Screens an. Hierbei hat der Webdesigner die Möglichkeit auch Inhalte ab einer bestimmen Bildschirmgröße auszublenden oder ganz andere Texte (z.B. Zusammenfassungen) anzeigen zu lassen.

 

responsiveLayout

Abb. 4 Responsive Layout (Quelle: https://www.hdnet.de/blog/warum-responsive-webdesign/  01.10.2015)

Abb. 5 Beispiel responsive Website (Quelle: http://www.meca.mx/responsive-web-design/  01.10.2015)

 

Wie geht responsive Design – CSS 3 und HTML 5

Eine für responsive Webdesign wesentliche Voraussetzung sind die sogenannten Media Queries, ein CSS3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums erlaubt.

Beispielsweise können folgende Eigenschaften als Kriterien herangezogen werden:

  • Breite und Höhe des Browserfensters
  • Größe des Gerätes selbst
  • Bildschirmauflösung
  • Orientierung (Hoch- oder Querformat)
  • Eingabemöglichkeiten (Tastatur, Fingergeste [Touch], Sprache)

Beispiel:

Code im HTML5:

<head>

<link rel=“stylesheet“ type=“text/css“ href=“css/all.css“ />

<link rel=“stylesheet“ type=“text/css“ media=“all and (max-device-width: 480px)“ href=“css/smartphones.css“ />

</head>

Hier wird im Head-Tag der HTML-Datei die Smartphone.css geladen, in der das Aussehen der Webseite (auf Smartphones) definiert wird, also auf Geräten deren Bildschirm schmaler als 480px ist.

Einsatz im CSS3:

@media(max-device-width: 480px){

a {

color: green;

}

In der Smartphone.css wird bestimmt welche Eigenschaften wann und wie eingesetzt/dargestellt werden. Hier ist man ziemlich frei in der Gestaltung, in dem Codebeispiel wurde gesagt, dass auf dem Smartphone alle Links grün angezeigt werden sollen.

Auf diese Weise lässt sich die gesamte Optik der Webseite auf die Bedürfnisse von Smartphonenutzern anpassen und so die Usability der ganzen Seite verbessern. Natürlich kann man auch noch weitere Unterscheidungen vornehmen, z.B. eine Größe für Tablets einrichten oder für Handys im Querformat.

Beispiel für Größeneinteilung:

# Smartphone

only screen and (min-width: 480px)

# Tablet

only screen and (min-width: 768px)

# Desktop

only screen and (min-width: 992px)

# Huge

only screen and (min-width: 1280px)

(Quelle: http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile 01.10.2015)

Fazit:

Es ist wichtig sich schon zu Beginn der Webseitenprogrammierung Gedanken zu machen, wie responsive die Seite werden soll und sie dementsprechend programmieren. Meiner Meinung nach wird das responsive Design in den nächsten Jahren sogar noch mehr an Bedeutung gewinnen, da die Nutzung der Smartphones und Tablets in Zukunft wohl noch weiter steigen wird, genauso wie die Ansprüche der Nutzer an die Bedienfreundlichkeit und den Komfort von Webseiten immer höher werden.

Kommentare deaktiviert für Responsive Design | Allgemein | Tagged: , , , , , , , | Permalink
Posted by hoffkr