Мобильная версия сайта: почему она теперь главная

Почему отдельную мобильную версию больше не делают

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

• Двойная работа при каждой правке. Поменяли цену — править надо в двух местах. Одно из них рано или поздно забывают, и версии расходятся.
• Урезанное содержание. В мобильную копию переносили только «главное», и человек с телефона не находил того, что видел с ноутбука.
• Два адреса одной страницы. Поиску приходится решать, какой из них показывать, а ссылка, которой человек поделился с телефона, открывается у получателя на компьютере в мобильном виде.
• Переадресация, которая ошибается. Определение устройства по строке браузера промахивается на планшетах и на новых моделях, а исправляется это уже после жалоб.

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

Что значит «мобильная вперёд»

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

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

Второй побочный эффект — порядок блоков. На телефоне нет «справа» и «слева», есть только «выше» и «ниже», поэтому приходится честно решить, что человек читает первым. Это тот же вопрос, который мы разбирали про первый экран сайта: три ответа — что вы делаете, для кого и что нажать — должны поместиться в полосу высотой с телефонный экран.

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

Список не теоретический: это то, что мы находим на чужих сайтах при аудите и у себя при приёмке.

• Горизонтальная прокрутка. Страницу можно сдвинуть вбок, и текст уезжает за край. Виновник почти всегда один: что-то с жёсткой шириной — широкая картинка, вставленная карта, длинное слово без переносов или ряд, который не умеет сворачиваться. Выглядит как поломка, и так и есть.
• Мелкие зоны нажатия. Палец накрывает область заметно больше курсора. Кнопка высотой в строку текста на макете аккуратная, а на телефоне даёт промахи: человек попадает в соседнюю ссылку и возвращается назад. Особенно это заметно в шапке, где рядом стоят меню, телефон и кнопка заявки.
• Прайс и характеристики таблицей. Таблица на четыре колонки на телефоне либо сжимается в кашу, либо вылезает за край. Её надо превращать в набор карточек — по карточке на позицию, с подписями внутри.
• Подменю, которое открывается наведением. У пальца нет наведения. Такое меню либо не открывается вовсе, либо открывается и не закрывается, и перекрывает половину экрана.
• Поле формы, уезжающее под клавиатуру. Человек нажимает на поле, выскакивает клавиатура, поле оказывается под ней. Рядом обитает вторая беда: для номера телефона открывается буквенная клавиатура, а для почты — без знака собаки. Это настройка типа поля, а не вопрос дизайна, и проверяется она только пальцем на живом телефоне.
• Телефон и адрес, которые нельзя нажать. На телефоне номер должен набираться одним касанием, а адрес — открывать карты. Если номер набран картинкой или просто текстом, человек переписывает его руками или не звонит.
• Всплывающее окно во весь экран. На компьютере это окошко в середине, на телефоне — весь экран, и кнопка закрытия часто оказывается за его границей. Выхода у человека нет, кроме закрытия вкладки.
• Фиксированная шапка в треть экрана. Логотип, меню, телефон и кнопка, приклеенные к верху, на телефоне съедают столько места, что читать остаётся узкую щель.
• Тяжёлая заглавная фотография. Мобильный интернет медленнее офисного вайфая, и до первого экрана дело просто не доходит. Нормативы и способы измерить мы собрали отдельно — скорость загрузки сайта.

Что проверить самому за двадцать минут

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

1. Попробуйте сдвинуть страницу влево-вправо на каждом экране. Сдвигается — есть горизонтальная прокрутка.
2. Нажмите на номер телефона. Должен открыться набор номера, а не ничего.
3. Нажмите на адрес. Должны открыться карты.
4. Откройте меню и закройте его. Потом откройте и нажмите «назад» в браузере — меню не должно остаться висеть поверх страницы.
5. Заполните форму заявки до конца и отправьте. Смотрите, видно ли поле, в которое вы пишете, и какая клавиатура открывается для номера.
6. Долистайте до прайса и перечней характеристик. Они обрезаются первыми.
7. Включите в телефоне тёмную тему и пройдите главную ещё раз: пропавший текст на светлом фоне обычно находится именно так.
8. Попросите кого-нибудь с телефоном постарше сделать то же самое. Новый аппарат прощает многое.

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

Сколько у вас посетителей с телефона

Общую долю мобильного трафика мы здесь не назовём — любая такая цифра без ссылки на исследование и дату замера годится только для спора в курилке. И она вам не нужна: у вас есть своя.

Откройте Яндекс Метрику и посмотрите отчёт по устройствам за последние три месяца. Метрика входит в любой наш тариф и ставится на сайт в день сдачи. Цифра в этом отчёте — единственная, по которой стоит принимать решения, и по нишам она расходится очень сильно: у доставки еды и у поставщика промышленного оборудования картина разная. Там же, в разбивке по устройствам, видно вторую половину ответа: сколько заявок приходит с телефонов. Если посетителей с телефона много, а заявок с них почти нет, дело обычно не в том, что «с телефона не покупают», а в одном из пунктов списка выше.

Как это устроено у нас

Вид на телефоне и планшете входит в любой тариф — от «Старта» за 24 900 ₽ до «Магазина» за 179 900 ₽; полный состав работ указан на странице цен. Это не отдельная услуга и не доплата: верстать сегодня иначе просто незачем. Отдельной мобильной версии мы не сделаем даже по просьбе — в таком заказе нет пользы для заказчика, зато есть два сайта вместо одного и двойные правки навсегда.

Где честная граница. Мы отдаём сайт, проверенный на телефоне, но дальше он живёт: на страницу добавляют таблицу из Экселя, ставят виджет чата, загружают фотографии прямо из галереи телефона. Любая из этих вещей ломает узкий экран, а на рабочем компьютере выглядит нормально, поэтому замечают её не сразу. В обслуживании «База» за 4 900 ₽ в месяц есть две правки в месяц и отслеживание доступности, в «Активе» за 9 900 ₽ — правки без ограничения; но заметить, что на телефоне что-то разъехалось, должен кто-то живой — мы при правке или вы при проверке.

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