Einführung in Responsive DesignDie weite Verbreitung internetfähiger Mobilgeräte im Laufe der letzten Jahre hat eine Revolution im Bereich des Web-Designs ausgelöst. Inhalte, die bisher statisch auf Desktop-Computerbildschirmen präsentiert wur-den, müssen nun dynamisch und an verschiedenste Bildschirmgrößen angepasst dargestellt werden.

Lösungsansätze für mobiles Webdesign gab es schon viele. Zunächst war es notwendig, für die stark einge-schränkten Browser der mobilen Geräte komplett ei-genständige Websites zu realisieren, da sie nicht in der Lage waren, Standard-Desktop-Websites korrekt darzu-stellen. Mit der Zeit wurden die mobilen Browser immer besser, so dass dieses Problem verschwand.

Heute gibt es nur noch sehr wenige Funktionsein-schränkungen für mobile Websites. Die Herausforde-rung besteht darin, die Inhalte in einer einzigen Site so zu integrieren, dass sie auf allen Geräten optimal darge-stellt werden.

Die Lösung heißt: Responsive Design

Das Prinzip ist einfach: Wenn ein Besucher Ihre Site öff-net, wird zunächst festgestellt, wie viel Platz für die Dar-stellung zur Verfügung steht. Entsprechend werden die Inhalte so angeordnet, dass sie optimal dargestellt wer-den. Im einfachsten Fall werden dabei für die verschie-denen Bildschirmbreiten eigene Designs ausgeliefert. In der Webdesign-Terminologie werden diese Bildschirm-breiten als „Breakpoints“ bezeichnet.

Schauen Sie sich zur Illustration folgendes Beispiel an. Hier sehen Sie eine einfache Website mit vier HTML-Rahmen, wie sie auf einem Desktop-Computer darge-stellt wird.

Alles ist soweit in Ordnung, vielleicht ist die Schrift schon ein wenig zu klein. Auf einem iPad wird dieses Problem deutlicher:

Und auf einem iPhone ist ohne Lupe nichts mehr zu erkennen:

Wenn wir Responsive Design verwenden, können wir das Problem einfach lösen, indem wir alternative Layouts für die Bildschirmbreiten („Breakpoints“) der beiden Mobilgeräte bereitstellen. Für das iPad könnten wir die vier Rahmen in zwei Zeilen anordnen:

Für die deutlich reduzierte Bildschirmbreite des iPhones ordnen wir die vier Rahmen untereinander an:

Einführung in Responsive Design

- 1 -

Dies ist naturgemäß ein stark vereinfachter Blick auf Responsive Design, jedoch lassen sich viele der ver-wendeten Techniken auf diese Prämisse zurückführen: Gestalten Sie Ihre Website und passen Sie das Layout für die verschiedenen Bildschirmgrößen an, so dass es besser zu dem Gerät des Betrachters passt.

Freeway und Responsive DesignEs war auch mit früheren Freeway-Versionen bereits möglich, Mobilgeräte-taugliche Websites zu erstellen. Freeway 7 bietet nun eine Vielzahl neuer Funktionen, die Responsive Design zu einer Kernkomponente der Anwendung machen. Am wichtigsten und augenfälligs-ten ist die Medientypenleiste:

Jeder Karteireiter in dieser Leiste repräsentiert einen Medientyp, also im Normalfall einen Breakpoint, für den Sie das Aussehen von Objekten auf der Seite oder die Seite selbst anpassen können.

Wählen Sie dazu den gewünschten Reiter aus und nehmen Sie die Änderungen vor. Sie verwenden dazu die Werkzeuge und Funktionen, die Sie von Freeway kennen. Wenn Sie also die Breite eines Elements verrin-gern wollen, wenn es auf einem Smartphone angezeigt wird, aktivieren Sie den Karteireiter „Smartphone: 320“. Ziehen Sie dann das Element schmaler:

Diese Änderung können Sie natürlich auch mit Hilfe der Inspektorpalette vornehmen.

Wenn Sie zwischen den verschiedenen Medientypen Ihrer Site wechseln, zeigt Freeway den aktuellen Bear-beitungszustand der jeweiligen Seite für den gewähl-ten Medientyp an.

Es ist wichtig, dass Sie immer nachvollziehen können, welche Elemente und welche Einstellungen für die ver-schiedenen Medientypen angepasst wurden. Freeway stellt diese Informationen auf verschiedene Weise zur Verfügung.

• Wurden für einen bestimmten Medientyp Einstellun-gen für ein beliebiges Element verändert, wird vor dem Karteireiter dieses Medientyps ein gefüllter Kreis angezeigt:

• Die Namen der Elemente, die für den aktuell ausge-wählten Medientyp bearbeitet wurden, werden im Site-Panel in Fettschrift dargestellt:

• Die Inspektorpalette verfügt über zwei neue Bereiche, in denen Sie nachvollziehen können, welche Eigen-schaften des ausgewählten Elements bearbeitet wur-den. Hier können Sie die entsprechenden Änderun-gen auch wieder rückgängig machen.Der Bereich „Aktuelle Medienänderungen“ führt die Einstellungen auf, die für das ausgewählte Element und den aktuellen Medientyp vorgenommen wurden:

Der Bereich „Geänderte Medientypen“ listet die Me-dientypen auf, für die Änderungen am aktuell ausge-wählten Element vorgenommen wurden:

Einführung in Responsive Design

- 2 -

Wenn Sie Änderungen an den vorgegebenen Medien-typen vornehmen oder eigene Breakpoints einrichten wollen, können Sie dies im Dialog „Bearbeiten/Medientypen“:

Hier können Sie die Bildschirmbreiten bearbeiten und benennen, die Sie mit Ihrer Site unterstützen wollen. Die vorgegebenen Breakpoints basieren auf den ver-breitetsten Gerätegrößen und sollten für die Erforder-nisse der meisten Websites passen.

Einige wichtige DetailsDie Breitenangaben der Breakpoints sind Maximalwer-te. Designänderungen für einen Breakpoint sind also nicht nur für Bildschirme mit genau dieser Breite gültig, sondern auch für schmalere Bildschirme.

Wenn Sie beispielsweise für ein gelbes Element beim Breakpoint „Tablet: 768“ die Farbe auf Rot ändern, wer-den alle Geräte mit einer Bildschirmbreite von 768px oder weniger das Element in roter Farbe anzeigen.

Das nimmt Ihnen natürlich nicht die Möglichkeit, die Farbe für einen anderen Breakpoint erneut zu ändern, z.B. für „Smartphone: 320“ auf grün. Dann erscheint das Element auf allen Geräten mit Bildschirmbreiten von 320px oder weniger in grün:

Ein letztes wichtiges Detail, das Sie bei der Arbeit mit Responsive Webdesign im Hinterkopf behalten sollten: Responsive Desgin bedeutet, dass nur das Styling – also Aussehen – von Elementen für verschiedene Breakpoints angepasst wird. Änderungen des Inhalts und der Struktur betreffen immer alle Breakpoints, nicht nur den aktuellen und die schmaleren. Daraus resul-tiert, dass der Inhalt aller Elemente, alle Tabellen-basier-te Elemente (HTML, Gra"ken, Pass-through) und Map-Bereiche nicht an spezi"schen Breakpoints modi"ziert werden kann. Gra"kelemente und CSS-basierte Tabel-len können neu positioniert, aber nicht in der Größe verändert werden. CSS-basierte HTML-Elemente und Pass-through-Gra"ken können für verschiedene Breakpoints neu positioniert und in der Inspektorpalet-te mit geänderten Einstellungen versehen werden.

Abschließende BemerkungDie neuen Fähigkeiten von Freeway 7 im Bereich des Responsive Designs werden es Ihnen ermöglichen, Ihre Desktop-Layouts optimal für die Benutzung mit mobi-len Geräten anzupassen. Ganz egal, wie Sie bei der Ge-staltung Ihrer Site vorgehen, sei es, indem Sie Elemente auf die Seite zeichnen oder indem Sie die hoch entwi-ckelten In-#ow-Layoutfunktionen nutzen: Responsive Design ist nun einfach in Ihren Work#ow integrierbar.

Einführung in Responsive Design

- 3 -