Hintergrundbild

Was ist Responsive Webdesign?

WebDesign made in Darmstadt
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

Bild zu 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!

Bild zu 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?

Muss ich meine Internetseite jetzt komplett neu erstellen lassen?

Bild zu 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">

Resumé

Bild zu Resumé
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
Logo 3w-web.deHeiko Grzonka ist ein freelance Webdesigner aus Darmstadt / Hessen.
Ich biete Ihnen unter anderem folgende Leistungen an: Webdesign, Strategische Beratung, Suchmaschinenoptimierung (SEO) oder die Wartung Ihrer Internetseite.
Meine Spezialitäten sind das Erstellen von komplexen Internetseiten mit Datenbanken, PHP, jQuery und CSS3
Bieten Sie Ihren Kunden das Besondere und binden Sie sie, auch über dieses Medium, an sich.

Ich freue mich auf Sie!

Der klassische Weg

oder Sie besuchen mich

oder Sie scheiben mir direkt eine Nachricht

absenden