Отправляет email-рассылки с помощью сервиса Sendsay

Заметки Дизайнера

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2000   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

56.649 подписчиков
-141 за неделю
←   Все выпуски   →

Заметки Дизайнера


Служба Рассылок Subscribe.Ru проекта Citycat.Ru

заметки дизайнера

http://come.to/zametki                [10/10/2000] Выпуск 12

Жёсткий, резиновый и...

часть 1


Сколько способов дизайна страницы вы знаете? Два, перечисленные в заголовке - жёсткий и резиновый? Тогда вы забываете ещё об одном, который совмещает в себе достоинства обоих и избавляется от недостатков, присущих каждому из них.

Перед тем, как вы начнёте читать. К этой заметке подобрано несколько примеров (около 10 изображений, каждое с "ноготком" и полноэкранным снимком экрана), но для правильного авто-перевода для читателей текстового выпуска, минимального обьёма и простоты кода они сюда не включены. Поэтому всем, кто может прочитать эту заметку в Интернете с сайта "Заметок", я настоятельно рекомендую сделать это.
Читать здесь: http://redrival.com/maxvt/r/articles/006.html

Начнём с определений:

  • Жёсткий дизайн - табличный дизайн, в котором величина каждой ячейки либо задана в пикселах, либо задаётся картинкой или другим элементом, помещённой в эту ячейку.
     
  • Резиновый дизайн - табличный дизайн, в котором ширина одной или нескольких ячеек задаётся в процентах от ширины окна.

Как хорошо известно любому начитанному (или опытному) дизайнеру, жёсткий дизайн проще разрабатывать (все элементы неподвижны относительно друг друга по длине). Насыщенность графическими элементами в таком дизайне больше среднего по той же причине, и встречающиеся формы, как правило, сложнее - много кривых на всю ширину страницы и причудливо разрезанных картинок. Каркас жёсткой страницы поделен на множество ячеек, каждая со своим назначением и содержанием.

С другой стороны, у жёсткого дизайна есть только одно оптимальное разрешение экрана. Если при разработке упор был сделан на совместимость (оптимальный размер 640х480), то уже на 1024х768 поля занимают почти половину ширины страницы - и чем дальше, тем хуже. (cм. примеры справа)

А если при разработке акцент был сделан на "среднее" разрешение (800х600), то у пользователей маленьких мониторов появляется горизонтальная полоса прокрутки, и часть содержания им становится не видна. Некоторые разработчики ориентировались по своему монитору (1024х768), и у них даже для 800х600 (а это почти 50% всех пользователей!) страница выглядит плохо - а для 640х480 обычно нечитабельна.

То есть при жёстком дизайне - куда не кинь, всюду клин. И тогда на спасение жёсткому дизайну приходит резиновый.

Резиновый дизайн, по определению, растягивается на всю ширину страницы. Это значит, что некоторые элементы могут иметь любую длину, а единственная хорошо растягивающаяся в длину фигура - это прямоугольник. При некоторой изобретательности можно найти и другие варианты, но на 99% процентах страниц с резиновым дизайном есть горизонтальные прямоугольники в том или ином виде.

Есть и другая проблема. Броузерам (всем, но особенно Нетскейпу версии 4) очень тяжело переваривать ячейки переменной ширины. Каждому, кто писал совместимый HTML, знакомы ячейки шириной 100%, которые не занимают всю свободную площадь; ячейки фиксированной ширины, которые занимают больше, чем им положено; ячейки с заданной одинаковой шириной, но неизменно выходящие разной ширины и т.д. - перечислять фокусы каждого из броузеров можно очень долго.

Отсюда, на некоторых сайтах, многократно вложенные таблицы и сочетания табличной вёрстки с CSS-позиционированием или, на других сайтах, максимальное упрощение таблиц и почти-академический дизайн. Примерно, отливка "резиновой" страницы занимает вдвое-втрое от аналогичной "жёсткой".

Ещё одна деталь - чем сложнее дизайн и содержание, тем труднее избежать проблем со страницей. Пример такого сложного резинового дизайна - Narod.ru (см. пример справа). И вот где виден резиновый дизайн:

  1. Появляется много пустого, ничем не занятого места; в то же время, другие части страницы забиты текстом "под завязку" - отмечено 1 на рисунке, также по сторонам от рекламного баннера, рядом с фотографией ("Решаем проблемы...").
  2. Когда содержание ячейки фиксированной ширины, а ячейка резиновая, образуется пустое место; при этом правая граница содержания становится "линией выравнивания", которая ничем больше не поддерживается и поэтому вызывает дискомфорт (отмечено 2).
  3. Неизбежные при резиновом дизайне горизонтальные прямоугольники - в середине экрана успешно замаскированные под кривую (несколько участков, отмеченных 3).

Все эти проблемы проявляются значительно слабее при выраженно "текстовом" дизайне (пример: в текстовом дизайне, содержание не имеет фиксированной ширины и поэтому проблема 2 просто не возникает), и поэтому такие страницы (см. справа) выглядят хорошо при любом разрешении.

Но что делать, если есть желание сделать не спартанский текстовый дизайн, но чтобы он занимал максимум площади экрана? Жёсткий дизайн не подходит, резиновый - подходит слабо. Поэтому надо искать третий вариант - "блочный" дизайн.

Продолжение следует...

Выскажите свое мнение
Добавьте комментарий

 

Как вам эта статья? Стиль изложения, содержание?
Вы с чем-то не согласны? Напишите мне. Наиболее интересные письма
будут опубликованы в рассылке.

Внимание! Любое письмо, пришедшее мне, может быть опубликовано (вместе с e-mail адресом
автора) . Если вы не хотите публикации вашего письма, пометьте его как личное,
например добавив [private] в заголовок письма.

C нетерпением жду комментариев. Ваш MaxVT.

 

http://subscribe.ru/
E-mail: ask@subscribe.ru
В избранное