info@2st-online.de        0391/405 96 978

Responsive Webdesign - Was bedeutet das?

Responsive WebdesignDer Begriff Responsive Webdesign beschreibt eine aktuelle Technik der Website-Gestaltung, die es ermöglicht mittels HTML5, CSS3 und Media-Queries ein einheitliches Anzeigen von Inhalten auf einer Website zu gewährleisten. Dabei wird das Layout der Website so flexibel gestaltet, dass dieses auf dem Desktop, Tablet und Smartphone gleichbleibende Benutzerfreundlichkeit bietet.

Der grafische Aufbau einer Website mit Responsive Webdesign erfolgt gemäß der Anforderungen des jeweils anfragenden Gerätes. Im Detail betrifft dies primär die Anordnung und Darstellung der Seitenelemente, wie Navigationen, Spalten und Texte, wie auch die Berücksichtigung unterschiedlicher Eingabemethoden wie Maus oder Touchscreen. Mobile Endgeräte erfordern flexible Websites!

Wo liegt der Unterschied zu einer separaten mobilen Website?

Der wesentliche Unterschied zwischen responsiven Design und einer mobilen Webseite besteht in der Anzahl der Template-Vorlagen. Klassisch ist die Desktop-Version die "normale Ansicht der Website" und für die mobile Endgeräte wie Tablets und Smartphones wird ein zusätzlich unabhängig gesteuertes Template erstellt. Hier werden meist Inhalte reduziert und Navigationen angepasst.

Eine Herausforderung liegt nun darin zu klären, welches Template für das anfragende Gerät vom Server ausgeliefert werden soll. Zur Differenzierung werden hier auch oft Datenbanken eingesetzt, wo entsprechende Eigenschaften wie Displaygröße und Auflösung des mobilen Endgerätes hinterlegt sind. Zusätzlich wird normalerweise ein Link "zur Mobilen Version wechseln" und "Zur Desktop-Version wechseln" eingeblendet.

Beim Responsive Webdesign wird nur ein Template für die Website erstellt. Dieses Template passt sich dann selbstständig der verfügbaren Auflösung des Displays an. Gut sichtbar wird das Verhalten des Responsive Webdesign, wenn die Breite des Browser-Fensters verändert wird. Die Anpassungen der Breite des Layout kann dynamisch erfolgen oder zu einem bestimmten "Breakpoint", an dem das Layout für die Größe des "Viewports" wechselt.

Beispiele Breakpoints bzw. Auflösungen typischer Viewports

  • Viewports bis zu 760px - Das Layout richtet sich primär an Smartphones
  • Viewports 760 bis 980px - gilt für Tabletts oder Landscape (Querformat) Smartphone
  • Viewports 980 bis 1280 Pixel - entspricht der "klassischen" Browserfenstergröße eines 4:3-Monitor 15-17 Zoll
  • Viewports ab 1280 Pixel - entspricht allen modernen Panels mit FullHD-Auflösung

Bei der Entwicklung eines Responsive Webdesign bzw. einer "responsiven" Webseite ist es am besten, mit Media Query und CSS für kleine Displays / Monitore zu beginnen und danach das Layout für alle höheren Auflösungen festzulegen.

Vorteile einer Website Optimierung mit Responsive Webdesign für Mobile Endgeräte

Vorteile von Responsive Webdesign zeigen sich vor allem in den Statistiken und Trends zur Nutzung mobiler Endgeräte. Der steigende Marktanteil von Tablets und Smartphones erzwingen ein Umdenken bei der Gestaltung von neuen Webseiten. Auch der zusätzliche Pflegeaufwand von redaktionellen Inhalten und Bildmaterial einer Mobile-Webversion entfällt mit einer "responsiven" Webseite. Dazu kommt, dass eine Mobile-Website gegebenenfalls für zukünftige Tablet- oder Smartphone-Formate weitere Templates und Webversion des Layouts benötigt.

Kostenfaktor Responsive Design - was kostet Responsive Webdesign?

Mit seiner geräteübergreifenden Flexibilität spielt Responsive Webdesign eine tragende Rolle und nimmt damit einen kosteneffizienten Faktor in der Kommunikations-Strategie eines Unternehmens ein. Denn mehr denn je muss heute ein erfolgreiches Unternehmen auf die Bedürfnisse - gerader der mobilen Nutzer und Zielgruppen - eingegangen, um potentielle Kunden optimal und zielführend ansprechen zu können. Die Kosten bei der Neuerstellung oder für den "Umbau" auf responsive Webdesign werden sich schnell rechnen. In vielen Fällen entspricht die Implementierung eines responsive Webdesigns bei vorhandenen Webauftritten einem Relaunch.

Unser Versprechen an Sie

Unser Versprechen an Sie

Wir bieten beste Services so schnell und effizient wie möglich.



 

Qualität Template

Ein wesentlicher Bestandteil jeder Website ist das Template. Wir setzten auf Frameworks mit hohen Qualitätsstandards.

 

Web Marketing

Websites attraktiver machen, mehr Kontakte, Kunden & Aufträge gewinnen, dass ist das Motto nach dem wir vorgehen.

 

Optimierte Darstellung

Internetseiten für die unterschiedliche Displaygrößen mobiler Endgeräte zurecht schneiden und programmieren.

 

Css3 Effekte

Die Homepage im Browser lebendig machen, die einfache Möglichkeit Layouts mit optischen Effekten zu versehen.

 

Hilfe & Support

Probleme mit eigener Homepage? Joomla Hilfe und Support für Websites schnell & unkompliziert via Telefon/Remote.

 

Technik Services

Full Service für Sie und Ihre Technik. Lösungen für Soft- & Hardware im Bereich Cloud, Netzwerk, Telefon und PC.