Как оформить таблицы на сайте рыбоводного хозяйства для телефона
В прайс-листе хозяйства строка «форель, навеска 300–500 г» видна на телефоне, а цена осталась за правым краем экрана. Покупатель прокручивает таблицу, название позиции исчезает — и уже трудно понять, к какой строке относится сумма. Поэтому при проверке мобильной таблицы важно не только убедиться, что её можно пролистать до конца. Нужно проверить, сохраняется ли связь между позицией, заголовком столбца и значением.
Начните с задачи, ради которой открывают таблицу
Прайс-лист, характеристики оборудования и журнал показателей читают по-разному. Покупатель сопоставляет навеску рыбы, минимальную партию и цену. Специалист сравнивает производительность оборудования, энергопотребление и требования к воде. В публикации о выращивании рыбы смотрят, как менялись показатели по датам. На узком экране прежде всего должны быть видны данные, без которых нельзя ответить на главный вопрос читателя.
Сформулируйте этот вопрос до переделки таблицы. Например: «Сколько стоит килограмм форели нужной навески и какую минимальную партию можно заказать?» Если ответ приходится собирать из девяти столбцов, пересмотрите их состав. Артикул, внутреннее примечание менеджера или название хозяйства, повторённое в каждой строке, часто не нужны в публичном прайсе. Когда разные столбцы нужны разным группам читателей, две таблицы с понятными названиями могут быть удобнее одной перегруженной.
На странице, с которой покупатель отправляет запрос, согласуйте подписи в таблице с полями формы. Если в прайсе указана «минимальная партия», а в форме — «объём заказа», должно быть понятно, как эти величины соотносятся. О том, куда направлять такие обращения, есть отдельный материал о странице контактов рыбоводного хозяйства.
Выберите способ показа по размеру и назначению данных
Короткую таблицу можно превратить в карточки
Если строк немного и каждая описывает отдельный вариант — скажем, один из трёх вариантов поставки посадочного материала, — на телефоне их удобно показывать карточками. Рядом с каждым значением оставьте подпись: «Навеска: 10–15 г», «Минимальная партия: 1000 шт.». Столбик чисел без подписей заставляет читателя гадать. На большом экране те же данные могут оставаться таблицей.
Для десятков измерений по датам карточки неудобны: значения, которые нужно сравнить, оказываются далеко друг от друга. Убирать горизонтальную прокрутку ценой такого сравнения не стоит.
Широкую таблицу оставьте прокручиваемой
Если важны порядок столбцов и сравнение значений между строками, поместите таблицу в область с горизонтальной прокруткой. Двигаться должна таблица, а не вся страница. Подсказка «Прокрутите таблицу вправо» и видимый край следующего столбца дадут понять, что данные продолжаются. Проверьте жесты на телефоне: узкая прокручиваемая область иногда мешает листать страницу вниз.
В длинной таблице можно закрепить первый столбец с названием позиции или показателя. Но если он занимает половину экрана, для чисел почти не останется места. Шапку тоже можно закрепить при вертикальной прокрутке — при условии, что она не перекрывает строки и элементы управления телефоном.
Подписи, единицы измерения и точность важнее украшений
Заголовок «Цена» оставляет вопрос: за килограмм, штуку или партию? Пишите «Цена, ₽/кг», «Партия, шт.», «Температура, °C». Длинный заголовок лучше перенести на две строки, чем сократить до непонятной аббревиатуры. Если в столбце встречаются разные единицы, укажите их при каждом значении или разделите данные.
Числа удобнее выравнивать по правому краю, названия — по левому. При сравнении показателей сохраняйте одинаковое число знаков после запятой там, где этого требует точность измерения. Но не превращайте 12,0 в 12,000 только ради ровного столбца. Отсутствующее значение обозначьте словами «Нет данных»: пустую ячейку можно пропустить, а ноль принять за результат измерения.
Цветом можно выделить отклонение, но рядом нужен текст: например, «ниже рабочего диапазона». Другой вариант — отдельный столбец со статусом. Для таблиц качества воды это особенно важно: на солнце красный и зелёный выглядят иначе, к тому же не все уверенно различают эти цвета. Указывайте дату и время замера, чтобы старые значения не принимали за текущие.
Сохраните устройство таблицы в HTML
Скриншот таблицы нельзя нормально увеличить как текст или скопировать по ячейкам; он также хуже подходит для чтения с помощью вспомогательных технологий. Если данные сравнивают по строкам и столбцам, используйте табличную разметку: краткое название, заголовки столбцов и, при необходимости, заголовки строк. Пробелы и переносы строк её не заменят. При изменении оформления на телефоне подписи должны оставаться связаны со своими значениями.
Так может выглядеть компактная таблица в публикации о закупке:
| Навеска | Минимальная партия | Единица цены |
|---|---|---|
| 10–15 г | 1000 шт. | ₽/шт. |
| 20–30 г | 500 шт. | ₽/шт. |
Сумм здесь нет: без актуального предложения они быстро устареют. Если публикуете реальные цены, добавьте дату обновления и условия, от которых зависит стоимость. Принципы связывания заголовков с ячейками описаны в справке о таблицах HTML. После публикации проверьте, что редактор сайта сохранил нужную разметку.
Проверьте таблицу на телефоне перед публикацией
Уменьшить окно браузера на компьютере недостаточно. Откройте страницу на телефоне, увеличьте текст в системных настройках и проверьте несколько действий:
- Найдите позицию в середине длинного списка. Можно ли без сомнений сопоставить её цену с единицей измерения?
- Прокрутите таблицу до крайнего правого столбца. Видны ли все данные, не обрезана ли последняя ячейка?
- Поверните телефон и верните обратно. Остались ли заголовки напротив нужных значений?
- Выделите и скопируйте строку. Сохраняется ли смысл данных без цвета и фоновых полос?
- Если строки раскрываются или таблица сортируется, проверьте порядок после действия. Удобно ли нажимать элементы пальцем?
Не скрывайте неудобные столбцы молча. Если на телефоне видна лишь часть характеристик оборудования, обозначьте это и дайте открыть полный набор прямо на странице. Для CSV-файла или документа укажите формат и дату обновления. При этом базовые параметры должны быть доступны без скачивания.
Перед публикацией прайса попросите сотрудника, который не собирал страницу, найти на телефоне цену конкретной позиции и назвать её вместе с единицей измерения и минимальной партией. Если что-то приходится угадывать, поправьте подписи или расположение столбцов.