Neues aus der September Werbeagentur

September Werbeagentur Dresden

Von responsive Websites und elastischem Design

Digitaler Verhaltenskodex

Wer sich eine Website gestalten lässt, weiß mittlerweile meist: Sie muss responsiv sein. Dann ist jedem klar, dass die Seite sowohl auf dem PC als auch auf Smartphone und Tablet schick aussieht. Der Teufel versteckt sich jedoch wie so oft im Detail: Wie soll sich die Seite an des Ausgabegerät anpassen und welche Auswirkungen hat das auf die Ladezeiten der Seite oder den Programmieraufwand? Um diese Fragen zu klären sollten wir zunächst zwischen dem Website-Typ und dem Layout-Typ unterscheiden.


Die Basis für den Aufbau der Seite: Website-Typen

Responsive Website

Responsiv beschreibt eine von zwei möglichen Verhaltensarten einer Website. Die bestmögliche Aufbereitung des Inhalts steht im Zentrum. Basis des responsiven Website-Typs sind sogenannte Breakpoints, also Punkte, an denen sich das Layout einer Seite an den darzustellenden Inhalt anpasst. Dieser wird neu angeordnet, skaliert oder ein- bzw. ausgeblendet – je nachdem, ob man sich eine Website auf dem Desktop, Tablet oder Smartphone anschaut. Ein Nachteil hinsichtlich der Ladezeit: Inhalte, die auf dem Tablet oder Smartphone nicht angezeigt werden, werden trotzdem im Hintergrund geladen.
In welchem Layout-Typ das Design der Seite umgesetzt wird, ist durch die Bezeichnung „responsive“ noch nicht beschrieben – hier kommen "fluid" Layout und "elastic" Layout ins Spiel (eine Erklärung dazu folgt weiter unten). Im Vorgespräch zu einer neuen oder zu überarbeitenden Webseite sollte also auch immer der unterschiedliche Aufwand für die Anpassung einer Webseite an die Endgeräte zur Sprache kommen: Responsiv bedeutet eben erst einmal nur Anpassung an etwas. Wie detailliert und ob alle nur denkbaren Formate zwischen den gängigen Standarddisplaygrößen funktionieren sollen, macht einen Unterschied von einigen Stunden in der Programmierung aus.
Vielen Kunden ist nicht bewusst, dass eine responsive Website nicht automatisch in jeder Auflösung optimal dargestellt wird. Text und Bild, die zwar auf gängigen Smartphones klasse aussehen, aber sich bei speziellen und herstellerindividuellen Displaygrößen plötzlich ins Gehege kommen, müssen also entsprechend der Ansprüche an eine saubere Darstellung angepasst werden. Es gilt also zu klären, ob es notwendig ist, die Seite für jede Auflösung zu optimieren (also auch für selten genutzte Zwischengrößen, die zwischen den häufig verwendeten Standardauflösungen liegen). Oder ob die Anpassung für die Standardgeräte ausreichend ist.

Adaptive Website

Die zweite mögliche Verhaltensart ist der adaptive Website-Typ: Er bringt für jedes Ausgabegerät ein eigenes Template mit. Je nachdem, auf welchem Gerät die Seite aufgerufen wird, stellt der Server, auf dem die Seite schlummert, das dafür eigens gestaltete Template mit den individuell notwendigen Grafiken und Funktionen bereit. Nicht nutzbarer Inhalt wird nicht geladen. Dies ist vor allem in Hinblick auf die Ladezeiten der Seite von großem Vorteil. So werden beispielsweise auf dem Smartphone nicht die großen Bilder für die Desktop-Anwendung geladen. Zudem ist eine flexible und perfekt auf das Endgerät angepasste Reihenfolge des Inhalts umsetzbar. Häufig kommt es bei einer responsiven Umsetzung mit Breakpoints zu dem Problem, dass der Kunde die Reihenfolge der Inhalte auf dem Smartphone gern ändern möchte. Diese ist allerdings abhängig von der Darstellung am Desktop sowie auf dem Tablet und kann deshalb nur sehr eingeschränkt angepasst werden. Dieses Problem entsteht bei adaptiven Websites nicht. Hier kann der Programmierer durch die einzelnen Templates für jede Ansicht die gewünschten Inhalte inkl. Reihenfolge variieren und uneingeschränkt technische Funktionalitäten für jedes Gerät anpassen.
Für das Design sind alle drei Layout-Typen möglich, wobei wir für eine optimale Darstellung ein fluid Design oder elastic Design empfehlen.
Diese bestmögliche Anpassung an alle Endgeräte benötigt natürlich einen höheren Entstehungsaufwand und verursacht dementspehend auch höhere Kosten: Alle Templates werden separat programmiert – im Gegensatz zur responsiven, die einmal aufgesetzt und in drei Breakpoints optimiert wird.


responsive websites - adaptive websites

Welcher Typ einer Website für Ihr Projekt der passende ist, hängt von zahlreichen Faktoren ab. Wir beraten Sie gern ausführlich, um gemeinsam die bestmögliche Variante zu finden.

 


Web-Design: Drei smarte Typen

Hat man sich für einen Website-Typ entschieden, bleibt noch die Wahl für das passende Layout. Auch hier gibt es kleine, aber feine Unterschiede.

Fixed Layout

Klar definiert ist das fixed Layout. Breiten und Höhen stehen hier in starren Pixeln maßgenau fest. Das Design passt sich nicht an das jeweilige Fenster des Browsers an, deshalb ist es auch ausschließlich für adaptive Websites möglich. Wird es auf dem Display des Tablets zu eng, muss man scrollen. Auf dem Desktop hingegen erscheint auf größeren Monitoren links und rechts viel freier Raum. 

Fluid Layout

Das fluid Layout passt sich prozentual an: Je nach Platz auf dem Ausgabegerät reagiert das Design in der Breite, für die üblicherweise ein Maximalwert festgelegt wird.

Elastic Layout

Das beweglichste Design ist mit dem elastic Layout zu haben: Hier wachsen und schrumpfen Inhalte immer passgenau zum Browserfenster. Schriften werden kleiner, Bilder skalieren, Textblöcke wandern flexibel. Vorsicht ist mit Grafiken in Pixeln geboten, sie könnten beim Skalieren Probleme verursachen.

Dieses Video veranschaulicht den Unterschied zwischen den drei Layout-Typen noch einmal genauer:

Quelle für diesen Beitrag: Die ProduktMacher

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Zurück