?

Log in

No account? Create an account

nobelfaik


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

light gray is the new white, dark gray is the new black


Previous Entry Поделиться Next Entry
Список и ширина колонки
nobelfaik
У каждого списка есть своя оптимальная ширина колонки, а точнее, оптимальный диапазон ширины — такой, в котором ему комфортно. (Под списком я подразумеваю любые мелкие порции — кусочки текста, сопоставимые по структуре и объему.)

Возьмем пример с короткими элементами. Если пунктов немного, то проблемы нет:


Чем длиннее список, тем больше разрастается дыра справа. Верстка перестает быть модульной (и компактной):


Логичное решение — разбить на колонки. Вопрос в том, сколько колонок сделать. При трех еще дыряво, зато есть запас прочности на случай, если вдруг появится Константинопольский К. К. Хороший вариант для веба, где всё немного плавает:


Если Константинопольского К. К. не предвидится, можно уместить и в четыре. Хорошее решение для печати, где всё железно:


В пяти колонках останутся обрезки, да и средник слишком узкий:


Другой пример. Правый край получился рваным из-за того, что строки сильно отличаются по длине:


Разбиваем на два столбца. Так аккуратнее:


Иногда бывают варианты. Этому списку удобно и в одной, и в двух колонках:



В трех тоже выглядит неплохо, но читается хуже, слишком частый ритм:


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

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

  • Как я делал афишу «Большой переверстки»

    «Большая переверстка» — это мастер-класс, который я придумал два года назад и провел в нескольких городах. Афиша делалась долго, но…

  • Грациозная деградация текста

    Чтобы набрать подпись или сноску, недостаточно просто уменьшить размер основного шрифта. Ради удобства чтения нужно сделать еще несколько шагов. В…

  • Колоночность и этажность

    Собираете вы, например, макет, а он у вас никак не собирается. Элементы друг к другу не клеятся, кругом дыры: Фото: getolympus / flickr Для…