Was ist Responsive Webdesign

Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt oder kurz RWD, englisch responsive, deutsch „reagierend“) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können.

Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Website betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (tippen, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JavaScript.

Quelle: https://de.wikipedia.org/wiki/Responsive_Webdesign

Was heisst das?

Einfach gesagt: Ihre Webseite ist auf allen Endgeräten, gut lesbar und die Informationen der Webseite, werden auf allen Endgeräten, dem Betrachter optimal zur Verfügung gestellt.

Ihre Webseite erkennt, welches Endgerät gerade der Betrachter nutzt und baut sich entsprechend auf.

Auch auf die Ladegeschwindigkeit der Internetseite nimmt responsive Design Einfluss.
Nutzt ein Betrachter der Seite ein Smartphone, werden automatisch kleine Bilder angezeigt.
Nutzt der Betrachter ein Desktop oder Notebook, wird das Bild in seiner vollen Pracht und Größe dargestellt.

Haben Sie bereits eine Internetseite? 
Wenn ja, dann rufen Sie diese mal über ihr Smartphone auf. 

- Ist der Inhalt Ihrer Seite auch ohne Lupe oder Adleraugen gut lesbar? 
- Müssen Sie die Seite auf Ihrem Smartphone nicht ranzoomen, damit Sie etwas erkennen können? 
- Können Sie einfach navigieren, ohne mit Ihren Fingern Zielübungen auf dem TouchScreen durchführen zu müssen?
- Wird die Seite schnell geladen, auch wenn Sie keine WLAN, LTE oder 4G Verbindung haben? 

Dann scheint sich Ihre Internetseite bereits an das jeweilige Gerät anzupassen. 

Wenn nicht, sollten Sie dies ändern.

Ich möchte Ihnen nur zwei, aber wahrscheinlich wesentlichsten Gründe dafür nennen.

Gründe für responsive webDesign

1. Nutzerverhalten:

Immer mehr Menschen nutzen das Smartphone für die Nutzung des Internets, unabhängig vom Alter. In Deutschland sind es mittlerweile fast 2 von 3 Nutzern. Tendenz steigend.
Quelle: https://www.welt.de/wirtschaft/webwelt/article172746408/D21-Bericht-zur-Lage-der-Internetnutzung-in-Deutschland.html

Sie sehen also, wenn Ihre Seite nicht für die mobilen Engeräte optimiert ist, können Sie mittelfristig Probleme mit der Akzeptanz Ihres Webauftrittes bekommen.

2. Natürlich google: 

Ab Juli 2018 werden Seiten, die langsam laden in den Rankings benachteiligt. 
Quelle: https://t3n.de/news/mobile-first-index-startet-google-1000368/

Dabei gilt die Devise: 

Mobile First!

Das heisst, dass die Internetseite nicht mehr als erstes für die Desktopansicht gestaltet werden sollte, sondern zuerst für die Ansicht auf dem Smartphone und dann erst für die Desktopansicht.

Ist Ihre Internetseite bereits für Mobile Endgeräte optimiert?

Testen Sie es doch einfach: https://search.google.com/test/mobile-friendly

Muss ich meine Internetseite jetzt komplett neu erstellen lassen?

Die Antwort lautet ganz klar Jein.

Natürlich kommt es darauf an, wie Ihre bisherige Seite gestaltet ist.
Pauschal kann man sagen, dass folgende Punkte analysiert werden müssen:

1. Bilder:

Diese müssen responsive fähig sein. Was heisst das. 
Zum einen darf die Massangabe (Breite/Höhe) in der Internetseite nicht fix, also in Pixel hinterlegt werden. 
Zum anderen bleibt zu überprüfen, ob eventuell die Dateien noch zusätzlich als kleinere Dateien zur Verfügung gestellt werden müssen.

2. StyleSheet(s) :

Entweder man erstellt extra für Smartphones neue Stylesheets (css) und bindet diese dann in die Website ein. 
Oder man implementiert die neuen Stylesheetsanweisungen in die bestehenden Dateien.

3. Navigation:

Je umfangreicher die Navigationspunkte sind, um so notwendiger ist es, diese mobile freundlich zu gestalten. 
Sind die Hauptpunkte in der Desktopversion noch sichtbar, so sind diese in der mobile Version meist versteckt, und erst nach dem "Aufklappen" sichtbar. Das spart Platz und die einzelnen Navigationspunkte sind gut lesbar.

4. Metadaten:

Hier muss der sogenannte Viewport definiert werden. Somit wird Ihre Seite auch auf mobilen Endgeräten korrekt dargestellt.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Resume

Aufgrund der Tatsache, dass bereits jetzt mehr als 65% der Nutzer das Internet via Smartphone nutzen, ist responsive Design ein Muss, wenn man einen Internetauftritt hat.

Verlieren Sie keine Kunden nur weil Sie darauf verzichten. 
Besonders wenn die Informationen auf Ihrer Webseite sehr gut sind.

Sie haben noch Fragen? Dann kontaktieren Sie mich. 
Ich helfe und unterstütze Sie sehr gern.

kontaktieren Sie mich

weitere Fragen ?

Schnellkontakt .

Ich freue mich auf Ihre Anfrage, um Ihr Projekt oder Vorhaben unverbindlich und kostenlos zu besprechen.
Bitte füllen Sie hierzu folgendes Formular aus.
Ich werde mich dann schnellstmöglich mit Ihnen in Verbindung setzen.

Alle mit (*) gekennzeichneten Felder müssen ausgefüllt werden.

absenden

oder !

3w-web.de