Viele Kunden, die bei mir Webseiten beauftragen, berücksichtigen in Ihren Erst-Anforderungen kein Responsive Design. Und häufig gar nicht einmal absichtlich, sondern schlicht, weil sie nicht wissen was Responsive Design überhaupt ist. Hier möchte ich eine kurze Einführung geben.
Inhaltsverzeichnis:
Was bedeutet nun Responsive Design?
Mit Responsive Design bezeichnet man die optimierte Darstellung von Webseiten für möglichst viele denkbare Endgeräte wie PCs, Laptops, Tablets, Smartphones. Dabei wird das ursprüngliche Layout in der Regel in einer verkleinerten Version dargestellt, die dann auf diesen Endgeräten für bessere Lesbarkeit sorgt.
Beispiele von Responsive Design
Wer meinen Blog mit einem Smartphone ansurft, liest diesen Artikel gerade in responsiver Ansicht, sprich für Smartphones optimiert. Für Desktopsurfer hier kurz dargestellt:
Es gibt natürlich ansonsten unzählige Beispiele für mobile Webseiten, wie z.B. Handycasino.de oder aber das WordPress Enfold Theme. Diese Seiten bedienen ganz gezielt die User mit optimierten Ansichten ihrer Webseiten.
Was bringt mir Responsive Design?
Responsive Design bringt aber nicht nur dem Besucher der Webseite eine verbesserte Erfahrung, sondern dem Webseitenbetreiber Vorteile bei der Positionierung in Google und Co. Es ist bekannt, dass responsive Webseiten in mobilen Suchergebnissen (SERPs) bessere Chancen auf gute Rankings haben.
Wie kann ich Responsive Design umsetzen?
Kurz beschrieben werden Responsive Webseiten durch die Nutzung von sogenannten Media Queries in CSS (Cascading Style Sheets) realisiert. Wie das geht, würde den Rahmen dieses Artikels sprengen. Es gibt für Responsive Design aber unzählige Tutorials, unter anderem auch in Videoform:
Responsive Design vom Fachmann
Wenn Sie sich nun fragen, wie Sie denn nun Ihre eigene Webseite responsive realisieren können, biete ich Ihnen gerne meine Unterstützung an.
Tobias
Ich danke Ihnen für den interessanten Beitrag. Responsive Design wird immer beliebter. Eine mobil optimierte Seite ist auch viel bequemer für den Nutzer am Smartphone.
Mit besten Grüßen,
Tobias
Warrior14
Danke für die Erklärung. Versuche auch im Moment meine Seite mit responsive Design auszustatten. Vielleicht hilft es ja meinen Besuchern beim Stöbern! 🙂
Telemetrie15
Ein schönes Beispiel und gut erklärt. Gibt sicherlich viele die noch nicht wissen wie wichtig das ist, vor allem auch für Unternehmen. Ich hab meine Seite zwar schon angepasst, aber nur weil mir ein Freund Responsive Design genauer erklärt hat.
Peter
Responsive wird heute immer wichtiger – ich sehe es an meinen eigenen Projekten und den mobilen Zugriffen.
Der Aufwand für ältere Webseiten kann mitunter erheblich sein, ich selbst muss sogar einige Seiten teilweise komplett umkrempeln .. naja, was tut man nicht für seine Besucher 🙂
Daniel
Hallo,
habe nun auch die letzte Seite von mir auf Responsive umgestellt.
Leider erscheint bei Google aber nur die Startseite mit dem Hinweis für Mobile und meine Unterseiten nicht !
Muß ich da noch was in der robots.txt ändern oder woran liegt das ?
Gruß sagt Daniel aus Magdeburg
René Dasbeck Post author
Wichtig ist, dass auf allen Seiten im Header der folgende Eintrag vorhanden ist. Fehlt der, erkennt Google die Seite nicht als responsive.
MAyKay
Sehr schöner Artikel über responsive Design. Kunden sollten sich vorab im klaren sein, dass Sie ihre Website auch für mobile Geräte auslegen.