Урок 15 · 7 минут чтения
Как сделать сайт удобным на телефоне
Большинство посетителей открывают сайты со смартфона. Если на телефоне сайт неудобен — клиент уходит к конкуренту за несколько секунд.
Чек-лист мобильной версии
- Шаблон адаптивный — сайт перестраивается под ширину экрана.
- Текст читается без увеличения (от 16px).
- Кнопки крупные — по ним легко попасть пальцем.
- Телефон кликабельный — звонок в одно касание.
- Главное действие видно на первом экране.
- Нет горизонтальной прокрутки.
- Фото сжаты — страница грузится быстро даже на 4G.
- Меню компактное и понятное.
- Формы короткие: имя и телефон вместо десяти полей.
- Всплывающие окна не закрывают весь экран.
- Таблицы не ломают вёрстку.
- Контакты и адрес открываются в картах.
Как проверить
Откройте сайт на своём телефоне и пройдите путь клиента от главной до заявки или заказа. Дополнительно проверьте скорость в Google PageSpeed Insights.
Все шаблоны в нашем каталоге адаптивные — перед выбором откройте демо на телефоне.
Практика
- Откройте свой учебный сайт на телефоне.
- Пройдите чек-лист из урока и отметьте проблемы.
- Проверьте скорость в Google PageSpeed Insights.
- Исправьте найденное: сожмите фото, сократите формы.
Проверьте себя
1. Что такое адаптивный сайт?
2. Какой минимальный размер текста на телефоне?
3. Каким должен быть телефон на сайте?
Готовы попробовать? Выберите шаблон и создайте сайт сами за несколько минут — начать можно бесплатно.
Частые вопросы
Что такое адаптивный сайт?
Это сайт, который автоматически подстраивается под экран: компьютер, планшет или телефон.
Нужна ли отдельная мобильная версия?
Нет, сегодня достаточно адаптивного шаблона — одна версия сайта удобно работает на всех устройствах.