Переверстка №23. Таблица «Яндекс-денег»
Эту таблицу мы со студентами переверстывали на нескольких курсах. Она до сих пор висит по адресу https://money.yandex.ru/get и не меняется:
Случай интересный: здесь неудачная верстка не просто портит внешний вид, но и сбивает с толку. С первого взгляда вообще непонятно, как всё устроено. На самом деле структура простая: это четыре способа приема платежей, скомпонованные в четыре колонки. Каждая из колонок начинается иконкой и заканчивается кнопкой. Проблема в том, что текст, общий для первых трех способов, разверстан в ширину и объединен серыми плашками. Из-за плашек возникают сильные горизонтальные связи, и колоночная конструкция рассыпается. Побочный эффект: плашки напоминают кнопки.
Я не буду публиковать пошаговый рассказ, изменений не так уж много:
За бортом остался вопрос о кнопке «Касса для бизнеса», в правом верхнем углу. Непонятно, какое место она должна занимать в структуре, поэтому я и не знаю, как с ней быть. Первое, что приходит в голову, — объединить в группу «Для юрлиц».
Еще эту таблицу можно перевернуть. Такой вариант пригодится, когда способов станет больше (или меньше) и они не поместятся по ширине. Этажам хорошо бы добавить ховер:
Я переделал только конструкцию и немного поправил верстку. Что еще можно улучшить?
Другие переверстки про таблицы:
Тарифы «Контур-Бухгалтерии»
Таблица «Предел огнестойкости строительных конструкций»
Подробнее о работе с таблицами читайте в большом онлайн-курсе «Таблицы и прочие радости»
Случай интересный: здесь неудачная верстка не просто портит внешний вид, но и сбивает с толку. С первого взгляда вообще непонятно, как всё устроено. На самом деле структура простая: это четыре способа приема платежей, скомпонованные в четыре колонки. Каждая из колонок начинается иконкой и заканчивается кнопкой. Проблема в том, что текст, общий для первых трех способов, разверстан в ширину и объединен серыми плашками. Из-за плашек возникают сильные горизонтальные связи, и колоночная конструкция рассыпается. Побочный эффект: плашки напоминают кнопки.
Я не буду публиковать пошаговый рассказ, изменений не так уж много:
- Колонки стали похожи на колонки, вертикальное движение не прерывается.
- Общая информация стоит сверху и накрывает те способы, к которым относится (заголовок-шапка).
- Юрлица отделены расстоянием и плашкой.
За бортом остался вопрос о кнопке «Касса для бизнеса», в правом верхнем углу. Непонятно, какое место она должна занимать в структуре, поэтому я и не знаю, как с ней быть. Первое, что приходит в голову, — объединить в группу «Для юрлиц».
Еще эту таблицу можно перевернуть. Такой вариант пригодится, когда способов станет больше (или меньше) и они не поместятся по ширине. Этажам хорошо бы добавить ховер:
Я переделал только конструкцию и немного поправил верстку. Что еще можно улучшить?
Другие переверстки про таблицы:
Тарифы «Контур-Бухгалтерии»
Таблица «Предел огнестойкости строительных конструкций»
Подробнее о работе с таблицами читайте в большом онлайн-курсе «Таблицы и прочие радости»