Pluswerk
Responsive Webdesign / Mobile Website

Responsive Webdesign/ Mobile Website

Responsive Webdesign / Mobile Web


Es gibt mehr mobile Endgeräte als Menschen auf der Erde. Bereits 2014 entsteht weltweit mehr Traffic durch Mobilgeräte als durch Desktopgeräte. Ständig wächst die Anzahl unterschiedlicher Endgeräte und damit die Variationen in Auflösungen:

  • Seitenverhältnis der Bildschirme
  • Pixeldichten
  • Verwendete Browser
  • Renderingtechniken
  • Verfügbare Schriften

Ein Content, ein Backend, ein grundsätzliches Design - für alle Ausgabegeräte. Die Website passt sich immer automatisch dem Bildschirm des Ausgabegerätes an. 

Individuelle Möglichkeiten

Responsive Webdesign passt Ihre Website allen Ausgabegeräte an – doch wie?
Es gibt verschiedene Ansätze zur Anpassung und jede davon hat ihre eigenen Vorteile.
Welche Option die richtige für Ihr Projekt ist, wird durch zahlreiche konzeptionelle Entscheidungen bestimmt. Wir beraten Sie fachkundig und finden den besten Weg für Sie.  

In den folgenden Abschnitten stellen wir Ihnen zunächst die verschiedenen Möglichkeiten vor.

Adaptive Design

Eine adaptiv geplante Webseite orientiert sich an verschiedenen Displaygrößen. Es werden also für verschiedene Ansichten, exakte „Viewports“ (sichtbarer Bereich innerhalb des Browserfensters) entwickelt. Das sind üblicherweise Desktop-, Tablet- und Smartphone-Ansichten. Das adaptive Design ist also eine Optimierung auf vorher festgelegte Ausgabegeräte und zeichnet sich durch die unkomplizierte Umsetzung und hohen gestalterischen Freiraum aus.

Liquid Design

Bei einem Liquid oder Fluid Design wird ein flexibles Gestaltungsraster auf Basis von prozentualen Werten konzipiert. Es wird lediglich eine maximale und eine minimale Breite angeben, zwischen diesen Größen passt sich das Design an alle Ausgabegeräte an und der jeweilige Viewport kann optimal ausgenutzt werden.

Elastic Design

Elastic Design hat große Ähnlichkeit mit dem Liquid Design, die Maßeinheit ist hier aber „em“ (eine Maßeinheit, die sich an der Größe der verwendeten Schrift orientiert). Anders als beim Liquid Design sind beim Elastic Design nicht die Breiten relevant, die Größenveränderung findet proportional statt und orientiert sich an der Schriftgröße des Nutzers. Elastic Design ist besonders für textlastige und typografische Seiten geeignet.

Hybrid Design

Das Hybrid Design verbindet die Eigenschaften von verschiedenen Designtechniken in einem Layout. So kann zum Beispiel das Menü einer Website adaptiv sein, während der Rest der Seite im Liquid Layout gestaltet wurde. Dadurch kann das Design ganz individuell auf Ihre Anforderungen zugeschnitten werden.