How Can We Help?
Адаптивный дизайн & 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 лишнее действие.
- Старайтесь проектировать интерфейс таким образом, чтобы в любое место на сайте можно было попасть в минимальное количество кликов