Sie sind hier

responsive Webdesign

Das responsive Webdesign steht für die Entwicklung von Webseiten, die bei der Darstellung der Inhalte auf Bildschirmgrößen und Anzeigegeräte reagieren können. Der Begriff „responsive“ kommt aus dem englischen und bedeutet „reagierend“.  Mithilfe moderner Webtechnologien wie HTML5 und CSS3 können diese Webseiten auf Desktop-PCs, Tablet-PCs und Smartphones gleichermaßen gut dargestellt und benutzt werden.

Entstehung des responsiven Webdesigns

Ursprünglich wurden Webseiten nur zur Darstellung auf Desktop bzw. Laptop-PCs entwickelt. Mit der Verbreitung der Smartphones entstand ein Bedarf nach mobilen Webseiten, die auch auf den kleinen Bildschirmen moderner Mobiltelefone angezeigt und bedient werden konnten. Zwar konnten Smartphones auch die klassischen Webseiten anzeigen, allerdings wurden diese Seiten in den Bildschirm der Telefone „eingepasst“ was zur Folge hatte, dass Inhalte und Navigationselemente kaum nutzbar waren. Somit begann man anfangs, eine zweite, mobile Version der Webseite zu entwickeln und diese zur Anzeige auf Smartphones bereitzustellen. Diese mobilen Webseiten waren ausschließlich zur Darstellung auf bestimmten Bildschirmgrößen entworfen und mussten separat gepflegt werden. Oftmals unterschieden sich die Inhalte in Umfang und Aktualität zur eigentlichen Desktop-Webseite. Aufgrund immer neuer mobiler Endgeräte (Phablet, Mini-Tablet-PCs, Tablet-PCs usw.) entstanden immer neue Bildschirmgrößen. Da die mobilen Webseiten der ersten Generation nur für bestimmte Bildschirmgrößen optimiert waren, machten sie oftmals bei abweichenden Bildschirmgrößen keine gute Figur. Der Aufwand zur Bereitstellung weiterer, alternativer mobiler Webseiten überstieg bei weitem den Nutzen für den Seitenbetreiber. Ein neues Webdesign-Konzept musste her.

HTML5 und CSS3 – der Beginn des mobilen Internets

Mit der Einführung des HTML5- und CSS3-Standards konnten Internetseiten so entwickelt werden, dass ein und dieselbe Webseite optimal auf verschiedenen Endgeräten dargestellt werden konnte. Beim mobilen Webdesign kann die Oberfläche mithilfe sogenannter „Media Queries“ und „Breakpoints“ so optimiert werden, das sie auf die Bildschirmbreite des Anzeigegeräts reagiert und die Inhalte entsprechend der Bildschirmbreite optimal anordnet. Diesen Webdesign-Ansatz nennt man „responsive Webdesign“. Auf diese Weise wird nur noch eine Webseite für alle existierenden und zukünftigen Anzeigegeräte benötigt.

Vorgehensweise beim responsiven Webdesign

Beim responsiven Webdesign muss jede Inhaltsseite zur Darstellung auf verschiedenen Endgeräten optimiert werden. Dadurch steigt beim responsiven Webdesign der Aufwand zur Planung der Oberfläche im Vergleich zum klassischen Webdesign für Desktop-PCs. Trotzdem spielt die primäre Ausrichtung der Webseite beim responsiven Webdesign eine große Rolle.

Desktop First
Möchte man mit seiner Webseite in erster Linie große Monitore bedienen, konzipiert, gestaltet und programmiert man die Webseite im ersten Schritt zur Darstellung auf Desktop/Laptop-PCs. Anschließend optimiert man die Webseite für die mobile Ansicht, die Seite wird so gut es geht auf das Wesentliche reduziert.

Mobile First
Steht die mobile Nutzung der Webseite im Vordergrund, ist der Weg genau umgekehrt. Beim Webdesign konzentriert man sich in erster Linie auf mobile Endgeräte. Besonders die Reduktion von Dateigrößen (Quellcode, Bilder, Javascripte), ein vereinfachtes Navigationskonzept und reduzierte Inhalte stehen beim mobilen Webdesign im Vordergrund. Anschließend wird die Seite für die Desktop-Ansicht optimiert.

Vorteile des responsiven Webdesigns

Bedenkt man, dass seit 2014 im weltweiten Durchschnitt mehr Benutzer das Internet mit mobilen Endgeräte wie Smartphones und Tablet-PCs benutzen als mit Desktop-PCs, steht der Sinn einer mobilen Webseite für den Seitenbetreiber außer Frage. Wer eine große Zielgruppe erreichen möchte, kommt um eine mobiloptimierte Webseite nicht mehr herum.

Zwar steigt der Aufwand zur Entwicklung einer mobiloptimierten Webseite, dafür werden Technologie und Inhalte an einer Stelle gepflegt. Dies reduziert den Wartungs- und redaktionellen Aufwand einer mobilen Webseite erheblich.

Aufgrund des responsiven Webdesign-Prozesses werden mobile Webseiten in allen Aspekten auf das Wesentliche reduziert. Durch die Verwendung moderner Technologien und Webstandards können diese Seiten nicht nur geräteübergreifend dargestellt werden, sondern die Inhalte einer mobiloptimierten Webseite können auch optimal von Suchmaschinen und Internetbrowsern verarbeitet werden. Dies führt dazu, dass mobiloptimierte Webseiten durch die Suchmaschinen besser bewertet werden als ihre Desktop-Konkurrenten und somit eine höhere Platzierung im Suchergebnis erreichen. Das bedeutet, dass eine mobiloptimierte Webseite die Grundlage einer erfolgreichen Suchmaschinenoptimierung darstellt.

Weitere Beiträge zum Thema responsive Webdesign:

Seiten

Sie möchten mehr erfahren?

Media GarageRufen Sie uns an! 0331 60 02 88 25