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

С телефонов приходит больше половины посетителей, а решение о том, как выглядит сайт, почти всегда принимают за компьютером. Отсюда и разрыв: на большом экране всё в порядке, на маленьком — половина кнопок не нажимается.

Сначала проверьте, есть ли проблема на самом деле

Откройте Метрику, отчёт «Устройства», и поставьте рядом две колонки: долю визитов и процент отказов.

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

Вторая проверка — руками. Откройте свой сайт на телефоне и попробуйте пройти путь клиента целиком: найти цену, найти услугу, оставить заявку. Не смотреть, а именно сделать. Обычно всё становится ясно на втором шаге.

Мобильная версия или адаптивная вёрстка

Исторически было два подхода. Отдельный мобильный сайт на поддомене вида m.site.ru — и адаптивная вёрстка, когда страница одна, а раскладка перестраивается под ширину экрана.

Сегодня выбора фактически нет: делают адаптивную вёрстку. Отдельная мобильная версия означает два сайта, которые надо синхронно обновлять, и две страницы в поиске вместо одной. Расходится это быстро: цену поправили на основном, а на мобильном осталась старая.

Так что когда говорят «сделать мобильную версию сайта», почти всегда имеют в виду именно адаптивную вёрстку. Дальше я буду называть это так.

Что ломается чаще всего

За несколько лет набор проблем не меняется. Вот они по частоте, а не по тяжести.

• Горизонтальная прокрутка. Страница уезжает вбок, потому что какой-то один элемент шире экрана — обычно таблица, широкая картинка или блок с жёстко заданной шириной в пикселях. Симптом видно сразу, а причину ищут долго.
• Мелкие кнопки и ссылки. Палец — это примерно 44 пикселя. Всё, что меньше, приходится нажимать с прицеливанием, и часть людей просто не попадает.
• Таблицы. Прайс на шесть колонок на телефоне превращается в кашу. Либо таблицу кладут в отдельный блок с собственной прокруткой, либо на узком экране перестраивают в карточки.
• Тяжёлые изображения. На телефоне грузится та же картинка на 2000 пикселей, что и на десктопе. При мобильном интернете это секунды ожидания, за которые человек успевает уйти.
• Формы. Поля в два ряда, мелкий шрифт, неправильный тип поля — и вместо цифровой клавиатуры для телефона открывается обычная. Мелочь, которая стоит заявок.
• Меню. Десктопное меню в восемь пунктов на узком экране либо не помещается, либо схлопывается в кнопку, которая не открывается.
• Фиксированные элементы. Прилипшая шапка, всплывашка и кнопка чата вместе занимают половину экрана телефона, и читать остаётся нечего.

В каком порядке это чинить

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

1. Убрать горизонтальную прокрутку. Находится за десять минут: сузить окно браузера и искать элемент, который не помещается. Часто виноват один блок.
2. Разобраться с картинками. Отдавать под маленький экран маленькие файлы, перевести в современный формат, задать размеры заранее, чтобы вёрстка не прыгала при загрузке.
3. Привести в порядок первый экран. Что человек видит, не прокручивая: понятно ли, куда он попал, и есть ли куда нажать. На телефоне этот экран решает больше, чем на компьютере.
4. Довести формы и кнопки. Крупные зоны нажатия, правильные типы полей, форма в одну колонку.
5. Перебрать остальные блоки. Таблицы, галереи, карточки, меню — по одному, начиная с тех страниц, куда приходит трафик.

И только после этого имеет смысл мерить скорость и заниматься тонкой настройкой. Оптимизировать сайт, который уезжает вбок, — трата времени.

Сколько это занимает

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

Если сайт на готовой теме, адаптивность в ней чаще всего уже есть, и ломается она правками, которые делали поверх темы. Тогда чинится конкретное место, а не весь сайт.

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

Чего делать не нужно

• Прятать контент от мобильных. Соблазн скрыть на телефоне «лишние» блоки велик, но поиск видит обе версии, и то, что спрятано, перестаёт работать на продвижение.
• Заводить отдельный мобильный поддомен. Причины выше: два сайта, две страницы в поиске, расхождение контента.
• Начинать с редизайна. Адаптивность — это вёрстка, а не внешний вид. Новый дизайн, свёрстанный так же плохо, будет так же плохо работать на телефоне.

Как понять, что получилось

Через две-три недели после правок снова откройте отчёт по устройствам. Показатель один: отказы со смартфонов должны сравняться с десктопными. Если сравнялись — работа сделана. Если нет, дело было не в адаптивности, и надо смотреть дальше: структуру, тексты, предложение.

Об этом — в статье «Сайт есть, а заявок нет». А если по ходу выяснилось, что чинить придётся слишком много, посмотрите три проверки, которые показывают, чинить или делать заново.

Могу посмотреть ваш сайт на телефоне и сказать, что именно мешает, — это бесплатно и занимает у меня час. Если окажется, что адаптивность в порядке, так и скажу: переделка нужна не всегда.