Перечисляем функционал (фильтры, формы, кнопки), который обязательно должен быть работоспособным на всех устройствах.
Когда вы адаптируете сайт под мобильную версию, часть контента непременно придётся «резать», для корректной работы. Однако сегодня мы расскажем про другую часть: про то, что не поддаётся корректуре, и в любом случае должно остаться на сайте в неизменном виде.
Формы
Прежде всего стоит позаботиться о формах регистрации, обратной связи, авторизации и т.д. Это важный фактор, потому что если человек не сможет зайти на сайт со смартфона, то и с полным контентом ознакомиться не сможет – а значит, минус ещё один клиент.
В целом, так делают все сайты, на которых необходима регистрация пользователя, но некоторые предлагают выбор: скачать приложение или продолжить с веб-версией, как например Telegram, нормально работающий и в десктопной, и в мобильной, и в Web-версии.
Кнопки
Нет магазина без продавца, и нет интернет-магазина без кнопки «Купить». Так что, когда адаптируете своё пространство под смартфоны, позаботьтесь о том, чтобы на всех устройствах важные кнопки работали как надо и корректно показывались на экране.
Но если даже если у вас нет системы покупок, то активные кнопки – главный инструмент взаимодействия пользователя с сайтом, и они должны быть настроены или адаптированы.
Простой пример: сайт популярного кофейного бренда, к примеру, «Жардин». И в десктопной, и в мобильной версии сохранены кнопки «Купить», «Рецепты», «Коллекция» и другие – словом, сайт и в мобильной версии «отрабатывает» те функции, за которыми клиент к нему приходит.
Меню навигации
Не стоит забывать и о важности навигации на всех версиях сайта. О том, как важно сохранять её единообразие на разных устройствах и в разных версиях, мы уже рассказывали в этом материале.
Для сайтов с большой базой данных и выбором продуктов важно сохранить рабочей строку поиска, а для лендингов или сайтов-визиток – оставить активными кнопки «Позвонить» или «Написать».
Например, на сайте продажи цветов FlowWow хорошо организована навигация и в мобильном и в Web-версии: слева расположены разделы, а справа – непосредственно букеты.
Обратная связь
Не важно, с какого устройства заходит клиент, если он захочет связаться с вами – у него должна быть такая возможность. Так что не забывайте оставить внизу страницы рабочие ссылки на свои каналы (а желательно сразу на несколько).
Теперь немного о том, как поддерживать все эти функции в рабочем состоянии на любом устройстве.
- Используйте адаптивный дизайн. CSS-медиа-запросы позволяют задавать разные стили для разных размеров экрана, и подгонять сайт под нужный формат устройства.
- Используйте относительные единицы измерения. Вместо использования абсолютных единиц измерения вроде пикселей, при написании кода используйте относительные единицы: проценты или em, чтобы с их помощью задавать размеры элементов на сайте.
- Пользуйтесь функциями CSS. Библиотеки и фреймворки вроде Bootstrap или Foundation, помогут при создании адаптивного дизайна и интерактивных элементов.
- Тестируйте сайт на разных устройствах. Тест всегда помогает найти ошибки, исправить недочёты и сделать работу сайта ещё лучше.
А какие сайты оставили у вас самые приятные впечатления после посещения? Будем рады если поделитесь в комментариях!