Когда читаешь про ралли в дороге, сайт не должен ломать глаза

Опубликовано в Блоге 12.02.26 в 15:38

Автор: Администратор

Ты едешь в машине между точками, связь прыгает, солнце бьёт в экран, телефон трясёт на каждой кочке, одной рукой держишься, второй пытаешься быстро открыть нужную страницу, а времени впритык.

Или стоишь у спецучастка: ветер, пыль, перчатки, шум, вокруг все что-то обсуждают, а тебе надо за 20 секунд понять, во сколько старт, где ссылка на заметку, что ты вчера читал и как туда вернуться. И вот в такие моменты сайт либо помогает, либо превращается в отдельный квест: мелкий шрифт, строки сжаты в узкие колонки, всё "уехало", нужно попадать пальцем в микроскопическую ссылку, а чтобы дочитать заголовок, приходится горизонтально таскать страницу туда-сюда, ломая глаза и теряя терпение. Если дома на диване это почти незаметно, то в дороге это просто невозможно.

Самый честный тест сайта про ралли проходит не на большом мониторе, а в дороге. Ты открываешь сайт не ради вдумчивого чтения, а чтобы быстро найти нужное: список материалов, вчерашнюю заметку, страницу, на которую кто-то ссылался. И вот тут либо все находится за несколько секунд, либо начинается борьба с интерфейсом.

Неадаптивная верстка в таких условиях бьет по нервам моментально. Заголовок не помещается и обрезается так, что смысл пропадает. Текст выглядит сжатым и плотным, как будто его заперли в узких ячейках. Ссылка настолько мелкая, что попасть в нее с первого раза — удача. Самое неприятное — горизонтальный скролл: ты читаешь строку, затем вынужден возить страницу влево-вправо, чтобы дочитать пару слов, и каждый раз теряешь место. На спокойном столе это просто неудобно. В дороге это превращается в желание закрыть вкладку и больше туда не возвращаться.

Чтобы всего этого избежать я переработал список блогов так, чтобы он вел себя как нормальный список для мобильного чтения: заголовки переносятся предсказуемо, вторичная информация не давит основную, нажимать можно уверенно, а страница не заставляет делать лишние движения ради одного абзаца.

Правильный сайт обязан нормально читаться тогда, когда его реально читают: с телефона, на ходу, в дороге, в неудобных условиях. Когда у тебя нет времени "разбираться", почему текст не помещается, почему строки расползлись, почему страница ведёт себя как таблица в старом офисном документе.

Раньше этот список был собран по логике "главное, чтобы ровно стояло": табличная раскладка держит колонки, выглядит аккуратно на большом экране и создаёт ощущение порядка. Но на мобильном порядок часто превращается в ловушку. Колонки начинают давить друг друга, заголовки превращаются в рваные переносы, вторичная информация спорит за ширину, появляется горизонтальная прокрутка, а кликабельные зоны становятся настолько точными, что промах равен раздражению. Самое неприятное, что в моменте это ощущается не как "ой, не адаптивно", а как "сайт мешает", и закрыть его хочется быстрее, чем дочитать.

Я переделал этот блок так, чтобы он вёл себя как нормальный список, а не как сетка из ячеек. Чтобы заголовок можно было прочитать с первого взгляда, чтобы строка не разваливалась на случайных ширинах экрана, чтобы пальцем можно было нажимать без ювелирной точности, и чтобы страница не требовала от тебя лишних движений, когда ты и так в дороге. Это не про "красоту ради красоты", а про элементарное внимание к читателю: плохая связь, плохой свет, неудобная поза, мало времени.

Эту запись я оставляю по очень практичным причинам. Первая — фиксировать изменения не только в коде, но и словами: почему было неправильно и что именно исправлено. Это помогает поддерживать сайт осмысленно. Вторая — кому-то это может оказаться полезным как пример: такие заметки иногда экономят чужое время: многие упираются в те же мобильные симптомы и долго лечат не причину, а последствия. Небольшой тематический сайт тоже можно делать удобным без превращения в новостной комбайн. В-третьих, это простая фиксация решения, чтобы потом не вспоминать, почему я это трогал и что именно было не так.

Техническая пометка для себя: убрал использование table в блоге как способа раскладывать список сообщений. Таблицы остаются только для табличных данных. Список материалов переведен на семантическую разметку и адаптивный CSS, чтобы чтение с телефона в дороге не превращалось в попытку "выжать" страницу в экран.