Klassische vs. responsive Projekte

Wenn Sie ein neues Projekt in Captivate erstellen möchten, stehen Sie vor der Wahl zwischen einem klassischen („Leeres Projekt“) und einem responsiven Projekt („Projekt mit automatischer Anpassung“). Da diese Entscheidung Ihr Projekt und Ihre Vorgehensweise maßgeblich beeinflussen wird, möchte ich in diesem Blogartikel erklären, wo genau die Unterschiede liegen.

Was ist ein responsives Projekt?

Im Gegensatz zu klassischen (im Layout fixierten) Projekten passen sich responsive Projekte automatisch an die Bildschirmauflösung des jeweiligen Endgerätes (Desktop, Tablet oder Smartphone) an. So wird Scrollen (wie es bei klassischen Projekten in Verbindung mit kleineren Displays nötig ist) vermieden. Je nach Einstellung und Projekttyp können hierbei Inhalte flexibel in Größe und Position oder auch optional und nur für bestimmte Größen sichtbar sein. Auf Wunsch können sich Layout und Inhalte auch vollständig zwischen verschiedenen Endgeräten unterscheiden.

Neues Projekt erstellen
Neues Projekt erstellen

Responsive Projekte: Fluid-Box- vs. Breakpoint-Modus

Wurden responsive Projekte bislang vom sogenannten Breakpoint- bzw. Haltepunktmodus bestimmt, führt Captivate 2017 den neuen responsiven Modus “Fluid Boxes” ein. Hier wird das Layout von flexiblen Containern (Fluid Boxes) bestimmt, die mit Inhalt gefüllt, horizontal und vertikal angeordnet sowie verschachtelt werden können. Bei Änderung der Projektauflösung (Anpassung an wechselnde Endgeräte) ändern Fluid Boxes ihre Maße und Anordnung und verhalten sich dabei nach einem festlegbaren Muster. Hier ein Überblick über die Unterschiede zwischen Fluid-Box- und Breakpoint-Modus:

Breakpoints Fluid Boxes
Responsivität Breakpoints definieren, ab welcher Auflösungsbreite das nächsthöhere oder -tiefere Foliendesign angezeigt wird (zwischen 3 und 5 Breakpoints möglich) Flexible intelligente Container (im Bereich HTML & CSS auch als „Flexbox“ bekannt) passen sich bei Veränderung der Projektauflösung nach festgelegtem Muster an das jeweilige Endgerät an (Fluid Boxes können dabei horizontal und vertikal unterteilt, verschachtelt und mit Inhalten befüllt werden)
Layout-/ Objektstil-Eigenschaften Individuelles Layout auf verschiedenen Endgeräten möglich
Individuelle Objektstil-Definitionen pro Breakpoint möglich
Nahezu alle Objekte können genutzt werden
Individuelles Layout auf verschiedenen Endgeräten nur begrenzt möglich (per Funktion Optional)

Objektstil-Definitionen wie bei klassischen Projekten

Nicht alle Objekte werden unterstützt

 Zeitaufwand  Größer durch aufwendigere manuelle Layoutgestaltung (u. U. je Endgerät)  Geringer durch flexiblere und automatisierte Umbruchoptionen sowie beschleunigte Layout-Testmöglichkeiten
 Scrolling  Vertikal nicht vermeidbar  Horizontal und vertikal vermeidbar
  Workflow
„Mobile-first“
 Nicht praktikabel umsetzbar, da der Vererbungsmechanismus von Desktop zu Mobil verläuft  Möglich, da Änderungen in mobilen Layouts auch auf größere bzw. das Desktop-Layout wirken und Inhalte ergänzt werden können, die nur bei ausreichendem Platz dargestellt werden sollen (Optional)

Was passiert bei Änderung der Bildschirmauflösung (Wechsel des Endgerätes)?

In allen Projekttypen (klassisch, responsiver Fluid Box- oder Breakpoint-Modus) wird Ihr Projekt in der eingestellten Projektgröße angezeigt (Ausnahme: Skalierungsmodus bei klassischen Projekt ist aktiv). Doch was passiert jeweils, wenn die Projektauflösung (Displaygröße) kleiner wird und so nicht mehr ausreichend Platz für das Projekt zu Verfügung steht? So verhalten sich klassische, Breakpoint- und Fluid Box-Projekte:

Klassisches Projekt ohne Skalierung: Die Größe des Projektes und der dargestellten Objekte verändert sich nicht (Klassisches Projekt ohne Skalierung), sodass der Lerner u. U. zum Scrollen gezwungen wird.

Klassisches Projekt ohne Skalierung
Klassisches Projekt ohne Skalierung

Klassisches Projekt mit Skalierung: Das Projekt passt sich stets dem Browser an. Scrollen wird immer vermieden.

Klassisches Projekt mit Skalierung
Klassisches Projekt mit Skalierung

Breakpoint-Modus: Das Projekt passt sich ausschließlich in der Breite an die Verkleinerung der Projektauflösung an. In der Höhe sind Breakpoint-Projekte nicht responsiv, so dass der User u. U. vertikal scrollen muss.

Responsives Projekt im Breakpoint-Modus
Responsives Projekt im Breakpoint-Modus

Fluid-Box-Modus: Scrollen wird um jeden Preis verhindert, das Projekt passt sich vollständig in Höhe und Breite an das jeweilige Display an.

Responsives Projekt im Fluid-Boxes-Modus
Responsives Projekt im Fluid-Boxes-Modus

Fazit: Weniger Arbeitsaufwand vs. mehr Flexibilität

Die genauen Anforderungen an Ihr Projekt sollten Sie vor Projektstart prüfen, da klassische Projekte zeit- und kosteneffizienter realisierbar sind. Responsive Projekte eignen sich immer dann, wenn die Zielgeräte höchstmögliche Flexibilität in Sachen Auflösung fordern. In klassischen Projekten wäre zur Unterstützung von Smartphones hingegen i. d. R. ein zweites Projekt erforderlich. Im Umkehrschluss bedeutet dies jedoch nur geringe bis keine Vorteile für responsive Projekte, wenn Sie nur Desktop-Systeme, Notebooks und (bestimmte) Tablets unterstützen möchten. Sollten Sie ein responsives Projekt erstellen, empfehle ich Ihnen die Bearbeitung im flexibleren Fluid Box-Modus, der in naher Zukunft sicher noch weiter verbessert wird. Ich halte Sie dazu natürlich auf dem Laufenden.

Wie immer freue ich mich über Fragen und Feedback zu diesem und allen anderen Artikeln rund um Captivate.

Viel Spaß beim Captivaten!
Ihr Martin Uhrig

PS: Wenn Sie immer auf dem neuesten Stand zum Thema E-Learning & Adobe Captivate sein möchten, empfehle ich Ihnen meinen Newsletter, den Sie hier kostenfrei abonnieren können.

Weiterführende Blogartikel:

HTML5-Ausgabe auf mobilen Endgeräten skalieren

Schreibe einen Kommentar

Newsletter abonnieren

Automatisch über neue Captivate-Versionen, Updates und neue Bücher informieren lassen:



Kommende Trainings

02.08. – 05.08.2022
Adobe Captivate Masterkurs

03.08. – 04.08.2022
Adobe Captivate für Einsteiger

13.09. – 16.09.2022
Adobe Captivate Masterkurs

14.09. – 15.09.2022
Adobe Captivate für Einsteiger