Как создать адаптивный дизайн в Adobe Captivate без использования Fluid Box
Обучение на мобильных устройствах (смартфонах и планшетах) все шире и шире используется многими компаниями. Что бы ни говорили о несовместимости электронных курсов и мобильных устройств, о том, что курсы для компьютера и телефона должны быть разными и т.п., тенденция наблюдается весьма четкая: бизнес начинает интересоваться возможностями мобильного обучения с сохранением преимуществ традиционных LMS.
Как вы наверняка знаете компания Adobe уже давно внедрила в свое популярное приложение для разработки обучающего контента Captivate возможность создавать слайды с адаптивным дизайном. Разработчик мог выбирать 3 варианта вида слайда: десктоп, планшет и смартфон. Каждый элемент позиционируется на слайде в зависимости от размера экрана (разработчик переключаясь между видами, расставляет объекты нужным образом). В 2017 году Adobe пересмотрели свое отношение к адаптивной верстке и решили, что разработчику не нужно расставлять объекты 3 раза и внедрили абсолютно новый принцип верстки. Слайд делится на колонки или строчки наподобие таблицы, ячейкам задаются правила отображения в зависимости от разрешения экрана (они либо переносятся на другую строку, либо остаются в одной строке, либо просто не демонстрируются). Нововведение получило название Fluid Box. Оно действительно инновационное, однако все, кто хоть раз сталкивался с необходимостью быстро сверстать курс с применением Fluid Box, подтвердит — это очень сложно. Научиться верстать курсы таким образом можно, но это займет много времени, и результат применения Fluid Box не всегда предсказуем: на предпросмотре мы видим одно, а после публикации курса — другое.
Однако не стоит отказываться от Captivate (особенно если вы уже приобрели дорогостоящую лицензию). Выход есть. Adobe предусмотрела возможность сверстать responsive курс без применения Fluid Box, как мы делали это в Captivate 9 или более ранних версиях. Что для этого нужно сделать?
1. (Как это ни странно) Создаем новый Responsive проект.
2. Заходим в меню Project и выбираем Switch to Breakpoint Mode.
3. Программа попросит сохранить все изменения. Делаем это. Затем видим такое вот сообщение:
Здесь сообщается, что все ваши Fluid Box’ы пропадут. Но нам это и нужно, поэтому нажимаем Ок.
4. Вот, собственно, и все! Теперь перед нами режим Breakpoint Mode, в котором мы можем довольно быстро и предсказуемо верстать проекты с адаптивным дизайном, расставляя объекты на слайде как нам нужно, а не как программа сочтет верным.
Вот так выглядит режим десктопа.
Это режим планшета:
А это режим смартфона:
Итак, сложность использования Fluid Box — это не повод отказываться от работы с Captivate, у которого есть много преимуществ по сравнению с другими приложениями для верстки электронных курсов.
Дмитрий, а есть пример сверстанного адаптивного курса из Captivate?
Есть, но с помощью Fluid box 🙂 И выложить здесь, к сожалению, не могу, в личку скину