Адаптивный сайт: почему мобильная версия решает

В Эстонии 60 до 70 процентов веб-трафика идёт с мобильных устройств. Для многих ниш доля ещё выше.

Это значит, что мобильная версия это не дополнение к десктопной, а основная версия для большинства людей. Десктоп всё чаще вторичен.

Адаптивный сайт автоматически подстраивается под размер экрана: на телефоне один вид, на планшете другой, на десктопе третий.

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

Google использует mobile-first индексацию: он оценивает в первую очередь мобильную версию вашего сайта, а не десктопную.

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

Откройте свой сайт на телефоне и пройдите путь клиента: найдите услугу, посмотрите цену, попробуйте оставить заявку.

• •Быстро ли грузится
• •Читается ли текст без увеличения
• •Удобно ли нажимать кнопки и заполнять форму
• •Ничего не вылезает за край экрана

Если где-то неудобно, там вы теряете клиентов.

Есть несколько проблем, которые мы видим именно на местных сайтах, и общий тест адаптивности их не ловит.

Длинные эстонские слова. Кнопка «Заказать» на русском помещается, а «Küsi hinnapakkumist» на узком экране переносится на две строки или вылезает за край. Составные слова в заголовках ломают вёрстку так же. Проверять мобильную версию нужно на каждом языке, а не только на том, на котором её рисовали.

Переключатель языка. На десктопе он в шапке, а на телефоне часто спрятан в конце меню или пропадает совсем. Русскоязычный клиент, попавший на эстонскую страницу, должен видеть переключатель сразу.

Cookie-баннер. На телефоне он нередко закрывает полэкрана вместе с кнопкой звонка. Баннер должен быть компактным, с одинаково заметными кнопками «Принять» и «Отклонить».

Оплата через банк-линк. Покупатель уходит с сайта в приложение банка, подтверждает платёж через Smart-ID и должен вернуться в магазин. Если возврат настроен плохо, заказ оплачен, а клиент видит пустую страницу. Это проверяется только реальной тестовой покупкой с телефона.

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

• •Найдите себя в Google по запросу услуги и откройте сайт из выдачи, а не по закладке.
• •Нажмите на телефон: звонок должен начинаться одним касанием.
• •Нажмите на адрес: должна открываться карта с маршрутом.
• •Заполните форму записи одной рукой. Поле телефона должно открывать цифровую клавиатуру, поле почты клавиатуру с символом @.
• •Переключите язык на странице услуги: вы должны остаться на той же услуге.
• •Откройте прайс: таблица не должна требовать прокрутки вбок.
• •Повторите на втором телефоне: если у вас iPhone, попросите знакомого с Android.

Правкой за несколько часов обычно решаются: кликабельный телефон, размер кнопок и шрифта, сжатие картинок, компактный cookie-баннер, клавиатуры в полях формы.

Редизайн нужен, когда сайт свёрстан с фиксированной шириной, меню не превращается в мобильное, а таблицы и блоки построены так, что их не перестроить. Латать такой сайт дороже, чем переделать. Редизайн у нас стоит от 690€, и мобильная версия в нём рисуется первой, а не подгоняется в конце.