Блог
Адаптация сайта под мобильные устройства
В этой статье я расскажу об основных принципах адаптации сайта под мобильные устройства, способах тестирования, и инструментах которые могут пригодиться в процессе выполнения задачи.
Общий подход для адаптации сайтов под мобильные устройства должен быть следующим. Из всего многообразия разрешений мобильных устройств выделяются несколько наиболее важных для текущего сайта, как правило это делается на этапе создания дизайна. Дизайнер определяет несколько брейкпоинтов, например, зачастую это 320px+, 768px+ и 1024px+, и рисует дизайн для этих состояний. Те состояния, которые не отрисованы дизайнером, должны выглядеть, как ближайший в меньшую сторону брейкпоинт, но растягиваться на всю страницу. Например, есть состояние для 320px, в этом случае при ширине устройства 520px верстка должна выглядеть так же, как и при 320px, но растягиваться на всю страницу.
В случае, если уже есть готовый сайт с десктопной версией, и требуется выполнить его адаптацию под мобильные устройства, то фронтенд-разработчик сам выступает в роли дизайнера и придумывает брейкпоинты и недостающие состояния.
В адаптивном дизайне, как правило, важна только ширина устройства, под которое рисуется дизайн, высота здесь не важна, так как на большинстве веб-страниц она бесконечна, и что-либо подгонять под высоту страницы не требуется. Ширина устройства задает весь дизайн, а не попадающие в эту ширину элементы либо переносятся, либо скрываются. Высота становится важной, если нужно вписать весь контент страницы в один экран, но такие ситуации встречаются редко.
Тестирование
Для первоначальной адаптации сайта под мобильные устройства достаточно будет использования встроенного в браузер симулятора DevTools в Google Chrome или в Mozilla Firefox. В браузерных симуляторах есть заготовки для мобильных устройств, как то iPhone 5, iPad и другие, которые задают странице нужное разрешение, посылают соответствующий User-Agent и генерируют тач-события.
В некоторых местах возможны различия работы эмулятора и реального устройства (работа JavaScript), поэтому желательно при возможности проверять на имеющихся реальных устройствах.
Также возможны различия работы JavaScript между устройством на Android и на iOS, то что на андроиде работает хорошо на iPhone 5 может вызвать проблемы.
Симуляторы не позволяют увидеть разрабатываемую мобильную версию в точности, как ее увидит пользователь на своем мобильном устройстве, поэтому после отлаживания работы сайта на симуляторе обязательно нужно проверить ее на реальных устройствах. Нельзя полагаться только на симулятор.
При тестировании на реальных устройствах необходимо запускать режим инкогнито (приватный режим), для игнорирования браузером кэша.
Однако не всегда есть возможность протестировать сайт на реальном устройстве, его может не быть под рукой, да и отладить что-то на реальном устройстве не так просто. Здесь можно использовать эмуляторы, они полностью воспроизводят работу устройств и дают 100% точность соответствия между реальным устройством. Существуют, как десктопные, так и онлайн-эмуляторы, последние использовать проще.
Некоторые онлайн-эмуляторы:
- http://appetize.io, дается 60 секунд на тестирование чего-либо, после этого интерфейс сбрасывается и приходится открывать все заново, после регистрации дают 100 минут/месяц бесплатно.
- http://browserstack.com, дается пробная версия с временем отладки в 30 минут, можно неограниченно создавать дополнительные аккаунты после того как пройдёт пробный период, понадобится новая почта, можно вписывать любую несуществующую. На некоторых устройствах есть возможность просмотра консоли и полной отладки, как в DevTools.
Modernizr
При желании можно воспользоваться библиотекой Modernizr для определения устройства с тачскрином.
Определение мобильного устройства на бэкенде
На стороне сервера определить мобильное устройство можно с помощью регулярного выражения (http://detectmobilebrowsers.com).
JavaScript console
Существует сервис, который позволяет отлавливать удаленные сообщения из консоли. Для чего это? Например, тестируем сайт на мобильном устройстве и необходимо выяснить, почему не работает тот или иной функционал, а инструменты вроде DevTools на мобильном устройстве недоступны. Что делать?
Поступаем следующим образом, идем на http://jsconsole.com, вводим команду :listen some_uniq_id, вместо some_uniq_id какой-нибудь уникальный идентификатор, получаем JS-код, вроде:
<script src="https://jsconsole.com/js/remote.js?some_uniq_id"></script>
И вставляем этот код на отлаживаемую страницу. Теперь мы можем получать сообщения консоли от всех пользователей, которые заходят на сайт.
