Responsive“ beschreibt eine Gestaltungstechnik im Webdesign, bei der ein Website-Layout so gestaltet wird, dass es sich automatisch den Gegebenheiten des jeweiligen Endgerätes (Smartphone, Tablet, PC) anpasst.

Eine Website für alle Endgeräte

Seit mehr als sieben Jahren beschäftigen wir uns mit der responsiven Gestaltungstechnik und setzen sie bei fast jeder Website ein. Der Vorteil liegt auf der Hand: die responsive gestaltete Internetseite ist von jedem Endgerät aus, ob Smartphone, Tablet-PC oder Desktop-Computer, erreichbar und wird kompatibel auf dem Gerät dargestellt. Mit dieser Technik können auch spezielle Inhalte, die entweder nur für Smartphone-Nutzer oder für PC-Nutzer vorbehalten sind, eingeblendet werden.

Bootstrap als Mobile-First Frond-End-Framework

BootstrapEine große Erleichterung in der Webentwicklung liefert uns Webdesigner und Programmierer das Mobile-First Frond-End-Framework von Bootstrap. Es enthält Gestaltungsvorlagen für Typografie, Formulare, Buttons und Tabellen und wird dem Design einer Website angepasst. Mit Bootstrap wird die Entwicklung einer Website nicht nur beschleunigt, auch Kosten können eingespart werden, da die Umsetzung eines eigenen Responsive-Frameworks entfällt.

Wie funktioniert Responsive Webdesign?

Grundlegend passt sich das Layout an der Displaygröße des Endgerätes an. Wenn man sich einmal näher betrachtet wie, wird schnell klar, dass diese Lösung relativ simpel ist:

  • Für alle Endgeräte:

    * { ... }
    Dieser Code gilt für alle Displayauflösungen.
  • Tablet Portrait:

    @media (min-width: 768px) { * { ... } }
    Diese Methode gilt nur für Displaygrößen ab 768 Pixel, was einer Displaygröße eines Tablet-PCs im Hochformat entspricht.
  • Smartphones:

    @media (max-width: 767px) { * { ... } }
    Diese Methode gilt nur für Displaygrößen bis 767 Pixel, was einer Displaygröße eines Smartphones entspricht.
  • Desktop / PC:

    @media (min-width: 1200px) { * { ... } }
    Diese Methode gilt für Desktop-PCs mit einer Mindestgröße des Displays ab 1200 Pixel.

Durch die Feststellung per CSS, wie groß ein Display ist, können für unterschiedliche Displaygrößen individuelle Elemente gestaltet und angepasst werden. So lässt sich schnell feststellen, welches Endgerät auf einer Website genutzt wird. Wie bereits erwähnt, können spezielle Inhalte für die unterschiedlichen Endgeräte ein- oder ausgeblendet werden. Die Möglichkeit lässt realisieren, dass ein Inhalt der ausschließlich für Smartphonenutzer interessant ist, auch nur auf Smartphones eingeblendet wird.

Alle Vorteile eines Responsive Layouts nutzen!

Es ist kein Nachteil in die Aufrüstung einer Webseite zu investieren. Durch die Nutzung eines Responsive-Layouts ergeben sich viele Vorteile, die zur Produktivität und Umsatzsteigerung beitragen. Sowohl bestehende Internetseiten ohne Content-Management System als auch Internetseiten mit mir reinen HTML-Seiten lassen sich nachträglich an ein Responsive Design anpassen — ohne dass daraus Nachteile entstehen.

Lassen Sie sich umfassend beraten!

Ob und inwiefern Ihre bestehende Webseite angepasst werden kann, erfahren Sie in einem persönlichen Gespräch und in einer ersten absolut kostenfreien Analyse Ihrer Internetseite.

Vorteile eines Responsive-Layouts:

  • die Website ist vom Smartphone, Tablet und PC aus erreichbar und kann fehlerlos dargestellt werden
  • vorbehaltene Inhalte können gezielt für jedes Endgerät ein- oder ausgeblendet werden
  • erhöhte Erfolge in den Suchmaschinen; Vermeidung mehrerer Website-Versionen, kein doppelter Content, nur eine URL
  • hardwareunabhängiges Design; eine Website für alle Endgeräte
Ich bringe Sie nach oben!