← Все статьи

Как создать адаптивный дизайн в Adobe Captivate без использования Fluid Box

Как создать адаптивный дизайн в 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. Переключаемся в режим Breakpoint Mode 3. Программа попросит сохранить все изменения. Делаем это. Затем видим такое вот сообщение: Предупреждение об удалении Fluid Box Здесь сообщается, что все ваши Fluid Box'ы пропадут. Но нам это и нужно, поэтому нажимаем Ок. 4. Вот, собственно, и все! Теперь перед нами режим Breakpoint Mode, в котором мы можем довольно быстро и предсказуемо верстать проекты с адаптивным дизайном, расставляя объекты на слайде как нам нужно, а не как программа сочтет верным. Вот так выглядит режим десктопа. Captivate Breakpoint Mode - desktop Это режим планшета: Captivate Breakpoint Mode - tablet А это режим смартфона: Captivate Breakpoint Mode - smartphone Итак, сложность использования Fluid Box - это не повод отказываться от работы с Captivate, у которого есть много преимуществ по сравнению с другими приложениями для верстки электронных курсов.