• 0Einkaufswagen
IN-SEO.de
  • Startseite
  • Leistungen
    • Website SEO Analyse
    • SEO Beratung
    • Linkbuilding Agentur
    • Texte
    • SEO Agentur
    • Social Media Marketing
    • Webdesign
    • SEO für Branchen, Berufe & mehr
    • SEO für Jeden und alles
    • Experte Virales Marketing
    • Linkabbau
    • Amazon SEO Agentur München
  • Referenzen
  • Shop
  • Kontakt
    • Über uns
    • Was kostet SEO?
    • Lexikon
    • Meine Bücher
    • Partner & Freunde
    • Übersicht
    • SEO Checkliste
    • Blog
    • SEO lernen
    • Impressum
    • Datenschutzerklärung
  • Suche
  • Menü Menü

SEO-Check kostenlos!

Responsive Webdesign

Responsives Webdesign beschreibt eine grundsätzliche Denkweise, die sich auf die Gestaltung und Technik von Websites bezieht. Dabei stehen im Fokus die Eigenschaften der Website, die auf die verschiedenen Endgeräte reagieren müssen. Webdesigner nutzen für die Erstellung einer responsiven Website die aktuellen Webstandards JavaScript, CSS und HTML jeweils in der neuesten Fassung. Der Begriff “Responsives Design” verwendete Ethan Marcotte im Jahr 2010, allerdings in Bezug auf die Architektur. Ein Jahr später wiederholte er in seinem Buch “Responsive Webdesign” den Begriff.

Die Gestaltung einer Website

Der Zugriff auf das Internet erfolgt über verschiedene Endgeräte wie Desktop-PC, Smartphone, Tablets, Fernsehgeräten, Laptops und E-Book-Readern. Jedes dieser Geräte verfügt über eine andere Größe und Auflösung des Bildschirms oder Displays. Ebenfalls variiert bei Endgeräte die Bedienung, die entweder über die Maus oder per Touchscreen erfolgt. Auch differiert die Bandbreite der Internetverbindung bei den einzelnen Endgeräten. Websites, welche Webdesigner starr gestalten, sind nicht auf alle Geräte übertragbar. Fachleute wählen für die Website ein Design, das reaktionsfähig ist und die verschiedenen Anforderungen der diversen Endgeräte erfüllt. Wichtig dabei die Benutzerfreundlichkeit des Internetauftritts.

Webdesign aus München
Die unterschiedliche Gestaltung bezieht sich hauptsächlich auf Blockelemente. Hier passen Webdesigner das Viewport an, damit sich die Darstellung der Seite alternativ positioniert; je nach Größe und Auflösung des Displays. Diese Anpassung ist hauptsächlich bei Logos und Bilder notwendig. Textpassagen haben einen automatischen Umbruch. Dieser fordert lediglich eine kleine Skalierung des Inlineelements Text, damit die Lesbarkeit erhalten bleibt.

Abgrenzung zu anderen Gestaltungen – die mobile Webseite

Das responsive Webdesign unterscheidet sich von der mobilen Website. Der Unterschied besteht im Wesentlichen aus der Anzahl der Templates. Während beim mobilen Webdesign zur Desktop-Version für mobile Endgeräte ein zusätzliches Template zum Einsatz kommt, ist dies beim responsiven Design nicht der Fall. Hier erstellt der Webdesigner eine Version der Website, die sich den Gegebenheiten selbstständig anpasst.


Im Gegensatz zum responsiven Webdesign passt sich die adaptive Website nicht den verschiedenen Displays an. Sie beschränkt sich auf eine festgeschriebene Menge von Breakpoints. Zwischen diesen bleibt das Layout statisch; eine Anpassung an die Displays findet nicht statt. Bei der Gestaltung einer liquiden Website bleibt der verfügbare Platz für das liquide Layout stets im selben Verhältnis erhalten. Beim Verschieben werden die Inhalte der Website schmaler, die Elemente verändern sich jedoch nicht.

Die Technik beim responsivem Design

Eine wesentliche Voraussetzung für das responsive Design bilden die die Media Queries. Diese sind ein Konzept von CSS3. Dieses Konzept macht es möglich, verschiedene Designs abhängig von gewissen Eigenschaften des Ausgabegerätes zu kreieren. Folgende Kriterien kommen dafür in Betracht:


• Bildschirmauflösung,
• Größe des Geräts,
• Eingabemöglichkeiten
• Orientierung des Formats.


Experten betten Media Queries ins Stylesheet ein. Bestimmte Regeln der Browser kommen nur dann in Betracht, wenn sie definierten Anforderungen erfüllen. Damit auch ältere Browser die Website problemlos öffnen, rüsten Webdesigner ihre Seite mit Polyfills aus, welche der nicht vorhandenen Funktionalität der Browser durch JavaScript abhilft. Neben CSS3 gehören HTML ab Version 5 sowie JavaScript zu den Werkzeugen, mit denen Webdesigner beim responsiven Design arbeiten. In der Regel erfolgt die Umsetzung einer responsiven Website mit CSS Frameworks. Diese bringen eine große Anzahl Funktionen für die unterschiedlichen Größen und Auflösungen von mobilen Endgeräten.

  • SMX 2023: SEO und SEA Konferenz in München1. Dezember 2022 - 22:52

    Die Suchmaschinen bringen immer wieder neue Updates, die von den Suchmaschinenoptimierern zur Zufriedenheit von Google & Co. umgesetzt werden müssen. Es ist eine ganz neue Zeit angebrochen, die zwar erst am Anfang steht, doch viele Herausforderungen mit sich bringt. Die Ressourcen sind nicht unendlich und auch die Budgets sind es nicht. Die Kunden sind anspruchsvoller, […]

  • YouTube-SEO für bessere Rankings23. November 2022 - 11:01

    Um bei YouTube bessere Rankings zu erzielen, sollte für jedes einzelne Video eine SEO-Optimierung durchgeführt werden. Dies ist ähnlich zu betrachten wie die Optimierung der einer Webseite. Titel und Beschreibung sind ebenso ausschlaggebend für das Ranking bei YouTube, wie die Meta-Daten einer Webseite für eine organisches Ranking bei Google. Die Anleitung hilft dabei die YouTube-Videos […]

  • Besseres Keyword Matching = bessere Chancen für Nischen Keywords12. August 2022 - 08:53

    Google gibt eine klare Empfehlung für den Werbenden raus. Man soll von Exact Match auf Broad Match umstellen. Die Suchmaschine verändert die Art des Matchings, weil  es sich bei 15 Prozent der täglichen Suchanfragen immer neue Suchen handelt, die es zuvor noch nie gegeben hat. Praktische Umsetzung bei den Google Ads Man stellt nicht nur […]

  • Google Ads ScriptGoogle-Ads-Skripte können die Arbeit erleichtern12. August 2022 - 08:46

    Ist es möglich durch die Nutzung von Google-Ads-Skripten Zeit einzusparen? Ja, es ist möglich viel Zeit einzusparen. Ads-Skripte automatisieren Anhand von Google-Ads-Skripten können Änderungen im Google-Konto automatisiert vorgenommen werden. Durch die die Verwendung von Java-Script-Code, ist es möglich die Gebote zu verändern oder Anzeigengruppen zu pausieren. Darüber hinaus können Keywords hinzugefügt werden. D.h. man muss […]

  • Preissuchmaschine AmazonGoogle TrendsAmazon ist eine Suchmaschine oder eher Preissuchmaschine?5. August 2022 - 07:55

    Amazon ist im Laufe der Jahre zur Preissuchmaschine geworden. Dies hat sich bereits im Jahr 2015 herauskristallisiert. Seiner Zeit wurden zahlreiche Artikel dazu publiziert. „Suchmaschine: Amazon ist das neue Google“ lautete ein Artikel auf dem Amazon Watchblog. [1] Eine Umfrage des Marktforschungsunternehmens Mintel hat ergeben, dass 84% der Deutschen bei Amazon eingekauft haben. Die Verkaufsplattform […]

Nach oben scrollen
Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren. Weitere Informationen Akzeptieren Opt-Out