Что такое резиновый дизайн сайта

Резиновым считается тот сайт, в котором есть функция изменения своего размера в зависимости от размера клиентской области окна браузера. Мысль достаточно проста: задавать width и height столбцов и строк таблицы или же контейнеров, за счет которых происходит разметка страницы, можно либо в пикселах, или в  процентах, в этом случае за 100% считаются размеры контейнера, который содержит описываемый объект.

Если применять размеры только в пикселях, то сайт будет "жёстким". Естественно, и в этом случае есть возможность динамического изменения размеров элементов разметки за счет JavaScript, например, по событию window.onResize, но более всего гибко дает возможность менять размеры задействование процентных величин. Сайт, который применяет процентные соотношения размеров width и height вложенных контейнеров относительно контейнера - приёмника имеет название "резиновый".

Преимущественно для создания резинового сайта используется процентная величина – а именно, размер таблиц указывается не в пикселях, а в процентах. При этом, если задать ширину в процентах, то тогда размер сайта будет зависеть от размера экрана. Но нужно будет всё-таки его  подгонять, как  необходимо будет, используя редактирование параметров CSS. Дабы ширина сайта была на весь экран то надо писать 100%, а если только на половину - 50%.

Пользователь не будет знать ширину страницы на экране разработчика. Она зависит от свойств монитора, размеров открытого окна и разрешения экрана.

В общем "резиновая" идея, получается, самая правильная для сайта в Интернете. Она дает возможность браузеру самостоятельно распределять элементы, на экране  учитывая ширину текущего окна, и не приводит к демонстрации горизонтальной линейки протяжки и в узких окнах.

Преимущества резинового сайта.

Главным преимуществом является динамическое изменение размеров сайта. Пропорции элементов разметки не меняются для любого разрешении монитора, и любых манипуляций пользователя используя окно браузера. Дизайнерское решение фактически всегда очень сильно проигрывает, если сайт выставить одновременно в виде таблицы с текстом и графикой, позиционированной по центру или левому краю окна, одновременно  как справа или слева остаются большие поля. Такое происходит, если сайт построен для какого-то "оптимального" разрешения монитора пользователя (возможно 800х600, или 1024х768), а у пользователя установлено большее разрешение. Если во время построения "жесткого" сайта сориентировать его на какое-то "максимальное" разрешение монитора пользователя (например, 1280х1024) то тогда при более низких разрешениях сайт будет иметь горизонтальную полосу прокрутки и "потеряет" часть изображения за правым полем что принципе сведёт на нет все усилия дизайнера.

Используя резиновый сайт такие неприятности фактически исключены. Сайт смотрится одинаково  при любом разрешении монитора пользователя.

Недостатки "резинового" дизайна сайта.

Естественно, применение "резиновых" сайтов имеет и свои минусы. Главной трудностью является то, что контейнер - приёмник не всегда может точно поддерживать заданный размер. Это как раз зависит непосредственно от размера контентного наполнения, включённого в контейнер. Например: нужно разместить рисунок размером 100х80px в ячейку таблицы, у которой ширина выставлена как 5% от общей ширины таблицы, составляющей 100% от ширины клиентской области окна.

Если учесть, что у пользователя разрешение монитора 640х480. При простом подсчёте выясняется, что 5% составляет не больше 32px (практически намного меньше, только это зависит от размеров клиентской области окна браузера и от размеров полей самой страницы, определяемой  в теге "BODY" "/BODY"). Но ячейка будет иметь ширину не менее 100рх, учитывая, что по правилам HTML изображение в ячейке не может сжиматься, а наоборот, сама ячейка увеличивается до размеров изображения.

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

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

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

Основные правила создания резинового сайта.

 Перед тем как делать резиновый сайт, необходимо определить какое минимальное разрешение экрана у посетителей. Обычно по статистике многие юзеры применяют разрешение экрана 1280x1024. Второе место занимает 1024x768,  возможно лучше ровняться на это разрешение. Используя поиск можно самому узнать статистику.

Нужно разработать дизайн сайта, под минимальное разрешение экрана. После того как решите на счет минимального разрешения экрана, стоит разработать дизайн для этой ширины. Важно отметить, что при использовании  разрешения 1024x768,  браузер вмещает только 1000 пикселей. Исходя из этого, необходимо делать все графические элементы конкретно под эту ширину, дабы  сайт имел хороший вид при использовании минимального разрешения экрана.

В таблице для ячеек применяйте в качестве единиц измерения пиксели, по мимо ячеек с информацией сайта. Нужно задать фиксированный размер для всех ячеек, кроме ячейки с содержимым сайта. Необходимо поставить 100% ширину для этой ячейке или не задавать ее вообще.

Когда будет готов сайт его нужно проверить по всем разрешениям экрана.

Эта статья более раскрыта на этом сайте:

http://seoklub.ru/kak_sdelat_rezinovyi_sait.html