Таблица на телефоне: как показать цены и характеристики без мелкого текста

Что человек должен понять из таблицы на телефоне?

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

Сначала определяют смысл сравнения. От него зависит способ показа.

Какие сведения нельзя разлучать

Название тарифа связывает цену, состав и ограничения одного предложения. Заголовок объясняет значение числа. Без него посетитель не поймёт, считает ли компания обращения, часы или филиалы. Список вопросов покупателя — сколько стоит пакет, что включено, за что доплачивают и как оставить заявку — даст основание принять макет, даже если мобильная версия внешне сильно отличается от настольной и показывает условия в другом порядке.

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

Почему ширина экрана не требует уменьшать шрифт

В пояснении W3C к критерию Reflow для обычного вертикально читаемого содержимого указан ориентир 320 CSS-пикселей по ширине. Это единицы отображения страницы. Для таблиц данных, которым нужна двухмерная структура, действует исключение: они могут требовать прокрутки, однако окружающий текст должен нормально перестраиваться, чтобы читатель не двигал всю страницу в стороны ради каждой строки пояснения. CSS-пиксели не равны числу точек дисплея. Приёмку проводят по размеру окна отображения. Даже в прокручиваемой таблице текст отдельной ячейки остаётся читаемым без движения в двух направлениях.

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

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

Когда сохранить таблицу, а когда показать карточки?

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

Как посетитель обнаружит скрытое продолжение

В справочнике MDN для свойства overflow-x значение auto позволяет прокрутить выходящее за границы содержимое; полоса прокрутки зависит от наличия переполнения и поведения браузера. Справа есть доступное продолжение. Маркетолог проходит к нему жестом или другим доступным управлением. Один снимок экрана не подтвердит работу.

Подсказка «Прокрутите таблицу вправо» помогает объяснить действие, но её стоит оценить вместе с самим блоком. На широком экране, где видны все колонки, постоянная подсказка выглядит лишней. На узком важно, чтобы человек замечал продолжение ещё до начала сравнения. Подрядчик может предложить видимый край соседней колонки или другой понятный признак; маркетолог проверяет, работает ли он на реальном содержимом страницы. Эффект должен объяснять действие, не закрывая цену.

Закрепление названия строки иногда облегчает чтение при прокрутке, однако широкая закреплённая колонка способна занять почти весь телефон, оставив для цены и условий лишь узкую область, где значения приходится читать по частям. Решение оценивают на самом длинном названии услуги в прайс-листе. Сокращение названия согласуют по смыслу. Для части таблиц свободная прокрутка будет удобнее закрепления.

Когда последовательное чтение удобнее сравнения

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

Карточки удлиняют страницу. Чем больше параметров, тем длиннее путь до следующего тарифа.

Если важные различия спрятаны внизу каждой карточки, человеку придётся удерживать их в памяти. Помочь может одинаковый порядок параметров и выделение существенного различия обычным текстом, например «Выезд оплачивается отдельно». Формулировка должна соответствовать фактическим условиям пакета. Менять порядок полей по принципу «что выгоднее показать первым» в каждой карточке рискованно: сравнение одинаковых услуг станет менее очевидным. Сначала согласуют единый порядок, затем расставляют акценты.

Перестроение не должно создавать второй независимый прайс-лист. Если редактор изменил цену в таблице, карточка того же пакета должна получить актуальное значение через предусмотренный способ обновления данных. В задании достаточно потребовать единый источник условий и показать редактору процедуру изменения. Технический способ выберет разработчик. Приёмка включает обновление одной цены и проверку обеих версий страницы, чтобы после сдачи маркетолог не поддерживал совпадение вручную.

Можно ли скрыть колонки без потери условий?

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

Как проверить решение на конкретном содержимом

Ниже — условный макет сравнения пакетов сопровождения. Он показывает связь цены со способом её расчёта и составом работ; суммы и условия служат примером задания, а предложение компании согласуют отдельно.

В этом макете колонка о выезде объясняет разницу в суммах, поэтому её удаление оставит покупателю цену без основания выбрать пакет; сведения сохраняют в сетке либо повторяют с подписями в карточке, где каждый тариф читается отдельно. Порядок полей остаётся одинаковым. Для индивидуального пакета условие оценки сохраняется текстом. Ноль или прочерк изменили бы смысл цены.

Пустое значение тоже требует решения. Прочерк без пояснения не различает отсутствие услуги и отсутствие данных.

Что оставить в дополнительном раскрытии

В раскрываемый блок можно вынести подробное описание одинаковых работ, если оно не мешает понять различие пакетов. Например, таблица кратко называет консультации, а раскрытие объясняет допустимые темы и способ обращения. Ссылка «Подробные условия» должна быть видна и говорить, что откроется. Если дополнительные сведения меняют итоговую стоимость или право на услугу, их лучше показать в основном представлении, потому что такой покупатель принимает решение именно по этим ограничениям. Краткость страницы не оправдывает потерю основания выбора.

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

Длинные названия, диапазоны цен и пояснения обычно обнаруживают проблемы лучше коротких тестовых слов. Для проверки берут реальные трудные значения: многострочное название тарифа, составную единицу измерения, условие с несколькими услугами. Подпись таблицы тоже должна оставаться понятной. В описании caption в MDN она обозначает содержание таблицы и помогает быстро определить его тему. На сайте услуг это может быть «Сравнение пакетов сопровождения» с указанием периода цены.

Что спросить подрядчика до согласования макета?

Обсуждение начинается с действия посетителя: сравнить цены нескольких пакетов, найти услугу в прайс-листе или прочитать один тариф целиком. Маркетолог передаёт реальные значения и называет сведения, которые остаются доступными при любом способе показа. Так подрядчик выбирает между прокруткой, карточками и кратким видом с подробностями. Обещание «таблица будет адаптивной» не определяет результат, поскольку каждый вариант выглядит аккуратно на макете, но заставляет читателя по-разному искать цену, сопоставлять состав услуг и возвращаться к уже просмотренным условиям.

Что внести в задание

Опишите исходные строки и колонки, смысл прочерков, единицы измерения и условия расчёта цены. Затем укажите основной вопрос покупателя и допустимый путь к дополнительным сведениям. Для карточек зафиксируйте одинаковый порядок параметров, для прокрутки — доступ к крайним колонкам и понятные подписи. Если нужен переключатель вариантов, заранее определите, что читатель сравнивает после переключения. Эти требования связывают внешний вид с содержанием и делают обсуждение конкретным.

Здесь посетитель различает включённый и дополнительный выезд. По этому вопросу принимают макет.

Запросите рабочий прототип с содержимым. В нём видно движение таблицы, раскрытие условий и переход по кнопке заявки; на снимке эти действия могут быть нарисованы, но ещё не работать. Я согласовал бы способ показа после выбора пакета на прототипе, потому что изменение структуры в этот момент обходится проще, чем переделка уже наполненной страницы. Задание выполняет человек, которому не объясняли, где искать скрытую колонку.

Как принять результат и обновление прайс-листа

Приёмка включает узкое окно, увеличение текста и длинные значения. Ориентир 320 CSS-пикселей из критерия Reflow помогает оценить перестроение окружающей страницы. Увеличение текста до 200% смотрят отдельно. В таблице с прокруткой читатель проходит до последней колонки и возвращается к исходной, сохраняя понимание строки, а в карточках сопоставляет одинаковый параметр соседних пакетов, чтобы найти подходящие условия без объяснения разработчика. Оба задания связаны с выбором клиента.

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

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

Перед утверждением спросите: «На каком примере вы покажете, что покупатель с телефона сравнит цену и состав пакетов, откроет все важные условия и найдёт их после обновления прайс-листа?» Ответ с рабочим прототипом и описанием приёмки поможет выбрать решение. У маркетолога останется понятный способ показать предложения и поддерживать их актуальность.