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.


Auf Wohnungsschau mit dem Tablet

17. Dezember 2014

Die Augmented Reality (deutsch: erweiterte Realität) begegnet uns mittlerweile häufig im Alltag. Ob beim Fernsehgucken oder Einkaufen: An dieser Innovation kommt niemand mehr vorbei.

Auch die Immobilienbranche hat dies erkannt, weswegen es mittlerweile einige Applikationen gibt, die dem Benutzer ermöglichen, zusätzliche Informationen über das Immobilienobjekt der Begierde zu erlangen. Man macht sich hierbei unterschiedliche Eigenschaften der erweiterten Realität zunutze, die ebenfalls unterschiedliche Bereiche abdecken können. Dass das Ganze mehr als eine Spielerei für Technikfans ist, ist natürlich Vorraussetzung.

Diese neuen Anwendungen ermöglichen Benutzern, die über ein Tablet oder Smartphone und die vorgeschriebene App verfügen, z.B. anhand eines eingebauten Kompasses den Einfallswinkel der Sonne in ein Fenster zu sehen. Ebenfalls kann man sich eine 3D- Übersicht über die Räumlichkeiten erschaffen, um sich besser zurechtzufinden. Möglich ist das ganz einfach, indem man die Kamera des Gerätes auf einen speziellen Plan mit QR- Code richtet. Auch bewegte Bilder sind kein Problem mehr.

title

http://www.abendblatt.de/img/wohnen/crop113132678/0148721171-ci3x2l-w620/title.jpg

Eine weitere Möglichkeit, Augmented Reality in der Immobilienbranche einzusetzen, ist diese Anwendung mobil zu verwenden. Hier kann der Benutzer mit seinem Tablet oder Smartphone durch die Straßen seiner Lieblingsstadt gehen und Ausschau nach freien Wohnungen halten. Wenn er sich einer nähert, erhält er Informationen über Preis, Größe sowie weitere Daten. Ebenfalls die Entfernung zur Immobilie wird angezeigt. Der Makler markiert die freien Wohnungen oder Häuser vorher via GPS und setzt sogenannte Points of Interest. Somit ist die Verwendung sehr einfach und machbar für jeden.

986x555

https://images.computerwoche.de/images/computerwoche/bdb/493363/986×555.png

Bei der nächsten Wohnungssuche also auch mal diese Alternative neben Zeitungsannouncen und Online Portalen ausprobieren, möglicherweise hat man hier ja großen Erfolg.