Разделы  

  Исследования
Персоны
Пресс-релизы
Разное
Словарь
Ссылки
Статьи
Файлы
Форумы
Фоторепортажи

3D Графика
Adobe Photoshop
Brand marketing в интернете
CSS
Customers Relations Management
DHTML
Direct Marketing
E-commerce
Email-маркетинг
Flash
HTML
IT и авторское право
JavaScript
PHP
PR в интернете
Rapid development tools
Usability в интернет
XML
Агентирование продаж
Администрирование
Баннерные сети
Баннеры
Безопасность
Безопасность PHP
Брендинг
Верстка
Выбираем исполнителя
Графические пакеты
Графические форматы
Дизайн
Документооборот
Должностные инструкции
Заметки маркетолога
Звук в интернете
Интернет и классические медиа
Интернет как инструмент маркетинга
Интранет
Исследования
Исследования и интернет
Исследования регионального интернета
Компьютерные игры
Креатив
Листы рассылки
Маркетологу
Медиабайнг в интернете
Медиапланирование
Менеджеру
Менеджмент студии
Мультимедия технологии
Наружная реклама
Обзоры IT рынка
Оборудуем рабочее место
Оптимизация программирования для web
Основы интернета
Персонал
Платежные системы
Поисковые машины и каталоги
Правила русского языка
Прикладное ПО
Программирование
Программирование, основы
Проектирование сервера
Психология в маркетинге
Работаем над текстом на сервере
Разное
Разработчику
Региональный интернет
Реклама
Реклама в интернете
Сетевые протоколы
Создаем контент-проект
Сопровождение и поддержка
Статистика
Структурное программирование на PHP
Технические вопросы
Управление проектами
Участие в организациях
Хостинг
Шрифты

Все авторы


Наиболее подробные разделы
1Adobe Photoshop76
2Direct Marketing68
3Управление проектами33
4Исследования и интернет32
5Проектирование сервера31
6HTML27
7Графические пакеты25
8Заметки маркетолога23
9Дизайн23
10JavaScript23
Наиболее подробные разделы
1Adobe Photoshop76
2Direct Marketing68
3Управление проектами33
4Исследования и интернет32
5Проектирование сервера31
6HTML27
7Графические пакеты25
8Заметки маркетолога23
9Дизайн23
10JavaScript23
Наиболее обсуждаемые статьи
1Концепция создания контент-проекта.17
2Тонкая голубая линия10
3Предложения10
4Как разрабатывался слоган8
5Заголовок страницы7
6Animatek World Builder 2.0 (или AWB 2.0)6
7Немного о хостах6
8Зачем необходим сайт?6
9Правильные таблицы стилей5
10Снежинки на вашей странице4

 
 
Поиск по сайту:

Подписка на анонсы
Новости выходят раз в неделю по понедельникам.
Введите Ваш email

Режим



А в это время в других разделах: Last 10 person
Ящук Вера
Шанаев Григорий
Шуленин Михаил
Шиденко Кирилл
Шабшин Илья
Сорокина Елена
Семеновская Светлана
Сидорова Ирина
Серов Владимир
Слепнев Сергей

Last 10 topic
Явный отказ
Эффективность услуги
Эксперт по аттестации лаборатории
Цепочка поставки
Устранение несоответствия
Услуга
Усиленный контроль
Усеченный контроль
Уровень качества
Управление качеством

Полезная мудрость:










Создание сервера:



 

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

 
Тимченко Максим

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

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

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

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

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

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

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

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

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

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

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

640х4801024x768
1280x1024 - меньше 50% ширины экрана

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

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



Тимченко Максим

2001-07-26 20:36:18


А может обсудим статью в форуме? Там собралась отличная компания
 




© 2001 авторский проект Алексея Волкова :: О проекте :: Перепечатка материалов приветствуется при ссылке на www.marketer.ru