nobelfaik


Блог Игоря Штанга

Доктор, мой макет не дышит!


Previous Entry Поделиться Next Entry
Переверстка №23. Таблица «Яндекс-денег»
nobelfaik
Эту таблицу мы со студентами переверстывали на нескольких курсах. Она до сих пор висит по адресу https://money.yandex.ru/get и не меняется:

Таблица «Яндекс-денег»


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

Я не буду публиковать пошаговый рассказ, изменений не так уж много:


  1. Колонки стали похожи на колонки, вертикальное движение не прерывается.

  2. Общая информация стоит сверху и накрывает те способы, к которым относится (заголовок-шапка).

  3. Юрлица отделены расстоянием и плашкой.


Таблица «Яндекс-денег»

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

Еще эту таблицу можно перевернуть. Такой вариант пригодится, когда способов станет больше (или меньше) и они не поместятся по ширине. Этажам хорошо бы добавить ховер:

Таблица «Яндекс-денег»


Я переделал только конструкцию и немного поправил верстку. Что еще можно улучшить?

Другие переверстки про таблицы:
Тарифы «Контур-Бухгалтерии»
Таблица «Предел огнестойкости строительных конструкций»

Как попасть в «Переверстку»

Отправьте письмо с макетом, комментарием или вопросом к нему на эл. адрес conversive@mail.ru. В теме письма укажите «Переверстка». Будьте конкретны. По возможности прикрепите исходники.

Правила рубрики и все выпуски

Записи из этого журнала по тегу «переверстка»


?

Log in

No account? Create an account