Как адаптировать сайт под мобильные устройства

Во всем мире интернет-трафик с мобильных устройств уже давно обошел десктопный. Адаптивность под разные экраны - это неотъемлемое условие сайтостроения в 2022 году. Его несоблюдение ведет к потере трафика и отсутствию конверсий.

Вы сами наверняка сталкивались с ситуацией, когда со смартфона трудно разобрать мелкий шрифт или попасть пальцем в нужную кнопку. Иногда сам вид сайта оставлял желать лучшего. Как такого избежать? Расскажем в статье.

Зачем нужно адаптироваться

1. Mobile-friendly ранжирование.

С 2015 года Яндекс и Google начали отдавать приоритет в выдаче сайтам, адаптированным под мобильные устройства. Чтобы попасть в топ, ресурс должен быть “дружелюбным” к мобильным пользователям, соответствовать стандартам юзабилити для экранов с небольшим разрешением.

2. Скорость загрузки.

Чем быстрее и корректнее загружается сайт, тем лучше к нему относятся пользователи и поисковики. Google даже ввел специальные показатели - Core Web Vitals, которые отражают время прогрузки основных элементов дизайна, а также стабильность макета. Проверить CWV можно через сервис Google PageSpeed Insight.

3. Уровень конверсии.

C неудобного и кривого сайта хочется скорее уйти, а не совершать на нем покупки. Поэтому конверсия прямо зависит от того, найдет ли пользователь нужный раздел или кнопку, понравится ли ему дизайн карточки товара/услуги, вызовет ли ресурс доверие в целом. Если этого не произойдет - пользователь просто уйдет к конкурентам.

4. Лояльность посетителей.

На удобный, приятный сайт хочется возвращаться. На нем совершаются повторные конверсии, его рекомендуют знакомым. Соответственно, растет прибыль компании.

5. Экономия.

Создание мобильной версии обходится дешевле, чем разработка отдельного приложения.

Когда нужно адаптироваться

Есть несколько признаков того, что ваш ресурс необходимо доработать под мобильные.

1. Страница не помещается на экран полностью, и изображение приходится сдвигать вправо или вниз. От этого нарушается логика последовательности блоков и целостность дизайна.
2. Макет “сужается”, элементы становятся мелкими и страницу приходится растягивать.

3. Всплывающие баннеры перекрывают больше половины экрана. Часто при этом кнопка закрытия баннера остается мелкой, по ней трудно попасть.
4. Между элементами слишком маленькие, слишком большие или просто неравномерные расстояния. Это затрудняет чтение текста.

5. Части дизайна “съезжают” относительно друг друга, а иногда и вовсе перекрывают соседние элементы.
6. Шапка или фильтр закрывают первый экран.
7. Кнопки и ссылки слишком мелкие, их неудобно нажимать пальцем.

Мобилопригодность также можно оценить с помощью ранее упоминавшегося сервиса PageSpeed Insight. В нем выставляется оценка от 0 до 100 баллов.Достаточно хороший показатель - 80 баллов и выше. Яндекс предлагает проверить адаптивность сайта в разделе Вебмастера.

Три способа адаптации

Представить сайт на мобильных можно разными путями.

Адаптивная верстка

Страницы будут открываться по основному адресу, но с измененным контентом. Реализуется такая технология по-разному.

1. За счет html тега viewport, определяющего область просмотра соразмерно ширине экрана. Отдельно прорабатываются стили элементов - настраивается количество выводимых карточек товаров, ширина шапки и основного меню, пр. Для этого используются CSS-фреймворки. Самые популярные из них - Bootstrap, CSS Media Queries.
2. С помощью динамического JS. Dynamically-served JavaScript позволяет менять демонстрируемый юзеру контент в зависимости от используемого им устройства. Сначала с сервера загружается html код (одинаковый для всех), а затем встроенный в него JS файл определяет, что нужно вывести на экран. Динамический скрипт может менять расположение и размер блоков, убирать ненужные элементы.
3. Через инструменты конструктора. Сайты, создаваемые на известных конструкторах - вроде Wix или Tilda, изначально обладают высокой адаптивностью. Отдельные блоки можно настроить под показ только на экранах с определенным разрешением. Это особенно актуально для меню, шапок и футеров.

Плюсы подхода

Относительная дешевизна и быстрота разработки, простота продвижения сайта.

Минусы

Необходимо тщательно оптимизировать скорость загрузки страниц из-за большого количества стилей в CSS. Нельзя просмотреть десктопную версию сайта с мобильного, если возникнет необходимость.

Отдельный поддомен

Для десктопа и для мобильных создаются два разных сайта - https://www.example.com и https://m.example.com - каждый со своим контентом. C помощью специальной команды сервер определяет user agent пользователя и направляет его на нужную версию ресурса. Для мобильных можно сделать абсолютно отличающийся от десктопного дизайн страниц - более функциональный в заданных условиях.

Для поисковых систем два поддомена - это два разных сайта. Это необходимо учесть при планировании и реализации seo продвижения. Интернет-магазинам важно правильно связать базы данных с обоими поддоменами, чтобы изменения не приходилось вносить дважды.

Плюсы подхода

Полная свобода в плане верстки мобильной версии, возможность добавить новый функционал. Легче адаптировать скорость загрузки.

Минусы

Создание, администрирование, продвижение отдельного поддомена требует затрат времени и бюджета. Необходимо предупредить дублирование контента в поиске.

Плагины

Для большинства CMS существуют специальные плагины, которые заменяют шаблон основной темы сайта, если распознают переход с мобильного устройства. На WordPress самые распространенные решения - WPtouch или Mobile Pack. Содержание страницы при десктопном и мобильном просмотре может быть как идентичным, так и отличающимся.

Плюсы подхода

Простота реализации, возможность модификации содержимого.

Минусы

Доступно не для всех CMS. Мобильная версия открывается на субдомене, поэтому возникает проблема дублирования контента.

Признаки хорошего мобильного сайта

1. Пользователь тратит минимум времени на поиск нужной информации/товара/услуги.

Для этого в юзабилити должно быть продумано меню, поиск, сортировки каталога.

2. При загрузке макет максимально быстро принимает стабильную форму.

Среди параметров Core Web Vital от Google есть показатель Cumulative Layout Shift - совокупный сдвиг макета. Бывает так, что при первой отрисовке посетитель видит элемент и пытается нажать на него. Но в этот момент происходит дозагрузка и искомый элемент сдвигается. Это приводит к негативному пользовательскому опыту, которого необходимо избегать.

3. Работает стабильно для разных устройств.

Под мобильными устройствами обычно подразумевают смартфоны и забывают о планшетах, через которые все чаще пользователи открывают сайты в интернете. Еще стоит учитывать, что на малых экранах есть вертикальное и горизонтальное положение, под которые тоже нужно адаптироваться.

4. Нет перебора с рекламой и баннерами.

Это один из самых раздражающих факторов в сайтостроении в принципе. В мобильных версиях он становится еще серьезнее, ведь баннеры занимают и без того небольшую область обзора, могут перекрывать важные детали дизайна, мешать взаимодействию с интерактивными элементами.

5. Без проблем индексируется поисковыми системами.

Чтобы на сайт смогли попасть пользователи из поисковых систем, на него, в первую очередь, должны попасть поисковые роботы. Особенно важно следить за корректной индексацией при использовании поддоменов или замещающего контента.

Что сделать на практике

1. Используйте кнопки вместо ссылок

Рекомендуемый размер кликабельных иконок для Android - 7 мм или 48 пикселей. Такие кнопки комфортны для нажатия подушечкой пальца. Не забывайте и про комфортное расстояние между элементами.

2. Позаботьтесь об удобстве заполнения форм.

Важно использовать правильные типы полей ввода - для телефонных номеров, email адресов, url или дат. Это предупреждает ошибки в передаваемых данных и в целом повышает комфорт пользователя. Для полей имени пользователя и пароля рекомендуется отключить автокоррекцию правописания, автозаполнение и автоматический ввод с заглавной буквы.

3. Сделайте контент читабельным.

Часто пользователи просматривают контент с телефона на ходу, читая тексты по диагонали, переходя сразу к интересующей части.Учитывайте это при построении мобильного UI/UX дизайна:

• выделяйте в тексте смысловые разделы, к каждому прописывайте короткий информативный заголовок;
• перед достаточно длинными текстами размещайте кликабельное содержание;
• используйте нумерованные и маркированные списки;
• добавляйте иллюстрации и инфографику - они дополнительно структурируют контент, делают его более содержательным;
• используйте крупный шрифт - не менее 16 пунктов;
• следите за контрастностью шрифтов и фонов - найдите баланс между читаемостью и комфортом для глаз;
• по возможности предусмотрите “ночной” режим просмотра контента на черном фоне.

4. Добавьте горизонтальную прокрутку таблиц.

На маленьких экранах не помещаются таблицы более чем из 2-3 столбцов. Эта проблема решается горизонтальной прокруткой через свойство CSS - например, webkit-overflow-scrolling: touch.

5. Адаптируйте каталог и коммерческие факторы в интернет-магазине.

Проследите, чтобы фильтры и сортировки открывались только по клику. Так экономится драгоценное экранное место. Оптимизируйте размер фотографий, кнопок в карточках товаров. Определите, сколько карточек выводить на одном экране при просмотре разделов каталога. Позаботьтесь о функциональности корзины. В этом помогут специальные плагины - например, ClickBank.

6. Избавьтесь от горизонтальной прокрутки страницы.

Весь контент должен умещаться в одну ширину экрана. Таблицы - исключение.

7. Используйте геолокацию.

При согласии пользователя вы можете использовать информацию о его местоположении для улучшения сервиса - показа адресов самовывоза, ближайших филиалов кафе или магазина. Для этого нужно подключить API ЯндексКарт или Google Maps. Не забудьте протестировать и оптимизировать скорость работы плагина.

Тестирование

Чтобы тщательно проверить работоспособность мобильной версии сайта, не обязательно иметь под рукой все возможные устройства и версии OS. Для этого разработаны симуляторы.

• BrowserStack - эмулирует десктопные браузеры, а также версии для мобильных;
• Genymotion - подходит для работы с системой Android;
• iPhone simulator - для продуктов от Apple.

Кроме того, тестирование можно провести через режим мобильного разработчика Google Chrome.

Заключение

Успешный бизнес - это бизнес, соответствующий трендам своего времени. Сейчас мобильные устройства используются для серфинга в интернете чаще, чем десктопные. Поэтому адаптация сайта под смартфоны и планшеты - must have для любой компании. Чтобы сайт был удобным для пользователей, необходимо оптимизировать ширину страниц и размеры кликабельных элементов, настроить отображение таблиц, фильтров каталогов, карточек товаров. Провести адаптацию под мобильные можно с помощью поддомена или через настройку CSS стилей.

В студии AppFox можно подать заявку на программирование, создание игр или заказать разработку приложений https://appfox.ru и получить бесплатную консультацию по ценам и услугам.