Школа Email-маркетинга

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

Резиновая верстка сайтаВ сайтостроении используется такой термин, как резиновая верстка. Попробуем разобраться, что он означает.

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

Для решения этих задач веб-дизайнер еще на этапе проектирования должен выбрать тип верстки сайта . Какой же она может быть для данного вида сайта?

Виды верстки сайта можно классифицировать по способу реализации и способу отображения. По способу реализации верстка может быть:

  • Табличная;
  • Блочная;
  • Комбинированная.

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

А вот способ отображения важен для посетителя сайта. По этому признаку верстка бывает:

  • Фиксированная (статическая);
  • Резиновая (тянущаяся);
  • Гибридная;
  • Респонсивная (адаптивная).

В этой статье подробнее остановимся на резиновой верстке сайта, ее достоинствах и недостатках.

При резиновой верстке сайт масштабируется в зависимости от ширины окна браузера. Такой способ верстки появился в связи с ростом размеров мониторов и их разрешения. Первые массовые мониторы имели разрешение 640*480, потом активно начали внедряться мониторы с разрешением 800*600 и 1024*768. Возникла необходимость делать сайты, ширина которых менялась с изменением ширины окна браузера, так как сайты с фиксированной шириной не всегда адекватно отображались на различных мониторах. С одной стороны, разработчик сайта стремится использовать всю площадь больших экранов для размещения информации, с другой стороны, ему нужно учесть возможности тех пользователей, которые имеют старые мониторы с небольшим разрешением. В настоящее время размеры мониторов выросли еще больше, и никого не удивишь разрешением 2048*1152.

Технически выполнить резиновую верстку можно как с помощью таблиц, так и используя блочную структуру. Используется она и на сайтах, работающих на движках WordPress, который применяется для создания блогов, Joomla!  и других. Как это сделать, в одной статье не объяснить, для этого существуют различные курсы.

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

Но зато пользователь может сам решать, в каком виде просматривать сайт. С помощью браузера он может настраивать нужную ему ширину.

Web-страница состоит из элементов различных типов, которые масштабируются по-разному. Например, текстовые блоки можно легко растягивать по горизонтали. Именно в них содержится обычно большая часть информации, а, значит, при резиновой верстке экран будет максимально информативен. Но растягивать бесконечно страницу нельзя, ее будет трудно читать. Считается, что оптимальная ширина текста должна составлять около 45 символов. Глаз должен охватывать всю строку целиком, тогда при чтении утомляемость будет минимальной. Если же текст на странице резинового сайта растянуть на всю ширину монитора размером, например, 27”, то при чтении придется даже поворачивать голову. В этом случае текст можно располагать колонками, но такое решение возможно, если контент состоит из отдельных не связанных друг с другом коротких блоков. Если же расположить колонками большой непрерывный текст, его придется прокручивать сначала вниз, а потом – вверх, на начало следующей колонки, что неудобно для пользователя.

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

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

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

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

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

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

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

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

Для освоения возможностей  верстки сайта рекомендую единственный в своем роде курс «Верстка-Мастер. От теории до верстки популярных шаблонов».

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.


Адаптивная, SEO подготовленная WordPress тема
Очень плохоПлохоСреднеХорошоОтлично (голосов: 1 в среднем: 5,00 из 5)
Загрузка...
Понравилась статья? Поделиться с друзьями:
Комментарии: 2
  1. GlobalSolutions

    Спасибо, полезно

  2. Адрей Масалкин

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: