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.
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 mit Skalierung: Das Projekt passt sich stets dem Browser an. Scrollen wird immer vermieden.
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.
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.
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.