Ритъм в оформянето на уеб страници чрез Blueprint

"„Сърфистите“ в Интернет се плъзгат по страниците, без да се задълбочават.":http://www.useit.com/alertbox/percent-text-read.html Пречките за лесно сканиране на съдържанието бързо изморяват потребителите и те просто се телепортират на друго място. Разбира се, това продължава само докато се намери наистина ценно съдържание, което да задържи вниманието, но кой ще стигне до ценното съдържание, ако консуматорът се е отказал по пътя?

Едно от най-ефективните средства за улесняване на сканирането е подчиняване на всичко на точно определен ритъм. Например ако между абзаците има разстояние 0.3em (3/10 от височината на буквите), ритъмът се нарушава – при сканиране между абзаците постоянно трябва да се прави усилие за настройване към следващия абзац. Ако разстоянието е 1em (празен ред) или 0em (без разстояние, евентуално с text-indent), няма такова усилие и погледът се движи свободно. Разстояние 2em също е в ритъма, но за конкретния пример това едва ли ще изглежда добре. Подсъзнанието обича ритъма и постоянните превключвания между различни ритми го изтощава. Затова в естрадните (поп, рок и т.н.) песни това е доминиращ елемент.

Следващата стъпка е как различни елементи да се поставят в един ритъм. Например заглавията като правило са по-големи. Затова, за да бъдат в ритъм, може да се сложи font-size: 1.5em; margin-top: 0.5em. Така общата височина е 2em и е в ритъм.

Страниците обаче не са само текст, има различни други блокове: менюта, навигация, реклами и др. Вместването на всички тези в общ хоризонтален и вертикален ритъм се нарича „решетка“ (grid).

Нагласянето на всички части на страницата в общ ритъм може да е досадна работа, особено ако не се прави от дизайнер. Бях очарован да открия "Blueprint":http://code.google.com/p/blueprintcss/ – CSS инфраструктура за ритъм. Един такт/квант е фиксиран на 18px, но една от целите на тази системка е максимална простота. Използвайки я за основа, отгоре се добавят съдържанието и украшенията. Там има и нагледни примери за казаното по-горе в тази статия.

(чрез новината "Eureka! Science News just launched!":http://drupal.org/node/261340 относно сайта "e! Science News":http://esciencenews.com/, направен на Drupal)