Es werde Weiß – Gedanken zum SPIEGEL ONLINE Rebrush
7. September 2016
Unser heutiger Gast: Webentwicklerin Sarah
22. September 2016

Responsive Design vs. Mobile Website (Infografik)

Responsive Design vs. Mobile Website

Tag für Tag steigt die Zahl der Nutzer, die sich mit Hilfe ihres Smartphones oder Tablets durch das Internet fortbewegen. Dadurch ist es umso wichtiger geworden, Website-Inhalte an die verschiedenen Endgeräte visuell und technisch anzupassen.

Dazu stehen zwei Möglichkeiten zur Auswahl:

1. Responsive Design

Bei Responsive Webdesign wird die eigentliche Website dynamisch an die unterschiedlichen Displaygrößen angepasst. Der Inhalt der auf einem Smartphone abgebildet wird, ist der gleiche wie im Browserfenster eines PCs. Design, Funktionen und Inhalte passen sich dem jeweiligen Device an.

2. Mobile Websites

Hier werden zwei Layouts erstellt, eines für die klassische Desktopnutzung und ein Design für mobile Geräte. Geschwindigkeit, Inhalte und die Bedienung sind somit optimal auf diese Art der Nutzung abgestimmt.

Beide Varianten haben ihre Vor- und Nachteile.


Am Ende des Artikels findet ihr eine übersichtliche Infografik zum Vergleich von responsive Design & mobiler Website


Vorteile mobiles Layout:

  • Spezielle Inhalte können individuell auf mobile Verwendung angepasst werden
  • Schnelle Seitenladezeit: Aufgrund der Optimierung der Inhalte für kleine Geräte, müssen weniger Daten gesendet werden, was gerade bei Smartphones von Vorteil ist
  • Separate Änderungen an den Layout-Versionen möglich

Nachteile:

  • Höherer Zeitaufwand: Mehrere Layouts müssen gepflegt werden
  • Nicht immer wird das verwendete Gerät erkannt, und mobile Darstellung angezeigt
  • Zwei verschiedene URLs, die mehr oder weniger den selben Inhalt enthalten (aus SEO-Sicht nicht ideal)

Vorteile Responsive Design:

  • Geringerer Zeit- und Kostenaufwand da nur ein Layout gepflegt werden muss
  • Webdesign passt sich jedem Gerät an
  • Desktop und Smartphone Wahrnehmung stimmen exakt überein
  • Positive Auswirkung auf Google Ranking der Site
  • Einfachere statistische Auswertung
  • Kostengünstiger

Zu den Nachteilen gehören:

  • Umfangreiche Navigations-Menüs sind auf dem Smartphones meist zu groß
  • Manchmal schlechtere Usability, da Inhalte oftmals einfach nur untereinander angezeigt werden
  • längere Datenladezeit

 

Fazit: Einen Gewinner der Gegenüberstellung kann man nicht küren. Die Entscheidung hängt stark vom Zweck sowie der Komplexität der jeweiligen Website ab. Mobiles Design eignet sich vor allem bei komplexeren Anwendungen und Inhalten, die sich nicht automatisch für kleine Display optimieren lassen – z.B. für E-Commerce, Shops oder Portale. Die Verwendung von Responsive Design ist ideal für Websites, Blogs und redaktionelle Inhalte.

Der Vergleich responsive vs. mobile als Infografik: 

Wir haben alle Vor- und Nachteile von responsive Design und sepzifischer mobiler Website in der folgenden Infografik übersichtlich zusammengefasst.

Infografik Responsive vs. Mobile Design

Gerne könnt ihr die Grafik auch teilen!