Responsive Webdesign



Was ist Responsive Webdesign?
Wer heutzutage eine Website besucht setzt voraus, dass sich diese jederzeit ohne Einschränkungen und optisch ansprechend bedienen lässt. Was selbstverständlich klingt wird erst möglich durch das sogenannte Responsive Webdesign: Das "reagierende" Webdesign passt sich automatisch einer beliebigen Bildschirmgröße an. So wird eine Website flexibel und immer passend sowohl auf Monitoren als auch auf Tablets und Smartphones dargestellt. Texte werden in lesbarer Größe angezeigt, Buttons und Menüs bleiben so groß, dass man sie auch auf einem Handy problemlos auswählen kann.
Responsive Webdesign, Beispiel: memedia Webseite

Wo liegt der Unterschied: Mobile oder Responsive Website?
Mobile Websites werden "parallel" zur Desktop-Version entwickelt. Die beiden Versionen haben also zwei unterschiedliche Grundgerüste, zwei unterschiedliche Layouts und Templates. Dies bedeutet doppelte Arbeit und doppelten Zeitaufwand bei der Entwicklung. Zudem werden mobile Websites über eine eigene Adresse aufgerufen z.B.: mobil.domainname.de. Dadurch werden sie von Suchmaschinen als komplett eigenständige Website eingestuft.

Die Vorteile:

  • Eine mobile Version kann unabhängig von der bestehenden Seite erstellt werden.
  • Die Performance bei einer separaten Website ist einfacher zu kontrollieren (z.B. durch weniger Inhalte und Features).
Die Nachteile:

  • Mehrere URLs: Redirects und zusätzliche SEO-Arbeiten werden benötigt.
  • Wartung: Zwei getrennte Websites erfordern doppelte Wartungsarbeiten.
  • Inhaltsreduzierung: Mobile Seiten bieten grundsätzlich weniger Platz. Zudem werden die separaten mobilen Inhalte häufig gekürzt, um die zusätzlichen Wartungskosten gering zu halten.

Im Responsive Webdesign hingegen ist nur eine Version der Website nötig: ein Grundgerüst, ein Layout und gleichbleibende Templates. Das Layout wird dank des flexiblen Gerüsts immer automatisch an die verfügbare Umgebung angepasst. Die Domain bleibt in jeder Ansicht einzigartig .

Die Vorteile:

  • Eine einzige Website: einfacher zu administrieren.
  • Eine einzige URL: keine Redirects, schnellerer Aufbau.
  • Einfacheres SEO: spezielle Inhalte für die mobile Version sind nicht erforderlich
  • Benutzerfreundlichkeit: Usability auf jedem Ausgabegerät.
  • Geringe Kosten: eine Website ist günstiger als zwei.

Die Nachteile:

  • Die Bilderskalierung kann zu Performanceverlusten bei der mobilen Ansicht führen.
  • Einige Werbebanner können nur begrenzt automatisch angepasst werden.
  • Zeitintensiv in der Erstentwicklung (Konzeption & Design).

Wie funktioniert Responsive Webdesign?
Bilder, Texte, Bereiche, Tabellen: Alle Elemente der Website passen sich der Breite des Browsers an.
Damit eine Website auf allen Endgeräten optimal funktioniert und benutzerfreundlich bleibt, ist ein spezielles Konzept erforderlich. Vom kleinsten Ausgabemedium bis hin zur Desktop-Version müssen die Struktur und das Layout der Seite harmonisch designt sein.
Responsive Webdesign Grid und Bereiche

Damit eine Website in jeder Bildschirmbreite, auf jedem Tablet und auf jedem anderen mobilen Endgerät perfekt dargestellt wird, kommen die "normalen" Webtechniken wie HTML und CSS3 zum Einsatz. Zudem muss ein flexibles Grundgerüst – ein Raster – erstellt werden. Ebenso werden "Sprungmarken" gesetzt, die dem Layout je nach Bildschirmbreite des Endgeräts kleine Änderungen vorgeben: So werden zum Beispiel einzelne Elemente ab einer vorgegebenen Bildschirmbreite verkleinert oder in die nächste Zeile verschoben.

Wieso Responsive?
Die Anzahl der mobilen Internetnutzer steigt
Das Responsive Webdesign ist heutzutage ein Standard, den jede Website erfüllen sollte. Der Anteil der Nutzer, die mobil auf das Internet zugreifen, steigt weiter an. Im Jahr 2013 nutzten bereits 70 % das Internet über Ihr Smartphone. (Quelle: http://de.statista.com)

Usability und Absprungrate
Das flexible Layout ist notwendig, damit jedem Besucher, egal wo er ist und welches Endgerät er verwendet, eine Website immer optimal und benutzerfreundlich dargestellt wird. Die Absprungrate wird reduziert, da die Usability auf jedem Ausgabegerät gegeben ist und der Anwender sich wohl fühlt. Im Gegensatz zu einer mobilen Website müssen Besucher bei einer Website im Responsive Design nicht auf Inhalte oder Features verzichten, und nicht etwa zwei, sondern nur eine Website muss gepflegt – und bezahlt werden.

SEO
Responsive Webdesign wird auch von Google empfohlen. Denn im Responsive Webdesign wird nur eine URL verwendet und ein gleichbleibender HTML Code ausgegeben. Dies verhindert auch Probleme mit Duplicate Content, der durch mehrere Versionen einer Website entsteht und von Google herausgefiltert oder gar negativ bewertet wird. Zudem kann die Website von Google leichter indexiert werden.

Responsive Webdesign

Kontaktdaten

Weinbauernstr. 12a
81539 München
Deutschland

+49 (0)89 - 219 09 80 - 0
info@memedia.de

Den ersten Schritt machen!