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

Workflow mit Fluid Boxes

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video erhalten Sie einen kurzen Überblick über den Workflow mit den Fluid Boxes bzw. der automatischen Anpassung.
08:40

Transkript

In diesem Video möchte ich Ihnen einen kurzen Überblick über den Fluid Box-Workflow geben. Über Neu Projekt mit automatischer Anpassung legen Sie direkt ein neues Fluid Box-Projekt an. Im Anschluss wählen Sie Modifizieren Projekt neu skalieren, um die Ausgangsgröße des Projektes, also die maximale Größe einzustellen. Captivate fragt Sie hier in der aktuell ersten Version von Captivate 2017 nicht nach einer Größe. Es gibt allerdings eine Größe, wie wir hier sehen, und die können wir eben über Modifizieren Projekt neu skalieren einstellen. Und hier wählen wir zum Beispiel mal eine etwas Größere, zum Beispiel, 1280 x 720, wählen Fertigstellen und OK. Im nächsten Schritt sollten Sie auf jeden Fall diese neue Auflösung als Testlayout anlegen. Das können Sie hier oben dann machen. 1280 x 720. Klicken dann hier auf Plus, und dann sagen wir hier mal Desktop groß. Weiterhin legen Sie hier dann die ganzen Testlayouts an, die den Endgeräten Ihrer Zielgruppe entsprechen. Dann können Sie die Layouts entsprechend immer schnell über die Aufklappliste hier testen und müssen das nicht manuell über den Regler oder entsprechend hier numerisch immer einstellen, sondern können direkt über die Liste auf das Layout springen. Im nächsten Schritt legen wir dann die Fluid Boxes an. Dazu sollte auf den Seiten möglichst noch kein Inhalt sein, denn Sie sollten zuerst damit beginnen, das Grundraster mit den Fluid Boxes zu erstellen, vielleicht auch vorab mal auf Papier aufzeichnen. Hierzu wählen wir dann Fluid Box, entscheiden uns für eine Richtung, in unserem Fall jetzt erst mal Vertikal, weil wir drei vertikale Fluid Boxes hier mal erstellen wollen. Ich zoome hier auch mal heraus, so dass wir das gesamte Layout der Seite sehen. Im nächsten Schritt können wir dann die Größe der Fluid Boxes einstellen. Aktuell geht das nur über diese Regler. In der ersten Version von Captivate 2017 geht es dann noch nicht numerisch. Ich hoffe, dass hier nochmal nachgebessert wird, dass wir das dann auch schön sauber numerisch einstellen können. Dann können wir auch das Ganze immer weiter verschachteln. Sie können beliebig viele Unterkonstruktionen anlegen, zum Beispiel hier noch eine Unterverschachtelung der Fluid Boxes. Ich kann die ganze Verschachtelung hier auch über die Eigenschaften nachvollziehen. Hier sehen wir diese Fluid Box-Auswahl, über die ich entsprechend auch die ganzen Fluid Boxes auswählen kann. Im nächsten Schritt können wir dann die Fluid Boxes mit Inhalt befüllen, zum Beispiel, hier mit einer Textbeschriftung im Titelteil. Das Ganze mal mit einer transparenten Beschriftung. Dann wollen wir hier im Mittelteil ebenfalls noch eine Fluid Box einfügen mit einem Text. Daneben wollen wir noch eine SVG platzieren und im unteren Teil noch eine Schaltfläche. Die wollen wir aktuell mal nur kurz formatieren. Und machen Sie noch ein bisschen kleiner. Die Fluid Boxes können wir natürlich auch jederzeit noch anpassen. Auch hier möchten wir das Ganze nochmal ein bisschen kleiner ziehen. Im Anschluss, nachdem wir nun die Fluid Boxes erstellt haben und mit Inhalt befüllt haben, können wir uns weiter hier um die Eigenschaften kümmern, zum Beispiel, Randeinstellungen vornehmen, den Fluss gegebenenfalls nochmal ändern, Umbrucheinstellungen vornehmen, definieren, wie Inhalte, zum Beispiel, ausgerichtet sein sollen und wo sie platziert sein sollen, zum Beispiel, ob die Grafik hier in der Mitte stehen soll oder ob sie vielleicht oben oder unter ausgerichtet sein soll. Dann können wir auch das Layout immer wieder testen direkt hier über den Schieberegler, sehen direkt, wie sich das Projekt verhalten wird, auch wie es vielleicht in kleineren Ansichten auf kleineren Geräten sich verhalten wird, und können dann entsprechend die Einstellungen immer wieder nachjustieren. Zum Beispiel könnten wir hier, wo der Text eben keinen Platz mehr finden, uns entscheiden, diese Fluid Box mit dieser Grafik auszublenden. Hier kann ich sie dann, zum Beispiel, auf Optional stellen, gehe dann eine Ebene nach oben, definiere hier den Umbruch In Zeile komprimieren, und dann sehen wir, in größeren Ansichten ist die Grafik hier sichtbar. Auf kleineren Geräten und Displays wird die gesamte Fluid Box, inklusive Grafik ausgeblendet. Sie können also hier schon relativ viel erkennen und sehen. Wichtig ist natürlich, dass wir das Ganze dann auch mal im Browser sowie auf den Endgeräten live testen. Deshalb nicht vergessen, hier das Projekt auch veröffentlichen und mal im Browser betrachten. Das Veröffentlichungsformat ist natürlich auch hier HTML 5. Und da wollen wir das Ganze mal veröffentlichen und uns direkt anschauen. Und wir sehen, jetzt ist es hier noch die Standardnavigation drin. Aber wir können das Ganze hier mal in der Größe einpassen und sehen auch direkt, was passiert. Und was wir auch sehen, dass hier in einer bestimmten Ansicht das Layout wechselt. Wir sehen, das fließt jetzt hier nach horizontal, wenn wir ein kleineres Querformat haben. Das sind also Dinge, die ich nicht unbedingt direkt in Captivate sehe, wenn mir erstens die Testlayouts fehlen, oder ich nicht alle Testlayouts eingestellte habe. Es wäre also hier sichtbar geworden, wenn wir ein breiteres Layout mit einer kleineren Höhe eingestellt hätten. Dann hätten wir gesehen, dass wir unter Umständen eine Ausrichtung hier erhalten, die wir so nicht wollen. In unserem Fall müssen wir eigentlich nur eine Ebene nach oben gehen, hier auf Komprimieren gehen und dann korrigieren wir das Ganze hier nochmal und schauen uns das an und sehen, dass das nun einwandfrei hier skaliert. Es gibt auch irgendwann mal den Fall, dass der Text weiter herunterskaliert und dann trotzdem keinen Platz mehr findet, denn es gibt eine Mindestschriftgröße, die hier aktuell auf 14 Punkt eingestellt ist. Und wenn diese erreicht ist, dann skaliert der Text nicht mehr weiter herunter. Es gibt aber trotzdem eine Lösung, nämlich dieses Icon hier, welches dann den Text in einer Lightbox aufruft, über den ich den Text dann nochmal aufrufen und lesen kann. Wie eingangs erwähnt sollte das nur ein kurzer Überblick über den gesamten Workflow darstellen. In weiteren Videos, in weiteren Detailvideos werden wir uns die einzelnen Bereiche von Fluid Box-Projekten näher anschauen.

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!