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

[vavan1955]

Перед любым 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%, поверте.

И немного для самых начинающих.

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

Масштабируемый логотип (Шапка сайта)

Последнее время всё часто встречаются случаи когда при изготовлении сайта применяется своя широкая картинка для верха сайт (шапка сайта). Вот здесь то и сталкиваются сайтостроители (дизайнеры) с неприятностью, картинку можно применить только к сайту с фиксированным дизайном. Как я уже неоднократно указывал, в пользовании очень много старых мониторов 17', имеющих разрешение по горизонтали 1024px а то и того меньше, таких осталось единицы. Современные мониторы позволяют просматривать html страницы вплоть до 1600px по горизонтали. Представте как будет смотреться картинка в шапке сайта если она сделана размером примерно 960px а размер сайта выбран не фиксированным, в 960px а установлено значение в 100%. Сайт растянется на всю ширину монитора а картинка так и останется в 960px по середине, если дизайнер задал ей положение по центру или прижата к левому краю страницы. Зрелище не из приятных.

Выход есть!!! Для воплощение описываемого метода, а он очень прост, следует нарисовать шапку размером по ширине в пределах 1200px-1500px а по высоте от 100 до 300px, кому как нравится. Открываем файл index.html (на примере табличной темы оформления "csfever"), находим строку

<td wight="100%"  height="100" background="templates/$ThemeSel/images/logo.jpg"><a href="index.php" title="Главная"></td>

и заменяем её на строку. Кстати, в оригинале ошибка со ссылкой на главную страницу, ну да ладно...

<td wight="100%"  height="auto"><a href="index.php" title="Главная"><img src="templates/$ThemeSel/images/logo.jpg" border="0" width="100%" /></a></td>

Заметьте, размер логотипа-шапки height="100" заменён на height="auto" а сама картинка ставится не как background а как обыкновенная картинка.

Теперь ваш сайт будет выглядеть приятно на мониторах от 800 и выше. И даже при размерах по ширине 640px!!!

Вот два скриншота при разных разрешениях дисплея:

В следующем дополнении постараюсь показать как всё это делается на слоях а пока экспериментируйте и у Вас всё получится.

ВНИМАНИЕ!!! Статья писалась для другого движка но суть не меняется.

[Fix305]

вообще есть CSS фреймфорки при разработке с помощью которых достаточно заменить 1 файл и сайт становиться резиновым или заточенным под другое разрешение..

А вообще вот идеальный ИМХО сайт с резиновой версткой - http://hicksdesign.co.uk/ , где изменение размера не просто изменяет отступы и ширину блоков, но еще и расположение меняется

[vavan1955]

А вообще вот идеальный ИМХО сайт с резиновой версткой - http://hicksdesign.co.uk/ , где изменение размера не просто изменяет отступы и ширину блоков, но еще и расположение меняется

Нет ничего идеального потому многие и мучаются с определением, сделать фиксированный, но тогда на широкоформатном по бокам много свободного места. Или делать резиновый, но тогда сайт плывёт, как я писал выше. Этот вопрос поднимается часто на веб форумах и у всех свои мнения. Я не спорю что лучше но когда лет пять-шесть назад резинку было просто оформить то сейчас это гемор.

Вы не видели контент при разрешении 1600px, где текст с картинками просто перемешивался. Делать всё меняющимся, контент и блоки это не есть гуд. Лишний код и http запросов будет уйма а пользователей надо уважать. Для чего же мы стараемся большую часть перенести в таблицы стилей, да потому что она подгружается один раз.

Да, вспомнил, эту статью я писал для форума Антислаед.

Впринципе, если немного переделать то и под опен подойдёт. Здесь описан сам принцип а привязать можно к любому двигу.

[gdi31]

Во-о-о, такой диалог и интересно почитать, требую продолжение :).

[2goroda]

Отличная статья! Спасибо! Плюсанул.

Но указание ширины имеют различные элементы сайта: правый и левый столбцы, footer и т.д.

Получается, что и их надо задавать в процентах?

[Orion]

Интересная тема, сейчас столкнулся с проблемой, при увеличении текстового описания товара, размер пиктограммы на главной с ним, становиться разный, что портит внешний вид сайта и дает ощущение "разнобоя", как это поправить? Пользую Opencart 1.4.9.6, смотреть детище можно здесь:

http://www.color-plus24.ru

[Orion]

Проблема решена! Размер пиктограммы регулируется .сss стиле.

[deposit]

Проблема решена! Размер пиктограммы регулируется .сss стиле.

Позвольте уточнить, а где именно (в какой строке) регулируется размер пиктограммы?

Заранее благодарен.