Responsive Webdesign

Es ist noch gar nicht so viele Jahre her, da hat die Suche nach einer Website im Internet auch die Suche nach einem Internetcafe oder dem heimischen PC beinhaltet.

Mittlerweile gehen viele Statistiken davon aus, dass in wenigen Jahren weit über 50 % aller Internetzugriffe von einem mobilen Gerät aus geschehen werden.

Websites für Mobilgeräte

Mobile Nutzung des Internets

Wir Menschen wollen Informationen schnell und überall. Wir möchten sie aber auch punktgenau und übersichtlich präsentiert bekommen. Schaut man sich Websites auf gängigen mobilen Endgeräten an, dann ist man aber oft gezwungen diese zu scrollen, zu zoomen oder sie sind gar nicht lesbar.

Dies muss und wird sich ändern. Wer im Internet einen erfolgreichen Auftritt hinlegen möchte, der muss alle potentiellen Kunden erreichen können. Dazu gehören eben auch die mobilen Nutzer.

Um das Webdesign für mobile Geräte optimal zu gestalten muss man gewissen Regeln folgen und moderne Technologien nutzen.

Da kommen dann Begriffe wie Responsive Webdesign, Meta-Vieports und Media Queries ins Spiel. Was diese bedeuten und wie sie im Alltag des Webdesigns einfließen – darum geht es in diesem und den folgenden Beiträgen.

 

Was ist Responsive Webdesign?

Responsive Webdesign nennt man eine Technik des Webdesigns, die es erlaubt, Websites auf verschiedenen Endgeräten mit unterschiedlichen Anzeigeformaten und Auflösungen anzuzeigen, ohne dass der Nutzer hierfür unterschiedliche Versionen der Seite angeboten bekommt bzw. aufrufen muss .

Der Marktanteil an Stationären Geräten sinkt

Was vor einigen Jahren nur wenige Marktforscher wirklich geglaubt haben ist nun langsam Wirklichkeit geworden. Der Marktanteil von mobilen Geräten wie Smartphones und Tablets ist so groß geworden, dass schon vom Untergang des PC gesprochen wird. Natürlich werden die PCs und Laptops in den nächsten Jahren auch einen Teil ihres Marktsegments verteidigen können, aber sie werden wohl ihre Marktbeherrschung deutlich verlieren.

Noch immer scheint aber die Mehrzahl der Webentwickler und Webmaster ihre Seiten hautptsächlich für  Bildschirmgrößen von stationären Geräten optimiert zu haben. Schaut man sich diese Seiten auf einem Handy an, dann ist entweder die Schrift sehr klein oder ein Teil der Information ist nur durch Scrollen oder Zoomen erreichbar.

Ein Artikel von Ethan Marcotte verändert das Webdesign

Im Jahr 2010 erscheint im Webmagazin »A List Apart« ein Artikel mit dem Titel »Responsive Webdesign«. Diesen Begriff, den der amerikanische Webdesigner Ethan Marcotte als Verfasser des Artikels in den Raum stellte kannte man vorher kaum und natürlich erst recht nicht außerhalb des englischen Sprachraums.

Die von Ethan Marcotte in dem Beitrag beschrieben Grundidee einer sich der Bildschirmbreite anpassender Website klang plausibel und interessant. Trotzdem konnte man in dem Moment nicht wirklich vermuten, dass der Artikel mit dieser Grundidee die Welt von Webdesign und Webentwicklung nachhaltug verändern sollte.


 

Responsive Webdesign für mobile Endgeräte

Responsive Webdesign heute

Die optimale Anzeige von Websites unabhängig von der Auflösung und Größe der Geräteanzeige – dies ist das Ziel von Responsive Webdesign. Die Technik dahinter basiert auf der Idee der Verwendung des gleichen HTML-Codes auf allen Geräten. Die Darstellung der Inhalte auf den unterschiedlichen Anzeigen geschieht über CSS.

Die Information des verwendeten Gerätes bzw. der gerade verwendeten Anzeige und Auflösung wird durch das ViewPort-Meta-Tag bereitgestellt.

Der entscheidende Vorteil von Responsive Webdesign gegenüber anderen Verfahren ist die Bereitstellung weitgehend identischer Webinhalte auf allen Endgeräten. Die gleiche URL der Website wird für mobile und stationäre Geräte verwendet. Auch die Pflege der Seiten wird effizienter, da keine getrennten Websites für unterschiedliche Auflösungen gepflegt werden müssen.

Wir werden uns in den kommenden Artikeln tiefer mit dem Thema „Responsive Webdesign“ beschäftigen und dabei auch die Alternativen betrachten.

Bild: ©Nmedia – Fotolia.com


 


Keine Kommentare

Trackbacks/Pingbacks

  1. Website bereit für mobile Geräte | Webdesign, Kreativität und mehr - […] optimierten Mobiltauglichkeit gibt es eine ganze Reihe. Man kann sich für den modernen Ansatz des Responsive Webdesigns oder einer…

Einen Kommentar schreiben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentarlinks könnten nofollow frei sein.