Responsive Webdesign

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äftige ich mich mit der responsiven Gestaltungstechnik und setze 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 nur noch 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.

 

Responsive im Detail:

Wie funktioniert responsive? Grundlegend passt sich das Layout an der Displaygröße eines 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:

* { ... }

Tablet Landscape:

@media (min-width: 992px) { * { ... } }

Tablet Portrait:

@media (min-width: 768px) { * { ... } }

Smartphones:

@media (max-width: 767px) { * { ... } }

Desktop / PC:

@media (min-width: 1200px) { * { ... } }


Durch die Feststellung, wie groß ein Display (Viewport) ist, können für unterschiedliche Endgeräte individuelle Elemente gestaltet und angepasst werden. So lässt sich schnell feststellen, welches Endgerät auf einer Website genutzt wird. Wie ich bereits erwähnt habe, 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 angezeigt wird.
 

Jetzt umsteigen und Vorteile eines responsiven Layouts nutzen!

Es ist nie falsch, in die Um- bzw. Aufrüstung seiner Website zu investieren. Durch die Nutzung eines Responsive-Layouts ergeben sich viele Vorteile, die unter Umständen zur Produktivität und / oder Umsatzsteigerung beitragen. Sowohl bestehende Internetseiten ohne CMS als auch Internetseiten mit CMS lassen sich nachträglich responsive anpassen, ohne dass daraus Nachteile entstehen.

Ich berate Sie gern und umfassend!
Ob und inwiefern Ihre bestehende Website responsive angepasst werden kann, erfahren Sie in einem persönlichen Gespräch und einer ersten absolut kostenfreien Analyse Ihrer Website.

Rufen Sie mich an oder schreiben Sie mir eine Nachricht über das Kontaktformular. Auf Wunsch rufe ich Sie gerne zurück.

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