Was ist eigentlich Responsive Design?

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.

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:

Beispiel Responsive Design

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:

Aktivieren Sie JavaScript um das Video zu sehen.
http://youtu.be/t1KQmC5db1k

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.

Letzte Version vom 13. Mai 2015 von Netzgänger
Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


7 Kommentare

  1. Tobias sagt:

    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

  2. Warrior14 sagt:

    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! 🙂

  3. Telemetrie15 sagt:

    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.

  4. Peter sagt:

    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 🙂

  5. Daniel sagt:

    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

  6. MAyKay sagt:

    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.

Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt