Дизайн сайта включает не только выбор фирменных цветов и отрисовку красивых иконок, стилевое единство состоит из множества компонентов и тут важно внимание к деталям. Как правило, разработчики, которые сдают сайт без контента, создают отдельную страничку, куда для демонстрации стилей размещают основные элементы: заголовки, списки, таблицы. Так заказчик может посмотреть, как все это в дальнейшем будет выглядеть на сайте. В этой статье мы хотели бы более подробно поговорить о таблицах.
Недавно нам попалась статья Мэтью Стрёма о дизайне таблиц данных. В ней он рассуждает о том, как правильно оформлять таблицы для представления информации в интернете. Некоторые советы, на наш взгляд, обязательны к применению.
Пару слов об истории. На заре развития интернет-технологий таблицы были везде, даже верстка сайтов была табличной.Таблицы всегда считались самым простым, удобным и наглядным способом представления данных. Откройте учебники или пособия, и вы наверняка обнаружите там множество таблиц. Но с книгами проще, вы всегда видите перед собой страницу целиком, а вот интернет-страницы часто приходится перематывать, это усложняет работу с таблицами.
Свое слово в отказе от таблиц сказали и дизайнеры. Они хором заявляли, что таблицы слишком сложные и громоздкие, поэтому часто их легко можно заменить другими способами разметки или инфографикой.
Тем не менее, таблицы по-прежнему существуют и далеко не всегда для них можно найти достойную альтернативу. А поскольку от таблиц нам все равно не избавиться (да это и не нужно), давайте научимся их правильно оформлять.
Выравнивание простого текста или данных в таблице сразу бросается в глаза. Часто рядовой пользователь ставит выравнивание по своему вкусу: кто-то всегда и все выравнивает по центру, кто-то - по левому краю, а кто-то просто по ширине. Между тем существуют четкие правила “хорошего тона”, выработанные на основе наилучшего восприятия информации:
Дело в том, что человеческий взгляд во время чтения скользит по данным сначала по горизонтали, потом по вертикали, переходя на новую строку. Числа читаются справа налево, поэтому числовые данные нужно выравнивать по правому краю. Слова же, наоборот, читаются слева направо, поэтому их нужно выравнивать по левому краю. Чтобы сохранить чистоту вертикальных линий, заголовки выравнивают так же, как и информацию под ними, иначе вертикаль будет нарушена, а просматривать таблицу станет сложнее.
Чем больше таблица, тем сложнее ее воспринимать, поэтому вы должны убрать из нее всю лишнюю информацию. В частности, если вы хотите добавить комментарий или пояснение - поставьте сноску. Единицы измерения укажите только один раз в шапке таблицы, а не повторяйте каждый раз, это общеизвестное правило. Если в таблице несколько подзаголовков, пишите их короткими, не больше одной строки.
Таблица - это вполне самостоятельный элемент, который должен иметь название, причем короткое, но емкое. Пользователь не должен догадываться по контексту, какие данные вы хотите ему предоставить, это должно быть понятно из названия. Кроме того, таблица легко может быть вырвана из контекста. На нее могут ссылаться из других источников, да и вы сами еще не раз можете к ней вернуться и использовать в других материалах или презентациях. Хорошее название таблицы избавит вас от необходимости писать дополнительные пояснения.
Печатники делали границы таблиц тонкими, чтобы экономить чернила. В интернете чернил, конечно, нет, но и необходимости в толстых линиях тоже. Если вы правильно структурировали и выровняли данные в таблице, то можно обойтись и без дополнительных разделителей, информация будет легко восприниматься. Кроме того, избавление от линий позволит сократить расстояние между элементами в таблице и сделает ее более компактной.
Не увлекайтесь раскрашиванием ячеек таблицы в разные цвета, использование фона оправдано только тогда, когда необходимо показать разницу в областях, например, отделить единичные значения от суммарных. Не используйте большую цветовую палитру. Таблицы должны быть монохромными, иначе у пользователей могут возникнуть резонные вопросы: “Что обозначает это разделение и стоит ли обращать на него внимание?” Кроме того, если вашу таблицу решат распечатать в ЧБ, вся ваша цветосемантика пропадет.
Многие люди не любят таблицы и считают их скучными, тем не менее, вам вряд ли удастся полностью избежать употребления таблиц на вашем сайте, поэтому достойно оформите их. Для дизайнера это будет разовая работа. Стили для таблиц прописываются на глобальном уровне сайта, поэтому в дальнейшем при правильном заполнении контента будут применяться для всех таблиц на сайте. Понятные и хорошо оформленные таблицы смогут облегчить пользователям восприятие информации и работу с большими массивами данных, а удовлетворение потребностей пользователей является главной задачей любого ресурса.
Хотите поговорить о PHP за под пиво пятничным вечером? Заметьте, это просто посиделки, а конференция, на которой мы, будем выступать. Не полным составом, конечно, а силами двух спикеров.
В предыдущей статье мы уже начали рассказывать вам о новой версии «1С-Битрикс: Управление сайтом», которую представили на презентации 30 мая. Мы успели выделить только некоторые “фишки” и особенности новой редакции, да и то рассказали о них в общих чертах. Теперь хотелось бы остановиться на некоторых блоках более подробно, в частности, поговорить о Сайтах24.
Весна для компании 1С-Битрикс оказалась очень плодотворной. Всего пару месяцев назад мы всей командой слушали и обсуждали презентацию Битрикс24.Гонконг, а вчера появился ещё более весомый повод для дискуссий: релиз новой сборки версии «1С-Битрикс: Управление сайтом» 18.0.
