Code breakers

Как делать адаптивный дизайн на Bubble. Краткое объяснение

Bubble – адаптивный. Продукты, созданные на Bubble, одинаково хорошо смотрятся на компьютере, на планшетах и на мобильных экранах. Но часто у начинающих ноукодеров так не получается. Всё потому, что над адаптивностью надо поработать отдельно – и знать, где и как это делать. В этом тексте на примере настройки простых элементов и простейшего продукта показываем принципы и лайфхаки адаптивного дизайна в Bubble.


Покажем пример адаптивности на вот этой простейшей странице.

Где настройки адаптивности в Bubble


На панели инструментов слева в верхнем углу две вкладки «UI Builder» и «Responsive». В первой вкладке – режим создания приложения. Во второй – как раз настройка адаптивности. 

В режиме Responsive с помощью серой линейки-ползунка, находящейся над страницей проекта, изменяются размеры экрана. Стандартные размеры экранов находятся на панели инструментов слева – стандартные декстоп, планшет, горизонтальный смартфон, вертикальный смартфон. 

Ещё одна настройка, которую следует использовать – значок из девяти кирпичиков на верхней панели справа. С этой активной настройкой включается сетка расположения для элементов на странице.   


Настройка адаптивного дизайна через группы


Рабочий адаптивный дизайн делается через элемент Group – группы (панель инструментов слева, список Containers). В группы надо помещать каждый элемент или блоки элементов, которые показываются рядом. 

На лендинге-примере группы расположены так. Одна основная группа для лендинга. Группа с текстом. Группа с формой и кнопкой. Группа с изображением. Группы в отношении адаптивного дизайна нужны для двух вещей – группировать элементы, не давая расползаться, и настраивать через них на страницах поля, промежутки и расстояния друг от друга. 



  • Группировка элементов

Для основной группы в настройках обязательно нужно ставить фиксированную ширину – иначе элементы расползаются кто куда по доступной ширине экрана. С фиксированной шириной группы элементы останутся строго в тех местах, где вы их расположили. Также стоит зафиксировать ширину группы с картинкой – тогда картинку не будет плющить и растягивать при изменении размеров экрана. Проверяйте, как соседствуют группы через режим Responsive.
Устанавливайте фиксированную ширину экрана для основной группы, в которой находятся все элементы. Иначе они расползутся по всей странице.

  • Настройка расстояния, полей и промежутков

В режиме Responsive, когда начнёте изменять масштаб, текстовые элементы (и другие) могут «прилипать» к краям экрана. «Слипнуться» могут и форма с кнопкой. Чтобы это исправить, возвращайтесь во вкладку UI Builder и двигайте элементы, изменяя расстояния между ними и поля – и снова проверяйте в режиме Responsive. Постепенно верное решение найдётся.

Настройка ширины и правил отображения в режиме Responsive


Теперь про настройки, доступные в режиме Responsive

Тут двигать элементы нельзя. Зато настраивается порядок их отображения. Например, поставить или убрать фиксированную ширину, отцентрировать отображение элементов и увидеть детальную настройку расстояний от полей и промежутки. Как раз для тонкой работы тут и нужна настройка с сеткой – она выделяет каждый элемент и создаёт порядок. 

  • Оцените расстояния, промежутки, поля

По клику на элемент в боковой панели появится кнопка «Explain box margins». Кликните на неё, и вы увидите указанное в пикселях расстояние между объектами. Вы увидите, ровно ли элементы удалены относительно краёв и друг друга. Если видите сбои – идите в UI Builder и подвигайте элементы. 

  • Установите правила отображения элементов

В режиме Responsive самое крутое, что можно сделать – настроить правила отображения ширины элементов относительно изменений размеров экрана.

В режиме Responsive есть крутая функция - настройка отображения ширины элементов относительно размеров экрана.


  • Устанавливайте тут максимальную и минимальную ширину элемента в процентах от размера экрана – чтобы его не растягивало и не сжимало при изменении экрана. Максимальная и минимальная ширина, например, важна для формы ввода данных – пользователь будет тут писать, её всегда должно быть хорошо видно. 
  • Настраивайте исчезание полей в зависимости от ширины экрана – то есть, когда экран меньше, например, 600 пикселей, у объекта пропадут поля. Он прилипнет к краям экрана. Это решение для видео или карт.  
  • В режиме Responsive видно, какие элементы надо фиксировать по ширине, а какие – нет; видно, какие из элементов лишние для того или иного формата; ясно, как меняется восприятие продукта на разных платформах. 

И ещё в режиме Responsive можно спрятать элементы без удаления – об этом дальше.

Как спрятать элементы для отображения на разных платформах


Ещё одна доступная тонкая настройка – спрятать элемент при достижении экрана определённой ширины. 

Допустим, есть лендинг, как у нас – текст, картинка, форма с кнопкой. Важнее дать пользователю заполнить форму и нажать кнопку, чем показать картинку. Вы понимаете, что на мобильной версии получится показать что-то одно – картинку или форму с кнопкой. 

Тогда вы можете, не удаляя, спрятать элемент при достижении экрана размеров смартфона. Это настраивается в режиме Responsive по клику на конкретный элемент.

Там есть строка Add hiding rule (Добавить правило, при котором надо спрятать элемент). По клику на него откроется настройка ширины экрана в пикселях. Вы ставите нужное число – для мобильных устройств это примерно 400 px. То есть на ширине экрана 400 пикселей картинка спрячется. 

Не обязательно удалять объект, чтобы спрятать его на определённой версии ширины экрана.

Как сделать в Bubble мобильную версию


Ещё один путь – это настроить адаптивность не через режим Responsive, а сделать отдельную мобильную версию проекта.

Надо вернуться во вкладку UI Builder и делать новую страницу. Ширину ей задайте, как для мобильного экрана – примерно 400 px. При создании копируйте страницы, для которой делаете мобильную версию. А дальше настраивайте под формат элементы. 

Допустим, вы хотите другой порядок элементов для лендинга, который будет отображаться в мобильной версии. Сначала картинку, потом форму, потом текст. На второй странице с форматом под мобильную вёрстку всё это можно сделать сразу с учётом размеров мобильного экрана – и не использовать вкладку Responsive. 

Когда эта мобильная страница готова, вернитесь на главную страницу, которую клонировали при создании. В настройках страницы выбирайте в «Mobile version» созданную страницу под мобильный формат.  



Другие способы и нюансы настройки адаптивности


Есть и другие варианты настройки адаптивности дизайна продукта на Bubble. В частности, отдельно настраиваются правила отображения Repeating Group. Отдельно также стоит работать с настройкой отображения хедеров и футеров. Это тоже можно делать в режиме Responsive. Посмотреть все тонкости настройки адаптивности в Bubble можно вот в этом обучающем видео на 17 минут (на английском языке).

Учим работать с мобильной версией продуктов на Bubble и настраивать грамотный UI/UX-дизайн на курсе веб-разработки на Bubble. 

Хотите узнать больше про No-code и разработку IT-продуктов без кода? Заходите на наш бесплатный вебинар от создательницы университета Code Breakers.

Как делать