Автор статьи: Тимченко Максим
Сколько способов дизайна страницы вы знаете? Два, перечисленные в заголовке — жёсткий и резиновый? Тогда вы забываете ещё об одном, который совмещает в себе достоинства обоих и избавляется от недостатков, присущих каждому из них.
Начнём с определений:
Жёсткий дизайн — табличный дизайн, в котором величина каждой ячейки либо задана в пикселах, либо задаётся картинкой или другим элементом, помещённой в эту ячейку.
Резиновый дизайн — табличный дизайн, в котором ширина одной или нескольких ячеек задаётся в процентах от ширины окна.
Как хорошо известно любому начитанному (или опытному) дизайнеру, жёсткий дизайн проще разрабатывать (все элементы неподвижны относительно друг друга по длине). Насыщенность графическими элементами в таком дизайне больше среднего по той же причине, и встречающиеся формы, как правило, сложнее — много кривых на всю ширину страницы и причудливо разрезанных картинок. Каркас жёсткой страницы поделен на множество ячеек, каждая со своим назначением и содержанием.
С другой стороны, у жёсткого дизайна есть только одно оптимальное разрешение экрана. Если при разработке упор был сделан на совместимость (оптимальный размер 640×480), то уже на 1024×768 поля занимают почти половину ширины страницы — и чем дальше, тем хуже.
А если при разработке акцент был сделан на «среднее» разрешение (800×600), то у пользователей маленьких мониторов появляется горизонтальная полоса прокрутки, и часть содержания им становится не видна. Некоторые разработчики ориентировались по своему монитору (1024×768), и у них даже для 800×600 (а это почти 50% всех пользователей!) страница выглядит плохо — а для 640×480 обычно нечитабельна.
То есть при жёстком дизайне — куда не кинь, всюду клин. И тогда на спасение жёсткому дизайну приходит резиновый.
Резиновый дизайн, по определению, растягивается на всю ширину страницы. Это значит, что некоторые элементы могут иметь любую длину, а единственная хорошо растягивающаяся в длину фигура — это прямоугольник. При некоторой изобретательности можно найти и другие варианты, но на 99% процентах страниц с резиновым дизайном есть горизонтальные прямоугольники в том или ином виде.
Есть и другая проблема. Броузерам (всем, но особенно Нетскейпу версии 4) очень тяжело переваривать ячейки переменной ширины. Каждому, кто писал совместимый HTML, знакомы ячейки шириной 100%, которые не занимают всю свободную площадь; ячейки фиксированной ширины, которые занимают больше, чем им положено; ячейки с заданной одинаковой шириной, но неизменно выходящие разной ширины и т.д. — перечислять фокусы каждого из броузеров можно очень долго.
Отсюда, на некоторых сайтах, многократно вложенные таблицы и сочетания табличной вёрстки с CSS-позиционированием или, на других сайтах, максимальное упрощение таблиц и почти -академический дизайн. Примерно, отливка «резиновой» страницы занимает вдвое-втрое от аналогичной «жёсткой».
Ещё одна деталь — чем сложнее дизайн и содержание, тем труднее избежать проблем со страницей. Пример такого сложного резинового дизайна — Narod.ru (см. пример справа). И вот где виден резиновый дизайн:
>
 |
 |
 |
| 640×480 | 1024×768 | 1280×1024 — меньше 50% ширины экрана |
Появляется много пустого, ничем не занятого места; в то же время, другие части страницы забиты текстом «под завязку» — отмечено на рис. 1, также по сторонам от рекламного баннера, рядом с фотографией («Решаем проблемы…»).
Когда содержание ячейки фиксированной ширины, а ячейка резиновая, образуется пустое место; при этом правая граница содержания становится «линией выравнивания», которая ничем больше не поддерживается и поэтому вызывает дискомфорт (отмечено 2).
Неизбежные при резиновом дизайне горизонтальные прямоугольники — в середине экрана успешно замаскированные под кривую (несколько участков, отмеченных 3).
Все эти проблемы проявляются значительно слабее при выраженно «текстовом» дизайне (пример: в текстовом дизайне, содержание не имеет фиксированной ширины и поэтому проблема 2 просто не возникает), и поэтому такие страницы (см. справа) выглядят хорошо при любом разрешении.
Но что делать, если есть желание сделать не спартанский текстовый дизайн, но чтобы он занимал максимум площади экрана? Жёсткий дизайн не подходит, резиновый — подходит слабо. Поэтому надо искать третий вариант — «блочный» дизайн.
1 комментарий
Резиновый намного практичнее, тем более с теперешним таким большими разрешениями мониторов