Klassische vs. responsive Projekte

Wenn Sie ein neu­es Pro­jekt in Captivate erstel­len möch­ten, ste­hen Sie vor der Wahl zwi­schen einem klas­si­schen („Lee­res Pro­jekt“) und einem respon­si­ven Pro­jekt („Pro­jekt mit auto­ma­ti­scher Anpas­sung“). Da die­se Ent­schei­dung Ihr Pro­jekt und Ihre Vor­ge­hens­wei­se maß­geb­lich beein­flus­sen wird, möch­te ich in die­sem Blog­ar­ti­kel erklä­ren, wo genau die Unter­schie­de liegen.

Was ist ein responsives Projekt?

Im Gegen­satz zu klas­si­schen (im Lay­out fixier­ten) Pro­jek­ten pas­sen sich respon­si­ve Pro­jek­te auto­ma­tisch an die Bild­schirm­auf­lö­sung des jewei­li­gen End­ge­rä­tes (Desk­top, Tablet oder Smart­pho­ne) an. So wird Scrol­len (wie es bei klas­si­schen Pro­jek­ten in Ver­bin­dung mit klei­ne­ren Dis­plays nötig ist) ver­mie­den. Je nach Ein­stel­lung und Pro­jekt­typ kön­nen hier­bei Inhal­te fle­xi­bel in Grö­ße und Posi­ti­on oder auch optio­nal und nur für bestimm­te Grö­ßen sicht­bar sein. Auf Wunsch kön­nen sich Lay­out und Inhal­te auch voll­stän­dig zwi­schen ver­schie­de­nen End­ge­rä­ten unterscheiden.

Neues Projekt erstellen
Neu­es Pro­jekt erstellen

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

Wur­den respon­si­ve Pro­jek­te bis­lang vom soge­nann­ten Breakpoint- bzw. Hal­te­punkt­mo­dus bestimmt, führt Captivate 2017 den neu­en respon­si­ven Modus „Flu­id Boxes“ ein. Hier wird das Lay­out von fle­xi­blen Con­tai­nern (Flu­id Boxes) bestimmt, die mit Inhalt gefüllt, hori­zon­tal und ver­ti­kal ange­ord­net sowie ver­schach­telt wer­den kön­nen. Bei Ände­rung der Pro­jekt­auf­lö­sung (Anpas­sung an wech­seln­de End­ge­rä­te) ändern Flu­id Boxes ihre Maße und Anord­nung und ver­hal­ten sich dabei nach einem fest­leg­ba­ren Mus­ter. Hier ein Über­blick über die Unter­schie­de zwi­schen Fluid-Box- und Breakpoint-Modus:

Bre­ak­points Flu­id Boxes
Respon­si­vi­tät Bre­ak­points defi­nie­ren, ab wel­cher Auf­lö­sungs­brei­te das nächst­hö­he­re oder -tie­fe­re Foli­en­de­sign ange­zeigt wird (zwi­schen 3 und 5 Bre­ak­points möglich) Fle­xi­ble intel­li­gen­te Con­tai­ner (im Bereich HTML & CSS auch als „Flex­box“ bekannt) pas­sen sich bei Ver­än­de­rung der Pro­jekt­auf­lö­sung nach fest­ge­leg­tem Mus­ter an das jewei­li­ge End­ge­rät an (Flu­id Boxes kön­nen dabei hori­zon­tal und ver­ti­kal unter­teilt, ver­schach­telt und mit Inhal­ten befüllt werden)
Layout-/ Objektstil-Eigenschaften Indi­vi­du­el­les Lay­out auf ver­schie­de­nen End­ge­rä­ten möglich
Indi­vi­du­el­le Objektstil-Definitionen pro Bre­ak­point möglich
Nahe­zu alle Objek­te kön­nen genutzt werden
Indi­vi­du­el­les Lay­out auf ver­schie­de­nen End­ge­rä­ten nur begrenzt mög­lich (per Funk­ti­on Optional)

Objektstil-Definitionen wie bei klas­si­schen Projekten

Nicht alle Objek­te wer­den unterstützt

 Zeit­auf­wand  Grö­ßer durch auf­wen­di­ge­re manu­el­le Lay­out­ge­stal­tung (u. U. je Endgerät)  Gerin­ger durch fle­xi­ble­re und auto­ma­ti­sier­te Umbruch­op­tio­nen sowie beschleu­nig­te Layout-Testmöglichkeiten
 Scrol­ling  Ver­ti­kal nicht vermeidbar  Hori­zon­tal und ver­ti­kal vermeidbar
  Workflow
„Mobile-first“
 Nicht prak­ti­ka­bel umsetz­bar, da der Ver­er­bungs­me­cha­nis­mus von Desk­top zu Mobil verläuft  Mög­lich, da Ände­run­gen in mobi­len Lay­outs auch auf grö­ße­re bzw. das Desktop-Layout wir­ken und Inhal­te ergänzt wer­den kön­nen, die nur bei aus­rei­chen­dem Platz dar­ge­stellt wer­den sol­len (Optio­nal)

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

In allen Pro­jekt­ty­pen (klas­sisch, respon­si­ver Flu­id Box- oder Breakpoint-Modus) wird Ihr Pro­jekt in der ein­ge­stell­ten Pro­jekt­grö­ße ange­zeigt (Aus­nah­me: Ska­lie­rungs­mo­dus bei klas­si­schen Pro­jekt ist aktiv). Doch was pas­siert jeweils, wenn die Pro­jekt­auf­lö­sung (Dis­play­grö­ße) klei­ner wird und so nicht mehr aus­rei­chend Platz für das Pro­jekt zu Ver­fü­gung steht? So ver­hal­ten sich klas­si­sche, Breakpoint- und Flu­id Box-Projekte:

Klas­si­sches Pro­jekt ohne Ska­lie­rung: Die Grö­ße des Pro­jek­tes und der dar­ge­stell­ten Objek­te ver­än­dert sich nicht (Klas­si­sches Pro­jekt ohne Ska­lie­rung), sodass der Ler­ner u. U. zum Scrol­len gezwun­gen wird.

Klassisches Projekt ohne Skalierung
Klas­si­sches Pro­jekt ohne Skalierung

Klas­si­sches Pro­jekt mit Ska­lie­rung: Das Pro­jekt passt sich stets dem Brow­ser an. Scrol­len wird immer vermieden.

Klassisches Projekt mit Skalierung
Klas­si­sches Pro­jekt mit Skalierung

Breakpoint-Modus: Das Pro­jekt passt sich aus­schließ­lich in der Brei­te an die Ver­klei­ne­rung der Pro­jekt­auf­lö­sung an. In der Höhe sind Breakpoint-Projekte nicht respon­siv, so dass der User u. U. ver­ti­kal scrol­len muss.

Responsives Projekt im Breakpoint-Modus
Respon­si­ves Pro­jekt im Breakpoint-Modus

Fluid-Box-Modus: Scrol­len wird um jeden Preis ver­hin­dert, das Pro­jekt passt sich voll­stän­dig in Höhe und Brei­te an das jewei­li­ge Dis­play an.

Responsives Projekt im Fluid-Boxes-Modus
Respon­si­ves Pro­jekt im Fluid-Boxes-Modus

Fazit: Weniger Arbeitsaufwand vs. mehr Flexibilität 

Die genau­en Anfor­de­run­gen an Ihr Pro­jekt soll­ten Sie vor Pro­jekt­start prü­fen, da klas­si­sche Pro­jek­te zeit- und kos­ten­ef­fi­zi­en­ter rea­li­sier­bar sind. Respon­si­ve Pro­jek­te eig­nen sich immer dann, wenn die Ziel­ge­rä­te höchst­mög­li­che Fle­xi­bi­li­tät in Sachen Auf­lö­sung for­dern. In klas­si­schen Pro­jek­ten wäre zur Unter­stüt­zung von Smart­pho­nes hin­ge­gen i. d. R. ein zwei­tes Pro­jekt erfor­der­lich. Im Umkehr­schluss bedeu­tet dies jedoch nur gerin­ge bis kei­ne Vor­tei­le für respon­si­ve Pro­jek­te, wenn Sie nur Desktop-Systeme, Note­books und (bestimm­te) Tablets unter­stüt­zen möch­ten. Soll­ten Sie ein respon­si­ves Pro­jekt erstel­len, emp­feh­le ich Ihnen die Bear­bei­tung im fle­xi­ble­ren Flu­id Box-Modus, der in naher Zukunft sicher noch wei­ter ver­bes­sert wird. Ich hal­te Sie dazu natür­lich auf dem Laufenden.

Wie immer freue ich mich über Fra­gen und Feed­back zu die­sem und allen ande­ren Arti­keln rund um Captivate.

Viel Spaß beim Captivaten!
Ihr Martin Uhrig

PS: Wenn Sie immer auf dem neu­es­ten Stand zum The­ma E-Learning & Adobe Captivate sein möch­ten, emp­feh­le ich Ihnen mei­nen News­let­ter, den Sie hier kos­ten­frei abon­nie­ren können.

Weiterführende Blogartikel:

HTML5-Ausgabe auf mobi­len End­ge­rä­ten skalieren 

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht.