5 мая
2010

О резиновой вёрстке

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

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

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

Допустим, человек купил дорогой широкий монитор, зашёл на сайт, а тот как был 800 пикселей в ширину, так и остался. Не надо его учить, что растягивать браузер на все 1900 пикселей неправильно. Надо сделать резину и предоставить право выбора человеку.

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

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

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

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

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

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

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

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

Схема сайта с тянущимся центральным и фиксированными боковыми столбцами. На больших разрешения центральный столбец непропорционально растянут.

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

Схема сайта с пропорционально растягивающимися столбцами и расстояниями между ними. При такой схеме центральный столбец заметнее ýже, чем в предыдущем варианте.

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

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

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

Схема сайта с обрезающейся графической шапкой.

Также есть вариант, когда сайт тянется только до определённых размеров. Такой компромисс возможен, но желательно всё же делать настоящую «резину».

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

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

3 комментария

Саша Реушкин, 15 ноя., 08:46

Да можно делать картинку, только уже не 2000 px, а поболльше. Хоть и мало таких мониторов ещё,но всё же они есть.

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

Таким образом ширина строки остаётся такой же удобной для чтения и к тому же увеличивается шрифт, что тоже повышает удобство чтения.

Антон Ловчиков, 15 ноя., 08:50

Отчасти, крутые сайты сейчас так и делают — они растягивают контентные картинки. Идея с увеличением шрифтов тоже хорошая. Некоторые сайты вообще изменяют вёрстку на разных разрешениях: то одноколоночные, то двух, то трёх.

Александр Родионов, 13 окт., 19:46

Ребята, т.е если я хочу адаптировать дизайн сайта от 1024 до например 1366, то я в фотошопе и должен создавать документ размером в 1366 пикс...?ну там еще минус скролл, помоему 20 пкс.то значит 1346.. Правильно..?или нет..подскажите пожалуйста

Ваш комментарий

Анонимный комментарий будет опубликован от имени Лориэрика

Укажите ее, если хотите, чтобы никто не смог написать от вашего имени.

Комментарии не по существу, содержащие мат или оскорбляющие кого-либо будут удаляться.