Сегодня у каждого есть в кармане мобильный телефон, а в нем мобильный браузер. Люди постоянно пользуются им в метро, на улицах и других местах, подчас самых неожиданных. Именно поэтому крайне важно сделать Ваш сайт удобным для посещения с мобильных устройств.
Содержание
Зачем адаптировать сайт для мобильных устройств
Адаптация сайта для мобильных устройств даст Вам два важных преимущества перед конкурентами:
- Благодаря мобильному интерфейсу, люди быстрее достигают своих целей, значит, у вашего сайта увеличивается конверсия.
- Поисковые системы отдают предпочтение сайтам, адаптированным для мобильных устройств. Подробнее об этом читайте в статье «SEO для мобильных устройств и компьютеров: разные результаты и стратегии».
Для того чтобы понять, нужно ли адаптировать ваш сайт для мобильных устройств, можно воспользоваться вордстатом и сделать выводы на основе статистики (используйте вкладку «Мобильные»).
Также для этой цели можно воспользоваться статистикой, полученной из Яндекс.Метрики.
Способы адаптации сайта для мобильных устройств
Существует несколько способов адаптации сайта для мобильных устройств.
1. Мобильная версия сайта
Рассмотрим пример. Допустим, мы отправляем запрос с настольного компьютера. Вместе с запросом браузер отправляет User Agent – информацию о браузере и устройстве, с которого уходит запрос. Сервер анализирует User Agent и возвращает клиенту полную версию сайта.
Для того чтобы указать браузеру на мобильную версию сайта, нужно воспользоваться тегом link, указав в нем ее адрес. Таким образом, когда мы заходим на сайт с мобильного устройства, сервер видит User Agent и переадресует нас на мобильную версию 301-м редиректом.
2. Динамическая верстка страниц
Еще одним способом адаптации сайта для мобильных устройств является динамическая верстка страниц. Общий принцип работы в данном случае тот же. Сервер смотрит на User Agent клиента и, в случае если пользователь зашел с мобильного устройства, возвращает ему мобильную версию, но без редиректа.
3. Сайт с адаптивным дизайном
Третьим и последним способом является адаптивный дизайн сайта. В таком случае сервер отдает всем устройствам единую версию сайта, которая подстраивается под любой размер экрана, начиная от большого телевизора и заканчивая умными часами.
Плюсы и минусы подходов
Первые два способа используют директиву User Agent. Также их объединяет наличие двух версий сайта – обычной и мобильной. У двух этих подходов есть ряд общих особенностей:
- загружается меньше ресурсов;
- над каждой версией сайта может работать отдельная команда;
- требуется отдельная поддержка и отдельное развитие.
Для сайтов с адаптивным дизайном характерны другие особенности:
- универсальность сайта для любых устройств;
- объем ресурсов неизменен, потому что всем устройствам отдается одна и та же версия;
- над сайтом работает единая команда.
Полезные ссылки
Потребности пользователей мобильных устройств
Аналитики часто обнаруживают проблемы в поведении пользователей, перешедших на сайт с мобильных устройств. Часто причина кроется в неудовлетворении потребностей, которые можно рассмотреть в пирамиде потребностей мобильного пользователя.
Адаптация сайта под мобильные устройства
Базовой потребностью является адаптация сайта под мобильные устройства. В первую очередь, необходимо выставить правильный масштаб, чтобы пользователи могли комфортно воспринимать информацию. Для этого применяется тег meta с параметром viewport.
После использования данного тега текст может не поместиться в экран по ширине, в результате чего появится горизонтальный скролл-бар. Чтобы этого избежать, нужно заменить свойство width на свойство max-width.
После этого текст помещается в экран и переносится по словам. Однако большой заголовок все еще не влезает. Нужно уменьшить шрифт заголовка. Для этого применяются медиазапросы – css-конструкции, с помощью которых можно менять стили, в зависимости от, например, ширины окна браузера.
В данном примере мы указали размер шрифта в 72px для обычной версии и в 36px для окон, ширина которых меньше или равна 400px.
У такого подхода есть свой минус – придется прописывать такие правила для каждого элемента страницы. Есть другой способ – задать 10-пиксельную точку отсчета для корневого элемента. Нужно понимать, что 10px в данном случае – это именно точка отсчета, а не окончательный размер шрифта на странице. А для всех элементов при этом задается размер шрифта в относительных единицах Rem, привязанных к корневому элементу. Теперь, когда нам нужно поменять масштаб исходя из ширины браузера, мы просто меняем размер корневого элемента – очень удобно.
Но можно сделать еще лучше – с помощью адаптивной типографики. Адаптивная типографика – это максимально отзывчивый способ изменить размер шрифта. При изменении ширины окна браузера размер шрифта также меняется.
Данная формула говорит о том, что минимальный размер шрифта равен 12px + 2,5 единицы ширины окна браузера. Рекомендуется задавать размер шрифта не менее 12px. Если текст довольно длинный, для мобильных устройств, лучше указать хотя бы 15px.
Удобства
Удобства – это такие простые вещи, которые легко реализовать разработчикам, но которые дают большой комфорт пользователю.
Телефонные номера
Телефонные номера всегда нужно указывать в международном формате с кодом страны. При этом мобильные браузеры автоматически находят такие номера, подсвечивают их своим цветом и добавляют подчеркивание. Если Вы хотите задать свои стили для такого телефона, нужно добавить тег meta с параметром format-detection, который отключает автодетекцию.
Не забудьте, что после этого нужно будет вручную сделать телефон ссылкой. Текст ссылки при этом может быть любым, но лучше указывать номер телефона. Также важно помнить, что по номерам формата 8 800 пользователи не смогут позвонить из-за границы.
На скриншоте видно, что происходит при нажатии на ссылку с телефонным номером. Слева – iOS. Справа – десктопный браузер.
Крупные кликабельные области
На современных сайтах обычно присутствует большое количество кнопок. Даже если кнопка является небольшой иконкой, кликабельная область вокруг нее должна быть крупной, чтобы в нее было проще попасть.
Формы
Также на многих сайтах имеются различные формы с текстовыми полями. Если Вы правильно указываете для них атрибут type, пользователю будет подаваться правильная клавиатура, экономящая его время на заполнение формы.
Цифровая клавиатура
Почтовая клавиатура – добавляет @ и точку
Телефонная клавиатура
Переворачивание устройства
Мобильное устройство можно переворачивать, но здесь главное – соблюсти меру. Если кардинально изменить раскладку, могут появиться баги, поэтому нужно быть аккуратными.
Пример работы сайта при переворачивании устройства. В вертикальном режиме – кнопка с иконкой. В горизонтальном режиме – кнопка с текстом.
Вписывание фотографий в экран
Любой эффект от красивой картинки может исчезнуть, если она некрасиво вписывается в экран. Продемонстрируем вписывание картинки в экран на примере.
Устанавливаем для картинки свойство height в 100 единиц viewport. Получаем подходящий размер, но картинка выходит за экран с правой стороны.
Устанавливаем max-width в 100 %. Картинка влезла, но деформировалась по ширине.
Устанавливаем свойство object-fit в cover. Картинка вписалась и будет корректно отображаться на любом экране.
Роскошь
На вершине нашей пирамиды находятся роскошь – сложные технические приемы, позволяющие превратить ваш продукт в нечто большее, чем просто сайт.
Адаптивные изображения
Экраны современных устройств отличаются различной плотностью пикселей. Имеются в виду экраны Retina. Адаптивные изображения позволяют отдавать наиболее подходящие картинки, в зависимости от плотности пикселей экрана. Это большая отдельная тема, про которую есть два отличных доклада.
- «Сколько нужно верстальщиков, чтобы вставить picture», Вадим Макеев
- «Во все тяжкие с responsive images», Павел Померанцев
Иконки для домашнего экрана
Приложения в современном смартфоне хранятся на домашнем экране. Иконка Вашего сайта может оказаться там же, если пользователь сохранит его туда. Для того чтобы иконка выглядела красиво, нужно иметь в запасе большой набор иконок.
Хорошая новость – иконки можно генерировать автоматически. Для этого существуют специальные сервисы. Например, www.favicon-generator.org.
Когда Ваш сайт попадает на домашний экран смартфона пользователя, он воспринимает его как приложение и может запустить в любой момент времени. При этом у него может не работать интернет. Существует возможность обеспечить работу сайта без доступа к интернету. На эту тему есть хороший доклад.
Фундамент пирамиды
При всем вышесказанном, не стоит забывать о фундаменте веба.
Как измерить скорость загрузки?
- Для измерения скорости загрузки можно воспользоваться бесплатным сервисом www.webpagetest.org. У него много опций, и он рисует неплохие графики.
- У Google есть хороший инструмент, дающий советы непосредственно для Вашей страницы: https://developers.google.com/speed/pagespeed/insights/.
Как ускорить загрузку в браузере?
Ускорение загрузки сайта на стороне сервера – это достаточно специфическая задача, решение которой зависит от используемых технологий. С ускорением загрузки в браузере ситуация проще. Чтобы решить эту задачу, можно предпринять следующие шаги:
- В первую очередь, необходимо сократить количество и объем HTTP-запросов. Для этого можно предпринять следующие шаги:
- Использовать CSS-спрайты. Множество картинок оформляется в одну большую, которая отправляется в браузер и уже там нарезается.
- Использовать встроенные в CSS картинки, чтобы не тратить на них отдельный запрос (data:URL).
- Собирать один минифицированный CSS- и JS-файл.
- Подключать JS-файл в конец страницы, чтобы не блокировать отрисовку.
- Сжимать изображения с помощью таких инструментов, как ImageOptim или ImageAlpha.
- Использовать адаптивные изображения.
- Использовать CDN-сервера, которые хранят популярные библиотеки.
- Использовать поддомены. У браузера существует ограничение на параллельное скачивание ресурсов с одного домена. Использование поддоменов может увеличить количество параллельных запросов.
- Использовать сжатие – gzip, zopfli, brotli, sdch.
- Использовать браузерный кэш – Expires, Cache-Control, Last-Modified, ETag.
Подробнее об ускорении загрузки читайте в статье «Как ускорить работу мобильной версии вашего сайта».
Профилирование в браузере
С помощью современного веб-инспектора, в браузере можно по шагам посмотреть, из чего состоит загрузка сайта, и выявить проблемные моменты.
Ссылка на полную версию
В мобильной версии обязательно должна быть ссылка на полную версию сайта.
В случае с мобильной версией добавляется параметр, открывающий новую версию перезагрузкой страницы: m.example.com → example.com?v=desktop.
В случае с динамической версткой используется аналогичное решение, но в пределах одного домена: example.com → example.com?v=desktop.
В случае с адаптивным дизайном ситуация немного сложнее. Рассмотрим пример. Допустим у нас есть один файл с общими стилями и один файл с мобильными стилями. Мы можем добавить параметр, отключающий мобильные стили, оставляя только общие. Изменения вступят в силу после перезагрузки страницы.
Есть решение, работающее и без перезагрузки страницы. Для этого нужно сначала отключить мобильные стили, а затем сбросить viewport. Работает в современных браузерах.
Семантика и доступность
Разумеется, всегда нужно помнить о семантике и доступности.
- Валидатор HTML-стандартов от W3C: http://validator.w3.org/
- Валидатор микроразметки в Яндекс.Вебмастер: https://webmaster.yandex.ru/site/tools/microtest/
- Статья на хабре: «Accessibility. Как мы делаем Яндекс доступным людям с ограниченными возможностями и почему считаем это важным»
- Статья на хабре: «Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса»
Источник (видео): Мобильные штучки — Артём Курбатов.
Классная статья! Расписаны нюансы адаптации, которые скрывают на других сайтах. Спасибо!