Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Captivate 2017: Neue Funktionen

Fluid Boxes vs. Breakpoints

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In Captivate 2017 führt Adobe einen neuen responsiven Modus ein, die sogenannten Fluid Boxes. Sie arbeiten hier mit flexiblen, intelligenten Containern. Ähnliches kennen Sie möglicherweise bereits aus dem HTML/CSS-Bereich.
07:15

Transkript

In Captivate 2017 führt Adobe einen neuen responsiven Modus ein, und zwar Fluid Boxes. Wie der Name schon andeutet, arbeiten Sie hier mit flexiblen, intelligenten Containern, ähnlich aus dem Bereich HTML und CSS bekannt unter dem Begriff Flexbox. Das Ganze sehen wir hier auch beispielhaft in diesem Projekt, wo wir mehrere dieser intelligenten Container sehen, und ich kann hier jeweils verschiedenste Einstellungen im Hinblick auf Fluss und Umbruch vornehmen und kann hier nun auch direkt in Captivate das Ganze testen mittels Testlayouts, die ich hier auswählen kann. Das ist also nicht wie beim responsiven Breakpoint-Modus so, dass Sie hier die verschiedenen Breakpoints verändern, einstellen, zwischen den Breakpoints wechseln, sondern Sie können diese Leiste hier zum Testen der intelligenten Container der Fluid Boxes verwenden. Im Gegensatz zum Breakpoint-Modus arbeiten Sie also nicht mit drei oder mehr Breakpoints, sondern Sie arbeiten mit diesen Containern, die sich dann automatisiert verhalten, sowie Sie sie hier in den Eigenschaften definieren. Wenn wir die beiden Projekte auch einmal in der Vorschau vergleichen, dann sehen wir jetzt hier einmal diese Titelseite im Breakpoint-Modus. Wenn wir den Browser skalieren, also damit auch ein kleineres Endgerät, ein kleineres Display simulieren, dann sehen Sie, springen wir hier, zum Beispiel, gerade in den nächsten Breakpoint, und das Layout wird dann in der Höhe etwas kleiner, und hier dann in den letzten Breakpoint. Wir haben also eine Responsivität in der Breite. Wenn der Browser kleiner wird beziehungsweise das Endgerät schmaler wird, dann ist auch das Projekt hier entsprechend in der Breite responsiv. Allerdings, wenn die Höhe nicht ausreichend ist, dann muss der Lerner unter Umständen scrollen. Was bedeutet, dass dies auch für bestimmte Inhalte und Funktionen, die Sie verwenden, problematisch sein kann? Wenn Sie zum Beispiel also Inhalte vertonen und animieren, könnte es sein, dass der Lerner hier nicht alles sieht, oder wenn Sie Drag-and-drop-Interaktionen verwenden, könnte es auch sein, dass der Lerner sie nicht richtig bedienen kann, da er neben dem Draggen unter Umständen auch noch scrollen müsste. Im Vergleich dazu diese Titelseite nun im Fliud-Boxes-Modus. Sie sehen auch hier, es gibt eine voreingestellte Größe. In unserem Fall ist das hier 1024 x 672. Und sobald diese Größe unterschritten wird, egal in welcher Richtung, ob in der Höhe oder Breite, wird das Projekt responsiv, und wir können scrollen, damit um jeden Preis vermeiden. Damit sind also, zum Beispiel, auch Drag-and-drop-Interaktionen überhaupt kein Problem mehr. Und ich kann immer sicherstellen, dass der Lerner alle Inhalte sieht. Jetzt gibt es natürlich verschiedene Vorteile zwischen beiden Modi, denn Sie können aktuell weiterhin beide Modi verwenden. Wenn hier Sie ein neues Projekt erstellen, dann ist es aktuell dann im Fluid Boxes-Modus. Ein Projekt mit automatischer Anpassung ist also aktuell standardmäßig im Fluid Boxes-Modus. Sie können das allerdings jederzeit wechseln über Projekt In Haltepunktmodus wechseln, dann kommen Sie in den Breakpoint-Modus mit den gewohnten Breakpoints. Nur merken! Sobald Sie einmal hier im Breakpoint-Modus sind, kommen Sie nicht mehr zurück in den Fluid Boxes-Modus. Das ist also sozusagen eine Einbandstraße in die Richtung Breakpoint. Und Sie können natürlich auch bestehende Projekte aus Captivate 9 weiter mit Captivate 2017 im Breakpoint-Modus bearbeiten. Kurz zu den Vor- und Nachteilen. Wie wir gerade gesehen haben, Im Breakpoint-Modus muss ich unter Umständen als Lerner vertikal scrollen. Im Fluid Boxes-Modus kann ich das komplett vermeiden. Im Breakpoint-Modus haben wir drei oder mehr Breakpoints, was in der Regel dann auch zu einem erhöhten Produktionsaufwand führt, der natürlich stark davon abhängig ist, wie komplex Ihr Layout wird. In diesem Zuge Stichpunkt Komplexität, ich kann hier natürlich je Breakpoint, wie Sie wissen, unterschiedliche Definitionen treffen, könnte Objekte ausblende, andere Objekte einblenden und kann das auch für jeden einzelnen Breakpoint tun. Ganz so flexibel ist man hier beim Fluid Boxes-Modus nicht. Ich kann Objekte oder Fluid Boxes auf Optional stellen und damit definieren, dass Sie in kleineren Ansichten ausgeblendet werden. Allerdings kann ich nicht komplett das Layout verändern über die automatisierten Einstellungen hier hinaus. Aber mein Erstellungsworkflow ist dadurch auch stark optimiert. Ich definiere hier einmal Fluss und Umbruch und kann in der Regel so auch schneller meine responsiven Projekte produzieren. Ein weiterer Punkt, der für den Modus Fluid Boxes spricht, ist, dass ich hier sehr einfach das Layout testen kann direkt in der Ansicht. Wenn ich im Breakpoint-Modus hier schiebe, dann verändere ich die Breakpoints. Ich muss also in der Regel immer in die Vorschau gehen, und hier kann ich sehr einfach über die Testlayouts mein Layout testen und kann auch direkt Mobile First arbeiten, sprich, ich kann direkt in die kleinste Ansicht gehen, kann hier meine Inhalte layouten, kann in größeren Ansichten dann, zum Beispiel, Inhalte hinzufügen, die ich auf Optional stelle und damit eben Mobile First arbeiten zuerst mit der kleinsten Ansicht und aus dieser Sicht dann, zum Beispiel, entscheiden, Inhalte auf weitere Folien zu verteilen. Und im responsiven Breakpoint-Modus geht das leider nicht, denn wenn Sie hier in der mobilen Ansicht Dinge verändern, müssen Sie sie erst wieder auf die darüber liegenden Ansichten übertragen. Andernfalls werden die einzelnen Objekte von den anderen darüber liegenden Breakpoints abgekoppelt. Und das macht den Workflow Mobile First aus der Sicht dann nicht ganz so praktikabel.

Captivate 2017: Neue Funktionen

Erfahren Sie, wie Sie in Captivate 2017 responsives Design mit Fluid Boxes umsetzen können. Zudem werden auch die weiteren Neuerungen in der Version 2017 erläutert.

1 Std. 36 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Captivate Captivate 2017
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.08.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!