Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Gastbeitrag: Homepage selbermachen

Mobile Webseiten und Responsive Design im Vergleich

Arijana.gast_autor / 0 Antworten / Baumansicht Nickles
(Foto: Pexels.com)

Betreiber von Webseiten sehen sich zunehmend mit der Herausforderung konfrontiert, ihre Webpräsenz an neue Hardwareanforderungen anzupassen. Zu einer steigenden Zielgruppe gehören Smartphone- und Tabletbesitzer.

Hinzu kommen Videokonsolen und Smart-TVs. Abhängig von der Bildschirmgröße- und form müssen Webseitenelemente neu angeordnet werden.

Bei besonders kleinen Bildschirmen besteht die Schwierigkeit darin, dem Nutzer eine Vielfalt an Inhalten zu bieten und die Übersichtlichkeit zu bewahren. Große Bildschirme überlassen dem Entwickler mehr Spielraum. Um dem Nutzer eine anschauliche Darstellung zu bieten, sollte auf Lehrräume aber verzichtet werden. Zur Gestaltung stehen dem Betreiber zwei Ansätze zur Wahl.

Mobile Webseiten
Dieser Ansatz verfolgt das Ziel, Seiten speziell für Smartphones oder Tablets zu entwerfen. Später können sie unter einer separaten Domäne aufgerufen werden, etwa 'm.pfad.de'. Wird die ursprüngliche Domäne aufgerufen, steht es dem Nutzer frei, zwischen der mobilen- und klassischen Version zu wählen.

Sind die entsprechenden Einstellungen gesetzt, kann eine automatische Erkennung des Gerätes und entsprechende Weiterleitung ausgeführt werden. Mobile Webseiten unterscheiden sich von der Desktopversion, da Inhalte und Design neu entworfen wurden. Auf der Oberfläche ist meist nur eine Teilmenge zu sehen, während die übrigen Inhalte über eine Leiste eingeschoben werden können. Dennoch nehmen sich Entwickler oft die Freiheit, auf Features der Desktopversion zu verzichten.

Responsive Design
Responsive Design ist eine Entwicklungstechnik, die auf eine Trennung der Domäne verzichtet. Stattdessen soll sich eine Webseite auf die Hardwareanforderungen des Clients automatisch anpassen lassen. Wenn ein Nutzer eine Domäne aufruft, kann der Server während des Verbindungsaufbaus den Typ des Nutzergerätes erfragen und Information über die Bildschirmgröße erlangen.

Dies bietet die Möglichkeit, das Webseitendesign dynamisch zuzuschneiden. Im Vorfeld muss die Webseite im sogenannten Säulenmuster entwickelt werden. Inhalte werden in separate Spalten unterteilt, etwa in ein Menü- oder Newsleiste. Ein Desktop- oder Laptoprechner stellt Webseiten im Drei-Säulen Format dar. Ein Tablet unterstützt das Zwei-Säulen Format und muss die Dritte mit den ersten beiden verschmelzen. Ein Smartphone stellt eine Webseite nur noch im Ein-Säulen Format dar.

Mobile vs. Responsive im Vergleich
Der wesentliche Vorteil einer mobilen Webseite ist die Entwicklungsfreiheit, mit der ein Webseitenbetreiber seine Plattform gestalten kann. So ist er an das Säulenmuster nicht gebunden und kann mit einem individuellen Design überzeugen. Im Umkehrschluss bedeutet dies einen höheren Entwicklungsaufwand.

Eine Abhilfe können Baukastensysteme schaffen. Hier bieten die mobil optimierten Webseiten von websitebutler.de die Möglichkeit die eigene Webpräsenz für alle Endgeräte in wenigen Schritten, einfach und effektiv umgesetzen. Mit dem Baukastensystem können Frames neu angeordnet werden, ohne das Konzept neu zu entwickeln. Es können Inhalte in Container, sogenannte Frames verpackt und an gewünschte Stellen platziert werden. Die bietet den Vorteil, wenn die Webseite erweitert und mit Inhalten befüllt werden muss.

Im Vergleich ist Responsive Design ein dynamischer Ansatz, der den Entwickler bei der Layoutgestaltung erleichtert. Bei der Vielfalt an Bildschirmgrößen und Endgeräten ist Responsive Design eine zuverlässige Lösung. Ein weiterer Vorteil ist, dass Nutzer der Desktopversion ihren Browser verkleinern können und sich die Webseite an ein entsprechendes Säulenformat anpasst.

Zu einem Nachteil zählt, dass das Säulenformat eingehalten werden muss. Baukastensysteme bieten vorgefertigte Schablonen, die man mit eigenen Inhalten befüllen kann. So ist sichergestellt, dass die dynamische Anpassung fehlerfrei funktioniert. Im Übrigen lassen sich beide Ansätze kombinieren. In der Desktopversion wird eine Webseite abhängig von der Fenstergröße eines Browsers nach dem Responsive Design zugeschnitten, während für tragbare Endgeräte eine mobile Webseite mit individuellem Design angeboten wird.

Hinweis: Es handelt sich hier um eine Information eines Anbieters, Sponsors oder Partners. Fragen, Meinungen und Diskussionen zur Mitteilung sind herzlich willkommen. Beiträge die sich nicht auf das Thema beziehen sind hier jedoch fehl am Platz und werden kommentarlos gelöscht.

bei Antwort benachrichtigen