Резиновый или фиксированный? Опции

[teletehnika]

Перед любым web-дизайнером, не важно начинающий он или уже опытный, встаёт вопрос: а какой выбрать для создания сайта, резиновый или фиксированный?

Для того, чтобы ответить на вопрос какой из них лучше давайте дадим им определение, что означает тот и другой дизайн.
Резиновый – табличный дизайн в котором ширина столбца, рисунка задана в процентах.
Фиксированный – табличный дизайн в котором ширина столбца или рисунка, оговорены точно, заданы в пикселях.

Разберём недостатки и преимущества обоих видов дизайна.

Фиксированный дизайн:
Преимущества:
- Такой дизайн гораздо легче разрабатывать, можно заранее предугадать, как будет выглядеть сайт.
- У дизайнера есть возможность следить за размером строки.
Недостатки:
- На различных расширениях может появиться вертикальный скроллинг, у сайта существует только одно оптимальное разрешение экрана.

Резиновый дизайн:
Преимущества:
- Сайт будет заполнять всё пространство браузера, что значительно улучшает его вид.
- Сайт с таким дизайном будет одинаково смотреться на разных расширениях.
Недостатки:
- Разработка такого дизайна сплошной эксперимент, не знаешь, как поведёт себя вся структура сайта в тот или иной момент.
- На больших расширениях возможно появление слишком длинных строк, что значительно утруждает читателя.
В общем у каждого вида дизайна, есть свои минусы и плюсы какой выбрать решать вам. Я же могу посоветовать вам использовать смешанный дизайн, некоторые столбцы табличного дизайна задать в процентах а другие в пикселях.
Также не стоит забывать, что в нынешнее время HTML используется не только для создания сайтов, но и для создания различных электронных книг, введения рассылок. И снова встает вопрос о типе дизайна… Решать вам, но более 90 % людей ведущих рассылку и пишущих книги, используют фиксированный дизайн. А это согласитесь большая цифра. Да и книга и рассылка как правило, должны напоминать страницу, э эффект страницы легче добиться фиксированным дизайном. Ваше мнение насчёт фиксированного и резинового дизайна можете изложить здесь в комментариях.

И так, мы разобрали преимущества и недостатки обоих типов верстания веб страниц. Каждый вправе выбрать для себя своё но я наблюдал страницы сверстанные резиновым дизайном на мониторах с разрешением 1600 рх, картина была удручающая. Все элементы сайта расползались, текст становился не читабельным, графика перемешана с текстом. На такой сайт было страшно смотреть.
Многие пользователи используют современные мониторы с разрешением по горизонтали 1600рх а в свойствах выставлено разрешение не более 1280рх.
Давайте применим одну хитрость с резиновым дизайном и зафиксируем его в пределах 1152рх, это стандартный размер мониторов.
Как следует поступить? К примеру, во многих темах оформления для задания ширины страницы, в таблицах стилей служит такой код:

КОД

#wrapper {
    margin: 0 auto;
    background: #FFF;
    width: 944px;
    text-align: left;
    clear: both;
}

Как видно, это фтксированный размер страницы и составляет 944рх
Если саменить width: 944рх; на width: 100%; то дизайн будет растягиваться на всю ширину экрана монитора при любых разрешениях последнего.
Но как выше сказано, нам следует зафиксировать ширину в пределах 1152рх. Для этого выше указанный код заменяем на:

КОД

#wrapper {
    margin: 0 auto;
    background: #FFF;
            max-width:1152px;
    width: 100%;
            width: expression (document.body.clientWidth > 1152? ‘1152px’: ‘100%’);
    text-align: left;
    clear: both;
}

И о ля-ля! Ваш сайт растягивается (имеет резиновый дизайн) до размеров в 1152рх а затем становится фиксированным. Выглядит такой сайт более пристойно чем при размере в 100%, поверте.

И немного для самых начинающих.
Не всё так просто как кажется на первый взгляд. Если в "Шапке сайта" используются простые фоновые элементы то растянуть не представляет сложности. Но когда применяется разработанная картинка с фиксированными размерами то при резиновом дизайне она не будет растягиваться и вы увидите по краям цвет фонового заполнения. Есть несколько способов избежать такого неприятного момента но это уже другая тема, а я откланиваюсь, пока.
Удачи в дизайне и вёрстке страниц.

[obilion]

Ненавижу резиновые дизы. Это тупой прикол.

[teletehnika]

А кто же их любит из дизайнеров и верстальщиков? Мне тоже не нравятся но что сделаеш если клиенту нужен именно резиновый? Приходится изгаляться.

[Apostal]

если чесно внешний вид Stretch-оформления мне более близок нежели Fixed'a, спасибо большое за данный код вы мне очень помогли потому как хотелось что бы на экранах 1024x* дизайн смотрелся как резиновый , а вот уже на бюолее широких форматах только фиксированный еще раз благодарю за данную возможность

[teletehnika]

Ну хоть одному человеку пригодилось, уже радует. Да, забыл добавить, размеры то можно задавать и свои, произвольные. Я стал его применять и уже несколько проектов работают именно с такими параметрами.

[shim]

#wrapper {
margin: 0 auto;
background: transparent url(images/bgpage2.png) repeat-x;

max-width:1152px;
width: 100%;

width: expression(document.body.clientWidth < 1152? "996px" : document.body.clientWidth > 1202? "1152px" : "auto");
text-align: left;
clear: both;
}

Для IE