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

Переверстка №13. Список стран на сайте tranio.ru

Алина пишет: Есть список стран, который нужно переверстать в три колонки. Страны расположены по алфавиту, но! Как видишь, читать их надо не столбиками сверху вниз, а строчками слева направо. То есть Австрия стоит не под Австралией, а в соседнем столбике. Мне кажется, это неправильно. Разрыв между столбиками очень большой, и никому не придет в голову прыгать взглядом туда-сюда. Все будут читать естественным образом: сначала первый столбик сверху вниз, потом второй. Но коллеги утверждают, что есть некое правило, по которому большие списки нужно верстать именно так. Что ты думаешь по этому поводу?

Можно сразу избавиться от ссылок на новости и обзоры, они уже неактуальны.






Алина, вы правы. Вертикальные отступы на примере заметно меньше горизонтальных, поэтому список будут читать столбиками, а не строчками. Ваших коллег, вероятно, смущает то, что второй столбик начнется, например, с буквы «Н» и видимая связь между колонками исчезнет. В печати такой проблемы нет, потому что страница целиком перед глазами:




Уберем всё лишнее и начнем сначала. Самый удобный для поиска вывод — линейный. Взгляд движется сверху вниз и никуда не перескакивает:


Группировка поможет сориентироваться быстрее:


Дыра справа не всегда будет желанной. Разбиваем длинную колонку на четыре коротких (пост про список и ширину колонки). Отличие от исходного варианта в том, что теперь всё помещается на один экран (примерно):


Еще я сократил длинные названия, чтобы они не торчали:
Доминиканская Республика (Доминикана) → Доминикана
ОАЭ (Объединенные Арабские Эмираты) → ОАЭ
Республика Македония → Македония
Сен-Бартелеми (Сен-Барт) → Сен-Бартелеми


Грех не воспользоваться интерфейсными приемами. Например, быстрым поиском:


Или фильтром:


Выберу шрифт покомпактней, увеличу кегль и переверстаю в три колонки, как и просили:


Было и стало:




Буду рад предложениям читателей и примерам хороших списков в вебе. Прикрепляйте к комментариям.

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

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

  • Переверстка №31. Подписка на Cover Commander

    Nail пишет: Посмотрел ваше видео про стирание линеек, полез на ваш сайт и заинтересовался рубрикой «Переверстка». Специального…

  • Мастер-класс по стиранию линеек

    Переверстываю пять макетов в режиме реального времени. 0:01:18 — Вступление 0:03:40 — Таблица «Допустимое рабочее…

  • Переверстка страницы FAQ

    Дизайнер Дженсон Камби рассказал о переделке сайта The New Yorker Festival и в частности о том, как поменялась страница FAQ. Было и стало:…

  • 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.
  • 6 comments