Webdesign responsive

  • -
Beispiele für ein responsive Webdesign.

Webdesign responsive

Was bedeutet eigentlich Webdesign responsive?

Immer wieder werden wir von der Online-Marketing-Agentur Nordwest-Marketing gefragt, was eigentlich „responsive Webdesign“ bedeutet. Und häufig wird sogar in der Suchmschine Google von Menschen in Leer, Emden, Aurich, Wittmund, dem Ammerland. Emsland und Oldenburg nach Webdesign responsive gesucht. Wir möchten Ihnen in diesem Beitrag einmal erklären, was sich hinter dem sogenannten responsive Design einer Website verbirgt und wie Sie selbst ganz einfach herausfinden können, ob Ihre Seite das Webdesign responsive erfüllt.

Eine Website (Internetauftritt) sollte heute responsive sein

Im Mai 2015 gab Google bekannt, dass die Zahl der Suchanfragen über mobile Endgeräte (Tablets und Smartphones) die Zahl der Suchanfragen über Desktop klar übersteigt. Schnell wurde allen SEO-Spezialisten klar, worauf Google mit dieser Ankündigung hinaus wollte. Und die nächste Ankündigung des Suchgiganten folgte auch prompt: Ein Webdesign muss responsive sein! Konkret heißt das: Beim Webdesign responsive setzt Google inzwischen die Mes slatte sehr hoch an. Soll heißen: Alle Web-Auftritte, die nicht für mobile Endgeräte wie ein Smartphone (natürlich auch I-Phones) oder ein Tablet optimiert sind, werden in den Suchergebnissen auf einem schlechteren Platz angezeigt – sie fallen im Ranking.

Responsive Webdesign hat etwas mit der Programmierung eines Internetauftritts zu tun, insbesondere mit den Einstellungen im CSS (Cascading Style Sheets). Ein responsive Webdesign bedient sich in der Regel eines sogenannten Fluiden Layouts. Das bedeutet, der Programmierer stellt einzelnen Bereichen einer Webseite prozentual Platz zur Verfügung. Verändert sich der zur Verfügung stehende Platz, was ja automatisch geschieht, umso kleiner das Gerät wird, legt der Programmierer sogenannte prozentuale Umbruchpunkte fest, an denen sich das Layout verändert. Das Ergebnis: Eine Webseite sieht auf einem Laptop mit 17 Zoll Monitor ganz anders aus als auf einem Smartphone der Marke Samsung Galaxy S 6.

Im Zusammenhang mit dem responsive Webdesign fällt auch immer wieder der Begriff „Adaptive Webdesign“. Hier steht nicht das Design im Vordergrund, sondern das Gerät, auf dem die Website angezeigt wird. So wird für unterschiedliche Geräte (z.B. eine Breite von 320 Pixel, 768 Pixel oder 1024 Pixel) ein völlig anderes Template (Layout) programmiert. Nachteil: Das Adaptive Webdesign muss immer dann nachgebessert werden, wenn ein neues Endgerät (beispielsweise ein Smartphone mini) auf den Markt kommt.

So testen Sie das Webdesign responsive Ihrer eigenen Internetseiten

Um zu sehen, ob das Webdesign Ihrer eigenen Webseiten responsive sind, gibt es einen einfachen Trick:

  1. Rufen Sie bitte im Google-Chrome-Browser Ihre Startseite auf – in unserem Beispiel nordwest-marketing.de
    Webdesign responsive am Beispiel von Nordwest-Marketing - als Beispiel für Unternehmen aus Leer, Emden, Aurich, Wittmund, dem Ammerland, dem Emsland und Oldenburg.

    Das responsive Webdesign der Nordwest-Marketing GmbH – als Beispiel für Unternehmen aus Leer, Emden, Aurich, Wittmund, dem Ammerland, dem Emsland und Oldenburg.

     

  2. Klicken Sie mit der rechten Maustaste in einen möglichst leeren Bereich Ihrer Internetseite. Es öffnet sich ein kleines Fenster. Hier klicken Sie mit der linken Maustaste auf „Prüfen“.
    Plugin von Google Chrome öffnen

    Klicken Sie mit der rechten Maustaste in einen möglichst leeren Bereich Ihrer Website, um das Plugin von Google Chrome zu öffnen.

     

  3. Es öffnet sich im unteren Bereich Ihres Bildschirms ein neues Fenster.
    Responsive Webdesign: Geöffnetes Plugin von Google Chrome.

    Es öffnet sich im unteren Bereich Ihres Bildschirms ein neues Fenster.

     

  4. In diesem Fenster finden Sie am oberen, linken Rand ein Symbol, das einem Smartphone gleicht. Klicken Sie bitte auf dieses Symbol.

    Responsive Webdesign: Das Plugin von Google Chrome.

    In diesem Fenster finden Sie am oberen, linken Rand ein Symbol, das einem Smartphone gleicht.

  5. Ihre Internetseiten werden in einem kleinen Format angezeigt.

    Responsive Webdesign: Erklärung zum Plugin.

    Ihre Internetseiten werden in einem kleinen Format angezeigt.

  6. Im oberen Bereich des Fensters finden Sie neben Device „select model“. Sie können hier ein Endgerät Ihrer Wahl aussuchen.

    Im oberen Bereich des Fensters finden Sie neben Device „select model“.

    Im oberen Bereich des Fensters finden Sie neben Device „select model“.

  7. Oder Sie ziehen einfach an dem verkleinerten Fenster an der unteren, rechten Ecke.

    Webdesign responsive: Sie können auch einfach an der unteren rechten Ecke mit der Maus ziehen und so das Fenster vergrößern oder verkleinern.

    Sie können auch einfach an der unteren rechten Ecke mit der Maus ziehen und so das Fenster vergrößern oder verkleinern.

  8. Wichtig ist nur eines: Wird der Inhalt Ihrer Internetseite komplett angezeigt? Oder müssen Sie die Seite am unteren Scrollbalken nach links oder rechts verschieben, um alles sehen zu können?

Wenn das der Fall ist, dass Sie im unteren Bereich des kleinen Fensters einen Scrollbalken sehen, dann entspricht Ihr Internetauftritt nicht dem „Webdesign responsive“. Hier wäre also eine dringende Nachbesserung nötig! Denn für die Suchmaschinenoptimierung ist das responsive Webdesign elementar!


Onlinemarketing-Lexikon

Wir können Ihnen folgende Literatur empfehlen

Nutzen Sie unser umfangreiches Online-Marketing-Wissen für Ihr Unternehmen!