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