You are here

Responsive Webdesign

responsive webdesign beispiel

Responsive Webdesign - Warum braucht es meine Webseite?

Bei zunehmender Anzahl an Mobilgeräten wie Handys und Tablets kam Responsive Webdesign als eine logische Weiterentwicklung der Webseiten-Darstellung. Die Verwendung von Mobilgeräten zur Betrachtung von Webinhalten in (nicht nur) Deutschland wächst rasant und somit wird dem Responsive Webdesign immer größere Bedeutung zugetragen. Als ein Zwischenschritt hat man zu einer Desktop-Variante eine zusätzliche mobile Version der Webseite programmiert. Diese Vorgehensweise entpuppte sich schnell nicht nur als extrem aufwendig, da man jeden Inhalt doppelt pflegen musste, sondern auch nachteilig im Bezug auf Positionierung bei den Suchmaschinen (SEO).

Was ist Responsive Webdesign?

Responsive Webdesign Definition

Webseiten mit responsivem also “reagierendem” Webdesign passen sich in Layout und Funktion an das jeweiligen Endgerät an und werden somit für den Webseitenbesucher optimal dargestellt. Dabei orientieren sich responsive Webseiten an der Breite des jeweiligen Endgeräts, bzw an der Breite des Browserfenster.

Bei Responsive Webdesign handelt es also sich um eine gestalterische Konzeption einer Webseite, bei der sich der Inhalt automatisch und flexibel an das jeweilige Endgerät anpasst. Auf dem ersten Blick könnte man meinen, dass sich die Webseite nur von Aussehen her angepasst wird, aber ausser das Layout werden auch andere wichtige Merkmale optimiert:
Ladezeiten können durch optimierte Bilder verringert werden, Schriftgrößen für eine bessere Lesbarkeit angepasst werden und auch die Implementierung spezifischer für Mobilgeräte gedachte Funktionen ist möglich. Zu solchen gehören zum Beispiel die Möglichkeit eines direkten Anrufs.

Eine gut geschriebene responsive Webseite ist in vielen Fällen ein würdiger Ersatz für eine native Applikation (iOS, Android). Da eine extra Applikation herunterzuladen und zu installieren doch oft eine deutliche Hürde darstellt, ist eine responsive Webseite, (die im Aussehen und Funktionalitäten einer Applikation oft nicht nachsteht) die bessere und günstigere Alternative.

Warum Responsive Webdesign?

Die Vorteile dieser Webentwicklungsmethode liegen auf der Hand. Jeder, der schon mal eine Webseite selbst regelmäßig aktualisieren musste, wird folgende Eigenschaften für wertvoll empfinden:

  • Zeit sparen
    Mit Responsive Webdesign sparen Sie Zeit, weil der Inhalt der Homepage nur einmal eingegeben werden muss. Das erleichtert auch die Pflege der Webseite, denn die Ergänzungen, Aktualisierungen und Korrekturen werden nur an einem Ort durchgeführt. Das betrifft auch die Anpassung von Bildern und Videos. Alle neuen Funktionalitäten der Seite müssen nur ein Mal programmiert und implementiert werden. So spart man bei der Weiterentwicklung der Webseite Zeit und Geld.
  • Fehler vermeiden
    Wer schon eine Webseite mit einer zusätzlichen mobilen Version pflegen dürfte, wird die Vorteile des responsiven Webdesigns zu schätzen wissen. Unter Zeitdruck vergisst man schnell die mobile Variante zu aktualisieren und Ihr Internetauftritt vermittelt falsche Informationen. Im Falle eines Online-Shops und zwei unterschiedlichen Preisen können die Folgen deutlich spürbar sein. Auch das Verlinken Ihrer Webseite kann mithilfe von Responsive Webdesign deutlich vereinfacht werden. Sollten Sie bei Ihrer E-Mail-Kampagne einen Link zu Ihrer Webseite mitsenden, müssen Sie sich nicht mehr sorgen, dass der Besucher/potenzielle Kunde auf einem „falschen“ Endgerät ihre Homepage aufruft, denn sie passt sich immer automatisch an.
  • Responsive Webdesign - SEO : Besser gefunden werden
    Responsive Webdesign spielt eine sehr wichtige Rolle bei der Suchmaschinenoptimierung (SEO). Jeder Inhalt, der unter mehreren unterschiedlichen Links (URL´s) auffindbar ist, wertet Ihre Webseite ab. Mit einem Webmaster-Richtlinien-Update („Mobile Friendly Update“ - April 2015) hat Google auch offiziell bestätigt, dass responsive Webseiten bevorzugt werden. Bis zu diesem Zeitpunkt hat Google bei der Gestaltung Ihrer Rankings die Desktop-Ansicht/Version ihrer Webseite berücksichtigt. Das wird sich laut Google in den nächsten Monaten auch ändern, und Ihren Platz in den Suchergebnissen wird anhand der Mobile-Ansicht Ihrer Webseite berechnet. Spätestens jetzt sollten Sie Ihre Homepage neu programmieren lassen, damit Sie den wertvollen und hart erarbeiteten Suchmaschinen-Platz nicht verlieren.

Wie funktioniert Responsive Webdesign?

Bei responsive Webdesign werden Direktiven, die für das Aussehen der Webseite verantwortlich sind (Layout, Funktionen) in mehrfache Asuführung geschrieben. Dabei werden für verschiedenen Bildschirmgrößen eigene Formatierungen mittels einer Weiche (Media Queries) festgelegt, die dann so die Ausgabe der Webseite bestimmen. Zusätzlich kann bei der Programmierung der responsiven Webseite nach einem Device Pixel Ratio unterschieden werden um die Webseite an das jeweilige Endgerät bestmöglich anzupassen.

Responsive Webdesign Beispiele

Responsive Webdesign Beispiele können wir mittlerweile (zum Glück) bereits in sehr vielen Web-Projekten wiederfinden. Da wir in den letzten Jahren ausschließlich Webseiten mit responsiven Webdesign erstellt haben, gilt auch jedes Projekt in unserem Portfolio als Beispiel.

Redesign und die Entwicklung der neuen Webseite für die RaumstarArchitekten aus Berlin

raumstar.de

Bei der Webseite von dem Raumstar Architekten standen große, eindrucksvolle Bilder im Vordergrund. Hier war es uns wichtig, trotz vieler Informationen und Bilder die Klarheit und Übersichtlichkeit zu bewahren und mit der großen Menge an qualitativ hochwertigen Bilder eine gute Performance (Ladezeit) der Seite sicherzustellen.

Responsive Webdesign für Sparks42

sparks42.com

Da die Größe des Desktop Bildschirms eine enorme Übersichtlichkeit im vergleich zu einem Smartphone bietet, haben wir für mobile Endgeräte die Anzahl an Animationen reduziert. So konnten wir den Zugang zu den wichtigen Informationen auf dem Handy verbessern und mit minimalistischen und zurückhaltenden Animationen die Desktop Version aufwerten.

Sinai

sinai.de

Die Webseite der Landschaftsarchitekten Sinai ist ein gutes Beispiel dafür, dass bei dem Nutzererlebnis nicht nur die strukturelle Aufbereitung der Inhalte eine große Rolle spielt. Die optimale grafische Darstellung und entsprechende Gestaltung der Benutzeroberfläche trägt dazu bei, dass die potentiellen Kunden und Mitarbeiter auch auf mobilen Endgeräten immer an Ihrem Ziel kommen.
Bei der News-Slideshow war es uns wichtig, dass die Anzahl der Nachrichten auch auf die Bildschirmgröße reagiert und immer nur so viele Elemente dargestellt werden, die die Benutzer auf einem Blick erfassen können.
 

Responsive Webdesign Berlin

Wir sitzen in Berlin, was nicht bedeutet dass wir Projekte nur In Berlin und Umland realisieren. Heute ist ein reger Austausch während des Projekts über Videotelefonie (Skype, etc.) sehr praktikabel und fast alles lässt sich über E-Mails und am Telefon auch schnell erklären.

Hier finden Sie uns:

IT-stent
Stendaler Str. 4
10559 Berlin

Responsive Webdesign Test - Ist Ihre Webseite bereits responsive?

Es gibt zahlreiche Responsive Check Tools (KW) im Internet mit denen Sie ganz einfach prüfen können ob Ihre webseite bereits über responsive webdesign verfügt. Alternativ können Sie Ihre Webseite einfach auf Ihrem Handy aufrufen und auf folgende Eigenschaften/Punkten achten:

  • sind alle Links und BUttons ohne Probleme anklickbar?
  • können Sie den Text ohne die Seite vergrößern zu müssen problemlos lesen?
  • Sind die Motive auf den Bildern gut erkennbar?
  • Passt der ganze Inhalt auf Ihrem Display oder müssen sie beim lesen nach rechts und links swypen?
  • Ist Navigation problemlos zu bedienen?

Wenn Sie alle Fragen mit Ja beantworten können, haben Sie entweder eine Webseiten mit responsivem Webdesign oder Glück :)
 

 

Sie können Ihre Webseite selbst überprüfen, ob sie für mobile Geräte optimiert wurde. Folgen Sie diesen Link, oder schicken Sie uns die Adresse Ihrer Webseite (URL).