Мобильная версия сайта: 10 правил с примерами «до» и «после»
Большинство посетителей интернет-магазина приходят с телефона, и именно там решают, покупать или нет. Вот 10 правил мобильной версии сайта с примерами «до» и «после» и точными размерами кнопок и шрифтов по рекомендациям Apple, Google и WCAG.
Почему мобильная версия — не «сжатый» сайт?
На телефоне человек нажимает пальцем, читает на маленьком экране и часто держит телефон одной рукой. То, что удобно на компьютере, на телефоне становится мелким, тесным и непонятным. К тому же Google индексирует сайты по мобильной версии, так что от неё зависят и поиск, и продажи.
10 правил с примерами
1. Делай крупные кнопки
Пользователь нажимает пальцем, а не курсором. Apple советует зону нажатия не меньше 44 × 44 pt, Android — 48 × 48 dp, а стандарт доступности WCAG 2.2 задаёт минимум 24 × 24 px.
2. Увеличь шрифт
То, что нормально на компьютере, на телефоне не прочитать. Основной текст делают от 16 px, чтобы его не приходилось увеличивать; Lighthouse от Google отмечал страницы, где больше 40% текста мельче 12 px.
3. Следи за отступами
Когда блоки стоят вплотную, экран выглядит перегруженным и дешёвым. Воздуха должно быть больше, чем кажется нужным.
4. Ставь кнопки друг под другом
Две кнопки в ряд на телефоне получаются узкими. Кнопки на всю ширину, одна под другой, легче нажать и реже нажимают случайно.
5. Показывай, что можно листать
Если карточки листаются, человек должен это видеть: край следующей карточки, точки или стрелки подсказывают, что дальше есть ещё.
6. Уменьши меню
Шапка не должна занимать пол-экрана. Компактная шапка с логотипом и кнопкой меню оставляет место для главного.
7. Прячь второстепенное
На телефоне не нужно показывать всё сразу: аккордеоны, вкладки и «показать больше» делают страницу чище. Прячьте, но не удаляйте — Google индексирует мобильную версию, и содержание должно быть тем же, что на компьютере.
8. Делай контакты кликабельными
Телефон и почта должны открываться одним нажатием: для этого есть ссылки tel: и mailto:. Кнопка «Позвонить» — ещё проще.
9. Не перегружай первый экран
На первом экране места мало: один заголовок, короткое пояснение и одно главное действие. Баннеры, скидки и подписки — ниже.
10. Не копируй компьютерную версию
Мобильная версия — это не уменьшенный сайт. Блоки переставляют, три колонки превращают в одну, лишнее убирают.
В Metriverra видно, как конвертируют посетители с телефонов и с компьютеров, поэтому легко проверить, принесли ли улучшения мобильной версии продажи.
Коротко
- Кнопки — от 44 × 44 pt (Apple) или 48 × 48 dp (Android), минимум WCAG — 24 × 24 px.
- Основной текст — от 16 px, с отступами между блоками.
- Кнопки — на всю ширину, одна под другой; контакты — кликабельные.
- Первый экран — одно главное действие, второстепенное — в аккордеоны.
- Мобильная версия — перестройка, а не сжатый сайт; содержание то же, что на компьютере.
Источники: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
