Cristian Gheorghiu - Webdesign Blog » Webdesign

Was ist Responsive Design

Was ist Responsive Design

 

Erfahren Sie was Responsive Design ist, wie es funktioniert und wieso Ihre Firmenwebsite es unbedingt braucht.

Das Responsive Design ist eine Technologie die Ihre Website automatisch an die Bildschirmgröße mobiler Geräte anpasst.
Was vor wenigen Jahren noch ein Trend war, gehört Heute zum Standard einer Website.

Auch Google belohnt jede Website die für mobile Geräte optimiert wurde und auf dem Desktop-PC, dem Notebook sowie auf Tablet und Smartphone gut funktionieren.
Das Repsonsive Design kann daher zur Onpage-Optimierung Ihrer SEO Maßnahmen gezählt werden.


Woher kommt das Responsive Webdesign

Das Wort „responsive“ stammt aus dem englischen und kommt von „response“ was so viel bedeutet wie Reaktion, gedanklich übersetzt kann man es so beschreiben: „Es reagiert automatisch auf das Gerät und passt sich auf die jeweilige Bildschirmgröße an.“

Seit den 90er Jahren existieren Smartphones und wurden täglich genutzt, bis 2007 Apple das iPhone auf den Markt brachte und die Smartphones den Markt nur so überrannten.
Da unterschiedlich großangelegte Studien bewiesen wie rasant die Smartphone-Nutzung weltweit anstieg, mussten auch Webseitenbetreiber darauf reagieren und ihre Websites umrüsten.
Websites die nicht auf mobile Bildschirmgrößen optimiert wurden, wurden häufig extrem gequetscht angezeigt oder waren nur teilweise im sichtbaren Bereich, ein ständiges und nervendes Zoomen war an der Tagesordnung.
Zum Anfang entwickelten die Webseitenbetreiber dann eine zweite, mobile Version Ihrer Website und ließen diese beispielsweise über eine Subdomain parallel laufen, kam also ein Smartphone-Nutzer wurde dieser automatisch auf die mobile Variante umgeleitet.
Da diese Art einer mobilen Website nicht auf Dauer tragbar war, da man in den meisten Fällen nun zwei Websites pflegen musste, brauchte man eine komfortablere Technologie für Websites.

Die Bezeichnung „Responsive Webdesign“ wurde erst 2010 von Ethan Marcotte etabliert, also ungefähr ca. 3 Jahre später nach dem Smartphone-Boom.
Unter Responsive Webdesign verstand man eine Technologie die den Aufbau und die Inhalte einer Website automatisch an die Bildschirmgröße anpasste, sei es beispielsweise ein Tablet-PC mit 10 Zoll oder ein Smartphone mit 5,5 Zoll, die mobile Variante einer Website unter separater Domain fiel somit weg.

Dennoch existieren noch Heute unzählige Websites, aus der historischen Zeit vor der Smartphone-Nutzung, die Heute weder eine mobile Variante anbieten noch ein Responsive Design einsetzen.


Ein Beispiel wie sich das Responsive Design an die verschiedenen Geräte unterschiedlich anpasst.

Wie funktioniert Responsive Design

Wie bereits gesagt reagiert das Responsive Design auf die Bildschirmgröße mobiler Geräte und passt den Aufbau und die Inhalte Ihrer Website automatisch an die Breite und Höhe der Bildschirme an.

Wo auf dem Desktop drei Spalten zu sehen sind, können es beispielsweise auf dem Tablet nur noch zwei Spalten sein und auf dem Smartphone nur noch eine Spalte (siehe Beispiel-Grafik oben).
Alle Inhalte werden auf die maximale Breite der Bildschirme automatisch angepasst mithilfe von CSS und Javascript. Ihre Bilder werden beispielsweise automatisch verkleinert, die Schriftgröße passt sich automatisch an und bleibt lesbar, Block-Elemente wie gestaltete Boxen werden passend angeordnet und deren Größenverhältnis angepasst, das Heranzoomen des Inhalts fällt weg. Auch Hintergrundbilder können beispielsweise so weiterhin zentriert dargestellt werden und können den ganzen sichtbaren Bereich ausfüllen.

Designs mit fester Breite sind nunmehr Vergangenheit


Damals wurden die Websites fast immer für eine feste Breite konzipiert, oftmals waren es 960-1024 Pixel. Diese Breite sah auf dem Desktop und auf dem Notebook sehr gut aus, größere Bildschirme z.B. mit 17 oder 19 Zoll und mehr haben die Website mittig dargestellt und hatten große leere Flächen seitlich der festgelegten Breite die ungenutzt blieben.

Heute sind Designs flexibler und können dank weiterentwickelter CSS-Anweisungen prozentual zur Bildschirmgröße konzipiert werden.
Das heißt die Breite des Designs ist nicht mehr zwingend festgelegt, sondern kann auf die gesamte Bildschirmbreite ausgedehnt werden egal ob 7, 15 oder 21 Zoll Bildschirme.


Wichtige Gründe für ein Responsive Design

Wieso ist ein Responsive Design für eine Website so wichtig?

Kurz und knackig gesagt, es ist komfortablerer für Ihre Nutzer die Ihre Firmenwebsite über mobile Geräte besuchen.
Sie bieten Ihren Nutzern eine optimierte Website an die, die Nutzung auf kleineren Bildschirme erheblich erleichtert und Ihre Website ist bestenfalls immer für Ihre Nutzer optimiert.


1. Es verbessert stark die Benutzererfahrung Ihrer Website.

Die Benutzererfahrung (englisch auch User Experience, kurz UX) ist das A und O Ihrer Website und bestimmt im hohen Maß auch den Erfolg Ihrer Website.

2. Es kann den Umsatz erhöhen, den Sie mit Ihrer Website erzielen.

Ihre Angebote sei es Produkte oder Dienstleistungen, werden auf dem Desktop wie auch auf dem Smartphone ordentlich dargestellt.

3. Das Responsive Design verringert die Absprungrate Ihrer Besucher.

Wenn eine Website nicht richtig dargestellt wird (unabhängig von Gerät und Bildschirmauflösung), verschwindet der Besucher schneller als er „Website“ sagen kann.

4. Es ist Heute ein Webstandard den Google im Ranking sichtlich belohnt.

Websites die nicht für mobile Geräte optimiert wurden, werden offiziell im Ranking abgestraft. Besonders Google versucht so ein hervorragendes Nutzererlebnis zu fördern.

5. Inhalte werden auf mobile Geräte richtig dargestellt.

Kein nerviges Zoomen, keine unlesbaren Texte und keine abgeschnittene Bilder, das Responsive Design regelt das Größenverhältnis Ihrer Website-Inhalte.


Fazit – Responsive Design

Ich denke die Vorteile eines Responsive Designs liegen nun klar auf der Hand, auch das ein Responsive Design hauptsächlich für eine optimale Nutzererfahrung auf Ihrer Website extrem wichtig ist. Da Ihre Website dadurch geräteunabhängig wird, können Ihre Besucher Ihre Website von überall aufrufen und das vor allem auch Unterwegs mit dem Smartphone, was die Conversion Rate Ihrer Website erheblich verbessern kann.
Für lokale Unternehmen, Dienstleister und Ladengeschäfte ist ein Responsive Design zwingend notwendig, da es immer jemanden gibt der „Mal schnell im Internet“ suchen möchte und das Smartphone zückt. Ein Beispiel wäre, die Suche nach den Öffnungszeiten (oder Lieferzeiten) und dem Angebot eines Restaurants in der Nähe oder die schnelle Suche nach einem Handwerker oder einem Taxi-Unternehmen.

Denken Sie immer daran Sie erstellen Ihre Website für Ihre Interessenten, also ist eine Optimierung für die Nutzer selbstverständlich.


Ich hoffe dieser Beitrag konnte Ihnen zum Thema Responsive Design weiterhelfen, hinterlassen Sie mir gerne einen Kommentar mit Ihrer Meinung über Responsive Design und mobile Websites.

 

War dieser Beitrag hilfreich?

 

 

Stichwörter: , , , , ,
Kategorie:
Archiv:
Geschrieben am 19.11.2017 - 20:30 Uhr
Zuletzt geändert am 17.09.2019 - 19:33 Uhr

 

 

Das könnte Sie auch interessieren:

Das sollte Ihre Firmenwebsite unbedingt bieten
Bilder für die Firmenwebsite optimieren
Einsteiger - SEO-Grundlagen für Ihre Firmenwebsite

 

Fanden Sie diesen Beitrag interessant?

Mit meinem kostenlosen Newsletter bleiben Sie immer auf dem neuesten Stand.

Folgen Sie mir über meine Kanäle

Zum Seitenanfang