Если на телефоне приходится раздвигать страницу пальцами, чтобы прочитать абзац, до нужного ответа можно так и не добраться. А ведь вопрос бывает совсем простой: какую книгу почитать ребёнку перед сном или где найти заметку о кошачьих привычках. Мобильный дизайн — не уменьшенная копия сайта. Он нужен, чтобы читать, искать и переходить между страницами было удобно на узком экране.
Сайт открывают в дороге, на кухне, пока ребёнок занят уроками. В такие минуты хочется сразу увидеть текст, разобраться с меню и попасть по нужной кнопке с первого раза. Длинную семейную историю, возможно, дочитают вечером с ноутбука. Но впервые откроют её с телефона — и неудобная первая страница может отбить желание возвращаться.
Что на самом деле означает «удобно для телефона»
Просто сузить страницу недостаточно. Текст должен читаться без увеличения, фотографии — помещаться на экране, меню — не закрывать статью. Обычно в этом помогает адаптивная вёрстка: элементы одного и того же сайта меняют размер и расположение в зависимости от ширины экрана.
При этом нельзя ради аккуратного вида убирать важное содержание. Если из статьи о знакомстве ребёнка с питомцем на телефоне пропадают правила безопасности, удобной такую версию не назовёшь. Всё существенное должно оставаться на месте, а путь к нему — быть понятным.
Читателю легче остаться и найти нужное
На узком экране мелочи быстро начинают раздражать. Заголовок занимает полстраницы, всплывающее окно закрывает начало текста, фотографии загружаются с задержкой и сдвигают абзацы. Читатель теряет место, где остановился, и уходит. Удобная страница не заставит дочитать каждую запись, зато не будет мешать тому, кто хочет читать.
Чтение без лишних движений
В длинной записи выручают небольшие смысловые абзацы и заметные подзаголовки: после перерыва на домашние дела проще найти нужное место. Текст не должен требовать горизонтальной прокрутки на телефоне. Но проверять стоит и большой экран — там слишком длинные строки тоже утомляют.
Нажатие без промаха
Пальцем попасть сложнее, чем курсором. Если ссылки стоят вплотную, а маленький значок меню соседствует с другой кнопкой, легко открыть не ту страницу. Кнопкам и ссылкам нужны достаточный размер и расстояние друг от друга. Подписи помогают не меньше: «Все записи о питомцах» понятнее значка, смысл которого приходится угадывать.
Стоит отдельно попробовать оставить комментарий. Видны ли поля, когда открыта экранная клавиатура? Понятно ли из сообщения об ошибке, что нужно исправить? Неудобная форма может оборвать разговор после хорошей статьи.
Почему это важно не только семейному блогу
На других сайтах задачи свои: узнать часы работы кружка, прочитать инструкцию, найти адрес или отправить сообщение. С телефона человек хочет сделать то же самое. Но если номер спрятан, расписание не помещается на экране, а кнопка отправки уехала за край, задача остаётся нерешённой.
Мобильное удобство связано с доступностью, но не заменяет её. Одному человеку нужно увеличить шрифт, другому — воспользоваться экранным диктором; кому-то трудно нажимать на мелкие элементы. Понятные заголовки, подписи к полям, хороший контраст и возможность управлять страницей с клавиатуры полезны на любом устройстве. Всё это нужно проверять отдельно: сама по себе адаптивная вёрстка доступности не гарантирует.
Поисковые системы тоже учитывают работу страниц на мобильных устройствах. Но ориентироваться только на поисковую выдачу не стоит. Читателю важнее, чтобы страница открылась, текст не прятался и задуманное удалось сделать.
Что проверить на своём сайте
Для начала хватит собственного телефона. Откройте несколько обычных страниц и пройдите путь читателя: с главной — к записи, затем к списку советов и следующей заметке по теме. Не ограничивайтесь главной страницей. Длинные заголовки, фотографии и комментарии могут обнаружить проблемы, которых на ней нет.
- Ширина: нет ли горизонтальной прокрутки у текста, таблиц и изображений.
- Шрифт: можно ли читать обычный абзац без увеличения страницы.
- Навигация: легко ли открыть меню и вернуться к списку записей.
- Нажатия: не расположены ли ссылки и кнопки слишком близко друг к другу.
- Фотографии: не перекрывают ли они текст и не сдвигают ли его после загрузки.
- Формы: удобно ли заполнить поля и увидеть результат отправки.
Проверьте страницу на экране другого размера и поверните телефон горизонтально. А если есть возможность, попросите близкого найти конкретную запись без подсказок. Пауза перед меню или попытка нажать на элемент, который не работает как кнопка, многое покажет.
Скорость и удобство связаны, но не совпадают
Страница может загрузиться быстро, но остаться неудобной из-за мелкого шрифта. Бывает и наоборот: читать легко, только сначала приходится ждать тяжёлые фотографии. При мобильном соединении задержка особенно заметна, поэтому изображения лучше готовить в разумном размере, а декоративные эффекты не ставить выше текста.
Одного числа в отчёте или проверки на одном телефоне мало. Посмотрите, какие страницы открывают с телефона, где читатели уходят и доходят ли до нужного раздела. О том, какие метрики нужны семейному блогу и как их читать, полезно помнить без поспешных выводов: на интерес к записи влияют не только оформление, но и тема, и время публикации.
С чего начать исправления
Необязательно переделывать весь сайт разом. Сначала уберите то, что мешает человеку выполнить задачу: боковую прокрутку, перекрытое меню, нечитаемый текст, кнопку, по которой трудно попасть. Потом проверьте самые посещаемые записи и страницы, на которые заходят напрямую. Украшения и мелкую настройку отступов можно оставить на потом.
Для первой проверки выберите длинную запись с фотографией и прокрутите её на телефоне до конца, не увеличивая экран. Если таблица или снимок выталкивает текст за правый край, запишите адрес страницы и место сбоя. С такой конкретной заметки проще начать исправление.