zurück zur Blog Übersicht

Responsive Websites

24.06.2014
„Responsive Webdesign“ ist in aller Munde und gehört für viele – so auch für newmagic – bereits zum Standard wenn es um den Launch einer Website oder einer Webapplikation geht. Die immer größere Verbreitung von mobilen Devices führt dazu dass Webseiten auf immer mehr unterschiedlicheren Screengrößen funktionieren müssen. Vom Smartphone bis zum Desktop. Das bedeutet für Webentwickler natürlich eine Herausforderung, muss man doch die optimale Lösung für die entsprechende Website oder Webapplikation finden.


Dieser Artikel gibt einen kurzen Überblick über die wichtigsten Eckpunkte zum umfangreichen Thema „responsive Websites“.




Was bedeutet „responsive“?

Von einer responsiven Website spricht man dann, wenn sich die Website an unterschiedliche Screengrößen anpassen kann. Grob unterscheidet man zwischen Smartphone, Tablet und Desktop. Die Screengröße ist die Auflösung des Bildschirms. Um eine ungefähre Vorstellung der Displaygrößen zu geben, hier im Überblick die drei Standardgrößen:

Smartphones: 320px bis 480px

Tablets: 768px bis 1024px

Desktop: 1024+px


Wir passen die Websites und Applikationen an eine Vielzahl anderer Screengrößen auch an, um eine bestmögliche Abdeckung zu gewährleisten.



Wie sieht responsives Verhalten aus?

Zum einen passiert dies durch die Anpassung des Designs für die unterschiedlichen Devices. Eine Website sieht dann am Smartphone etwas anders aus als am Desktop. Nicht alle Designelemente, die am Desktop gerne gesehen sind, eigenen sich für die Darstellung und Bedienbarkeit am Smartphone. So sind zum Beispiel mouseover-Effekte am Smartphone nicht möglich, Menüführungen müssen kompakter gestaltet werden, Bilder und Videos in kleinerer Auflösung verfügbar gemacht und skaliert werden.


Außerdem können Funktionalitäten auf verschiedenen Devices anders ausfallen. Sehr oft passiert dies bei Menüführungen, die am Smartphone oftmals nicht nur anders aussehen, sondern auch anders funktionieren.

Als Zeichen eines Menüs am Smartphone hat sich dieses Icon durchgesetzt, welches in unterschiedlichsten Varianten zu finden ist. Es zeigt an, dass hier ein Menü verborgen ist.




Weiters gibt es Seitenlayouts, die auf kleine Devices angepasst werden müssen um den Inhalt optimal darzustellen. Eine Website mit beispielsweise drei Spalten führt bei einer kleinen Auflösung dazu, dass die Spalten sehr schmal werden, daher verfolgt man auch hier den Ansatz eines responsiven Verhaltens.



Wie macht man das?

Mit dem Aufkommen der CSS Media Queries, welche eine Anpassung des CSS der Website an unterschiedliche Screengrößen erlaubt, rückte auch die responsive Webentwicklung immer mehr in den Vordergrund. Die Verwendung von Programmier- oder Scriptsprachen ist weitgehend nicht nötig und man kann sich der Codesprachen HTML und CSS bedienen, welche mächtige Werkzeuge für die Umsetzung responsiver Websites sind.


Wenn man eine responsive Website erstellt, dann ist das Wichtigste, dass man dies von Anfang an mit berücksichtigt. Nicht nur müssen das Design und die Layouts dementsprechend gestaltet werden, sondern auch der technische Aufbau wird im Hinblick dessen erstellt. Eine Website im Nachhinein responsive werden zu lassen, ist mit erheblichen Mehraufwand verbunden und führt oft dazu dass man das komplette Codegerüst umschreiben muss. Das heißt also für die Entwicklung einer Seite, dass von Anfang an alle Devices mitberücksichtigt werden müssen. Mockups und Ablaufskizzen werden erstellt, Menüführungen für unterschiedliche Screengrößen erdacht und vor allem wird auf die Usability acht gegeben, welche auf allen Endgeräten funktionieren muss.

Aufgrund der vielen möglichen Szenarien ist die Projektphase daher deutlich aufwendiger als bei einer herkömmlichen Desktop-Website. Dasselbe gilt auch für die Endphase der Webentwicklung, wenn es darum geht die Website auf allen Devices und in allen verfügbaren und aktuellen Browsern zu testen.




Ist meine Website responsive?

Wenn Sie nun wissen möchten, ob Ihre Website nun schon responsive ist oder wie sie sich auf mobilen Devices verhält, dann können Sie auf im Internet verfügbare Tools zurückgreifen, die einen schönen Überblick darüber geben.

Ein gute Emulator, mit denen auch wir gerne arbeiten, ist der Responsinator

http://www.responsinator.com/


Tippen Sie einfach Ihre Webadresse in das Feld neben „Enter your side“ und sehen Sie sofort wie Ihre Website auf den verschiedenen Endgeräten aussieht. Der Responsinator bietet eine Vielzahl an gängigen Screengrößen.


Im Web gibt es sehr viele Werkzeuge, mit denen man testen kann ob eine Seite responsive ist, oder nicht. Die verlässlichsten Tests macht man aber immer noch mit realen Devices. Selbstverständlich ist es jedoch nicht mögliche alle Endgeräte im Haus zu haben, daher arbeiten wir aus einer Kombination von Webtools und echten Endgeräten.



Best Practice

www.voeig.at

Eine der ersten Websites, die von newmagic responsive umgesetzt wurde, ist die der VÖIG. Es handelt sich dabei um eine sehr umfangreiche Website mit mehreren unterschiedlichen Templates und damit verbundenen Features. So gibt es ein Drop-Down-Menü mit vergleichsweise vielen Menüpunkten, dass es für die Smartphone-Variante praktikabel zu machen galt. Das typische Quadrat mit horizontalen Linien, welches für das Vorhandensein eines Menüs steht, erscheint auf kleineren mobilen Devices. Ein Klick darauf und das Menü wird angezeigt.


Augenfällig ist auch dass für das Smartphone das gestalterische Element der Slideshow wegfällt, da diese am Handy nur noch sehr klein dargestellt würde und somit keinen Mehrwert mehr für den User darstellt.


Auf der nachfolgenden Abbildung sehen Sie wie sich die Website responsive verhält.

Sie wollen über Entwicklungen, Neuigkeiten und Events von newmagic auf dem Laufenden bleiben? Tragen Sie sich in unseren Newsletter ein!