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