Резиновый дизайн

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

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

С процентами работать совершенно не сложно. Если 100% — это полная ширина или высота сайта, то 50% — это его половина, а 25% — четверть. О том, насколько целесообразно применение «резинового» дизайна, попробуем разобраться в данной статье.

Резиновый сайт и его преимущества

1. Главным плюсом подобной реализации считается динамическая подстройка размеров веб-ресурса. Параметры, заданные в процентных соотношениях, дают возможность просматривать сайт на любых мониторах, независимо от разрешения. Таким образом, сайт все время остается в видимой области, подстраивая размеры блоков относительно диагонали экрана пользователя.

2. Резиновый сайт позволяет использовать масштабирование страниц, не выходя за рамки видимой области. Говоря проще, читателю не приходится работать с горизонтальной полосой прокрутки, чтобы разглядеть левую или правую (выпавшую из вида) область.

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

1. Основной недостаток такого дизайна заключается в том, что используемые на сайте элементы, обладающие точными размерами, не всегда вписываются в подстраиваемые блоки и окна. К примеру, если ширина изображения – 100 пикселей, а ширина окна – 5%, то понятно, что на небольших мониторах картинка может просто не уместиться в заданную область. В результате, часть изображения просто скроется за соседним блоком или перекроет его сверху (в зависимости от реализации кода).

Соответственно, такое положение дел никоим образом не добавит сайту красоты.

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

3. На разработку качественного резинового дизайна уходит куда больше времени, чем на проектирование площадки с фиксированными параметрами.

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

1. Важно установить минимальные размеры экрана среднестатистического пользователя Сети. Для этого достаточно воспользоваться поиском Яндекса.

Отметим, что на сегодняшний день наиболее популярными расширениями считают:

• 1280 на 1024 пикселей;

• 1024 на 768 пикселей.

2. Определившись с минимальной шириной, можно приступать к планированию размеров элементов сайта. Стоит также учесть, что в ширину 1024 браузер может вместить только 1000 пикселей, а 24 пикселя уйдут на окно самого браузера. Именно из этого размера и стоит исходить, чтобы веб-сайт нормально выглядел на самом небольшом мониторе.

3. Для фиксированных элементов сайта (навигационное меню, рекламный блок и др.) лучше все же использовать точные значения, указанные в пикселях. Это позволит реализовать их неизменную ширину и высоту. В процентных соотношениях задаются только текстовые поля таблицы, изменения в которых не повредят внешнему виду.

Таким образом, на сайте будут присутствовать неизменные блоки и блоки, меняющие ширину (в зависимости от размеров экрана пользователя).

4. Спроектированный и созданный резиновый сайт подлежит обязательному тестированию на мониторах с различными расширениями. Если такая возможность отсутствует, то достаточно использовать функцию масштабирования, которая имеется во всех современных браузерах.

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