How Can We Help?
< All Topics
Print

Адаптивный дизайн & breakpoint (Tablet/Phone)

Речь идет о адаптации нашего дизайна под другие устройства (брейкпоинты). Проще всего реализовывается в использовании 12-колоночной сетки bootstrap.

Что можно менять:

  • Изображения (фоновые), таким образом можно использовать более подходящие по пропорциям на все устройства (Соотношение у ПК 16:9, телефон 4:3 – еще та задача), а также размер изображения будет меньше, что позитивно скажется на производительности сайта.
  • Размеры типографики. В первую очередь хочу порекомендовать по возможности использовать figma mirror, на устройстве для которого делаете адаптацию — в режиме реального времени смотреть и тестировать свои решения.
    Веб версия: https://www.figma.com/mirror
    App Store: https://apps.apple.com/us/app/figma-mirror/id1152747299
    Google Play: https://play.google.com/store/apps/details?id=com.figma.mirror&hl=en&gl=US
  • Расположение блоков, например навигацию в дашбордах довольно часто в мобильных версиях отображают снизу.

Что желательно/важно сохранить

  • (!)Контент (тексты, фото) — важно как с точки зрения UX (посетитель не найдет то, что искал, перейдя на сайт с другого устройства), так и с технической стороны: гуглу не нравится, когда одна страница имеет разную информацию на разных устройствах (SEO)
  • Контекст/идею: редактируя размеры заголовков, например, не забывайте прочесть и проверить, насколько удобно и понятно просматривать информацию на вашем дизайн-решении.
  • Иллюстрации/коллажи/графику: если используются и состоят из нескольких слоев — скорее всего оптимальным решением будет экспортировать в изображение (PNG – фото/SVG – иллюстрации/иконки) и добавить как изображение.

На заметку

  • Можно попробовать использовать плагин breakpoints, для создания еще более “умных” адаптаций и “резиновых” сайтов.
  • Не делайте полям для ввода текст размером меньше чем 16px без критической для этого необходимости. При меньших размерах, в Safari экран будет масштабирован (неприятно, смотрите ниже)
  • Прятать элементы навигации в “бургер” – только в том случае, если элементов действительно много. Без потребности и с небольшим количеством страниц в навигации — бургер негативно скажется на пользовательском опыте, ведь вы по сути вынуждаете пользователя делать +1 лишнее действие.
  • Старайтесь проектировать интерфейс таким образом, чтобы в любое место на сайте можно было попасть в минимальное количество кликов
Table of Contents