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