Pull to refresh

Правильная «резина»

Website development
Задачей этой статьи является систематизация знаний о том, как правильно растягивать сайт для различных разрешений экрана.

Введение


В процессе создания своих собственных проектов я увидел, что не правильно при верстке макета каждого сайта просто растягивать его на весь экран. Заметил наличие неудобств я тогда, когда появился монитор на 22 дюйма. Самое распространённое разрешение для таких мониторов 1680 на 1050 точек. Большинство дизайнеров рисуют макеты по ширине максимум 1280 точек, с учётом того, что для 17 дюймовых, 1024 точечных мониторов в ширину, макет будет просто сужаться. Когда макет деформируется по ширине на 200 точек, это не так заметно, как если бы он деформировался на 400, что происходит на 22 дюймовых мониторах. Такая большая деформация одинаково неприятно сказывается для многих макетов, как для строгих, так и для насыщенных графикой.

Вот так выглядит сайт yandex.ru при большой ширине.
Вот так выглядит сайт yandex.ru при большой ширине.

Систематизация знаний


Исходя из всего этого я пришёл к выводу, что сайт можно делать:
  1. Фиксированным (800 -1000 точек в ширину)
  2. Фиксированным, но с добавлением второстепенной графики для длинных мониторов.
  3. Резиновым с указанием минимальной ширины
  4. Резиновым, но с указанием максимальной и минимальной ширины
  5. Резиновым, с указанием максимальной и минимальной ширины, с добавлением второстепенной графики.

Free-Lance
Free-Lance, пример к первому пункту

2-go
2-go, пример ко второму пункту

Mojo
Mojo, пример к четвертому пункту

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

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

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

Третий вариант: резина, но с указанием минимальной ширины, приемлем для сайтов-таблиц. Когда концентрировать внимание пользователя на всем сразу нет необходимости, а есть необходимость, наоборот, показать на странице как можно больше информации сразу.

Четвёртый вариант — резиновый сайт, с указанием минимальной и максимальной ширины. Нужно использовать для сайтов, когда есть необходимость одно и то же представить на разных разрешениях. То есть, если указать максимальную ширину 1200 точек, то сужение или растяжение сайта будет происходить максимум в диапазоне 200 точек, что не должно повлиять на восприятия сайта пользователем.

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

Идея


Помимо всех этих вариантов растяжения сайта, во время написания статьи появилась идея, делать для каждого разрешения свой макет. По распространённости я различаю три разрешения:
  1. 1024
  2. 1280
  3. 1680

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

Котельников Валентин, 2008—2009
кросс-пост в моем блоге
Tags:резинасайтаверсткаразрешения
Hubs: Website development
Total votes 102: ↑77 and ↓25+52
Views14K