Резиновая верстка:

manufactura — 17.10.2010 — Ликбез

Ликбез

Резиновой вёрсткой называется вёрстка, при которой сайт масштабируется в зависимости от ширины браузера.

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

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

Самая распространенная проблема резиновой верстки — неудобные для чтения текстовые блоки, слишком сильно растянувшиеся на больших разрешениях. Якоб Нильсен в книге «Веб-дизайн» подробно описывает эту проблему и ее причины: исследования показали, что пользователям тяжело читать тексты, в которых взгляд не охватывает строку целиком. Известный факт, что в газетах ограничивают ширину столбца текста. Бузусловно, это стоит делать и в интернете. Но нужно позаботиться о качественной резиновой вёрстке, а не ограничивать ширину сайта. Ведь посетитель может сузить браузер для удобства чтения, а растянуть фиксированную вёрстку уже не получится.

Есть две причины, почему не хотят делать «резину»: эстетическая и технологическая.

Ответ эстетам

Эстетическое «против» заключается в том, что некоторые разработчики считают фиксированную вёрстку более стабильной и потому кажущейся пользователю «родной», «уютной». Но «эмоциональное восприятие» сайта — это не то, на что должны ориентироваться разработчики интерфейсов, зачастую, оно очень субъективно. Таким восприятием руководствуются в основном неактивные пользователи, которые заходят в интернет, как правило, с одного и того же домашнего компьютера. Они ризиновости сайта вряд ли оценят. А вот активного пользователя интернета не испугает «прыгнувший» или растянувшийся блок.

Боремся со страхами технологов

Технологическая причина сводится к набору страхов.

Что делать с возникающими пустотами?

Существует достаточно много хорошо свёрстанных резиновых сайтов, на которых эта проблема решена. Интернет-издание «Время-н» растягивают картинки на больших разрешениях. Гугл-картинки используют блоки, перескакивающие со строки на строку при разной ширине браузера.

Как быть с широкими текстовыми блоками?

Можно использовать многоколоночную структуру. В этом случае блоки, растягиваясь, остаются читаемыми. Этот способ реализован на Ленте.ру. Но и в обычном трёхколоночном сайте можно добиться читаемости текста.

Большинство резиновых сайтов, которые мы помним были сделаны в начале двухтысячных, когда возможностей было не так много, как сейчас. Сайты того времени были «прилеплены» к границам экрана и тянулись лишь за счет центрального столбца. При этом текст, конечно, ужасно растягивался.

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

Что делать с изображениями?

Многие сайты, построенные на графике сделаны фиксированными, а зря. Например, сайт Драйв.ру, несмотря на то, что его шапка состоит из одних картинок, прекрасно чувствует себя на любых разрешениях. А Авторамблер, суть которого показать одну карасивую картинку, просто растягивает её во весь экран. Современные браузеры умеют достаточно качественно сжимать и растягивать изображения.

Если дизайн предусматривает красивую графическую шапку во всю ширину, это тоже не помеха сделать резиновую вёрстку. Достаточно попросить дизайнера нарисовать шапку 2000 пикселей шириной. Вёрстка будет обрезать картинку на маленьких разрешениях, а на больших картинка будет видна почти полностью.

Исключения из правил

Большинству сайтов резиновость не помешает. Но, всё же, есть варианты, при которых «резина» не нужна. Например, нельзя тянуть таблицы данных — широкие колонки неудобно читать. А если весь сайт состоит из таких таблиц, то имеет смысл сделать его фиксированным.

В некоторых случаях возможен компромисс, когда сайт тянется только до определённых размеров. Например, в блогах, где большая часть контента на странице — это публикация, или на новостных сайтах (та же Лента.ру).

Таким образом, единственная причина зафиксировать вёрстку — абсолютная невозможность добиться удобочитаемости информации пользователем. А таких случаев крайне мало.



Любая проблема резиновой верстки, о которой когда-либо говорилось — решаема. Главное — видеть перед собой цель создания продукта, максимально-удобного для пользователей.

Автор: Ловчиков Антон, ведущий дизайнер «Мануфактуры».

Оставить комментарий

Популярные посты:

• Архив