Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Category:

Переверстка №23. Таблица «Яндекс-денег»

Эту таблицу мы со студентами переверстывали на нескольких курсах. Она до сих пор висит по адресу https://money.yandex.ru/get и не меняется:

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


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

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


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

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

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


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

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

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

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


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

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

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

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

Правила рубрики и все выпуски
Tags: веб, верстка, знаю как, переверстка, процесс, сайт, таблица, яндекс
Subscribe

Posts from This Journal “переверстка” Tag

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments