Как сделать резиновый сайт. Что такое резиновый дизайн сайта.

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

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

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

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

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

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

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

Недостатки “резинового” дизайна сайта.Разумеется, использование “резиновых” сайтов имеет и свои недостатки. Основной трудностью является то, что контейнер – приёмник не всегда точно поддерживает заданный размер. Это зависит от размера контентного наполнения, включённого в контейнер. Например: необходимо поместить рисунок размером 100x80px в ячейку таблицы, у которой ширина установлена как 5% от общей ширины таблицы, составляющей 100% от ширины клиентской области окна.

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

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

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

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

Основные правила создания резинового сайта.Определите самое низкое разрешение экрана. Итак начнем. Прежде чем начать делать резиновый сайт, нужно определить минимальное разрешение экрана ваших посетителей. Сейчас по статистике большинство (40%) юзеров используют разрешение экрана 1280×1024. На втором месте разрешение 1024×768, я думаю на него и надо ровняться. Вы сами можете ознакомиться со статистикой воспользуясь поиском.

Разработайте дизайн сайта для минимального разрешения экрана. Когда вы определитесь с минимальным разрешением экрана, нужно разработать дизайн для этой ширины. Стоит отметить, что при разрешение 1024×768 в браузер влезает только 1000 пикселей. Поэтому делайте все графические элементы именно под эту ширину, чтобы сайт хорошо смотрелся при минимальном разрешении экрана.

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

Проверьте сайт. После создания сайта проверьте его во всех разрешения экрана (ну или в опере Ctrl+колесико мыши).