Nicht selten kommt es vor, dass man beim Besuch bestimmter Seiten vom Smartphone aus deren Inhalt kaum oder nur sehr schwer lesen kann und dieser auch keineswegs optisch ansprechend gestaltet ist. Wenn man nun gerade keine Zeit oder keine Lust dazu hat, die für einen interessanten Bereiche mühselig mit zwei Fingern zu vergrößern und zu verschieben, um sich den Text oder die Grafik ansehen zu können, schließt man den Browser rasch wieder oder wechselt die Seite. Diese Nutzerunfreundlichkeit aufgrund der Tatsache, dass vor allem mobile Seiten nur rudimentär umgesetzt sind und die nötigsten Funktionen äußerst spartanisch angeboten werden, kann das daher durchaus dazu führen, dass den jeweiligen Seitenbetreibern ein Geschäft durch die Lappen geht.
Das responsive Webdesign, das sich dynamisch dem Endgerät anpasst, sorgt nun für mehr Usability auf diesem Sektor.
Was ist responsive Webdesign?
Responsive heißt in diesem Zusammenhang so viel wie reaktionsfähig, weshalb es sich in der Praxis um ein Webdesign handelt, bei welchem der grafische Aufbau von Webseiten unter Berücksichtigung der jeweiligen Anforderungen des Endgeräts wie Rechner oder Smartphone dynamisch erfolgt. Zu diesem grafischen Aufbau zählt in erster Linie die Strukturierung der vorkommenden Einzelelemente wie unter anderem Text und Navigation. Technische Basis des responsive Webdesigns sind die neuesten Webstandards wie CSS3 und HTML5.
Da Auflösung und Bildschirmgröße des Displays von Endgeräten wie PC, Tablet-Computer, Laptop, Smartphone oder Fernseher erheblich variieren, sind auch Erscheinungsbild und Bedienung von Webseiten unterschiedlich und von den jeweiligen Gegebenheiten abhängig. Werden die Seiten nun mit responsive Webdesign bereitgestellt, berücksichtigen diese die jeweiligen Anforderungen des Endgeräts und optimieren daher automatisch deren Darstellung und Navigationselemente. Einzig wichtiges Kriterium für die Anpassung ist üblicherweise die Pixelanzahl, die in der Breite vom Browser genutzt werden kann.
Voraussetzungen für das responsive Webdesign
Eine wesentliche Voraussetzung für das responsive Webdesign, also für die flexible Anpassung an die technischen Gegebenheiten des Endgeräts zugunsten einer größeren Benutzerfreundlichkeit, sind die sogenannten Media Queries, wobei es sich um ein CSS3-Konzept handelt, das in Abhängigkeit von ganz bestimmten Eigenschaften des jeweiligen Ausgabemediums unterschiedlichste Designs erlaubt. Solche Kriterien sind zum Beispiel neben der Bildschirmauflösung die Größe des Endgeräts und des Displays, Eingabemöglichkeiten wie etwa Touch, Sprache oder Tastatur, außerdem ob es sich um ein Hoch- oder um ein Querformat handelt.
Innerhalb der Ressourcenbandbreite können die Programmierer des responsive Webdesigns nun die speziellen Anpassungen für die entsprechenden Geräte vornehmen.
Die drei wichtigsten Punkte bei der Programmierung
- keine fixen Layout-Grids br>
Es werden Pixelwerte nur prozentual und nicht in fest vorgegebener Anzahl verwendet,
damit sich die jeweilige Seite den Gegebenheiten anpassen und auf den Nutzer reagieren
kann. - keine fixen Schriftgrößen br>
Auch hier wird nur mit prozentualen Werten gearbeitet, wobei bestimmte Plugins
eigenständig die Größen von Headlines skalieren. - keine fixen Bildgrößen br>
Die Grafik wird flexibel an die Bildschirmauflösung angepasst, damit lange Ladezeiten
vermieden werden.
Abschließend ist zu sagen, dass das responsive Webdesign definitiv als zukunftsweisender Trend angesehen werden kann – für jene, die ihre Seite auch allen mobilen Plattformen bequem und ohne Punkteabzüge für etwa lange Wartzeiten beim Laden oder schlechte Grafiken zugänglich machen wollen, und natürlich auch für alle Nutzer, die sich damit an der optimalen Umsetzung von den Darstellungen und der Bedienung erfreuen können.
Hi, klasse Artikel. Jedoch eine Frage: Wieso keine feste Schriftgröße ? Ist mir neu und hatte ich bisher auch nicht nicht gemacht. Ich gebe die Schriftgrößen beim responsiven Webdesign immer in Pixel an – Ist das falsch ?
Hi Mario,
Danke. Durch prozentuale Schriftgrößen erreicht man, dass bei 100% oder auch 1em die Standard Schriftgröße des jeweiligen Gerätes genommen wird und nicht ein unter Umständen viel zu kleines oder großes Pixelmaß.
Gruß Andreas
Hallo Andreas,
vielen dank für die einfache und verständliche
Erklärung.
Danke für den Artikel, der hat mir so einiges erklärt ! Jetzt überlege ich ob das für mich überhaupt Sinn machen würde, es gibt ja für Mobile und Tablet noch andere Möglichkeiten per App oder ähnliches, andererseits ist responsive Webdesign sicherlich die proffesionellste Lösung ! Ist es für einen Programmierer ein großer Aufwand sowas im nachhinein einzustellen ?
Der Aufwand für eine nachträgliche Umstellung kann schon groß sein. Das hängt natürlich davon ab, wie viel angepasst werden muss. Bei einem WordPress Blog muss unter Umständen sogar das Theme ausgetauscht werden. Aus Erfahrung kann ich sagen, dass das einiges an Aufwand bedeutet.
Klasse, danke für die Antwort ;-)
Habe mir schon gedacht, dass der Aufwand sehr groß ist, wird aber wohl die Zukunft sein !