!

23 ноября 2015

Вопросы сайтостроения: "Фиксированный" и "резиновый" макеты сайта

Что необходимо знать для создания сайта? | Комментарии (0)

Фиксированный и резиновый макеты сайта



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

И тогда, на всех движках, CMS и их плагинах - Simplamarket царила бы гармония и красота.  Не так ли?

К сожалению, Интернет не регулируется подобным образом. Иногда мы предпринимаем попытки дизайна в обход «стандартных» показателей ширины окон вроде 640, 960 или 1024 пикселов.

Тем не менее это по большей части иллюзия: стандартных размеров окон браузеров не существует. И данный факт следует учитывать еще до того, как вы начнете задумываться о мобильных устройствах.

Несомненно, макет фиксированной сетки шириной 960 пикселов смотрится куда лучше резинового аналога.

Вопросы сайтостроения: "Фиксированный" и "резиновый" макеты сайта


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

Макеты резиновой сетки предполагают использование пропорциональных единиц (процентов) вместо пикселов для задания ширины. Мы сможем остаться верными дизайнерскому видению, согласно которому левая и правая колонки будут занимать четверть ширины страницы, путем определения значения их ширины как равного 25 % вместо 240 пикселов.

При разной ширине окна содержимое будет растекаться, словно вода, заполняя доступное в макете пространство. Левая и правая колонки всегда будут занимать 25 % окна, содержимое не станет обрезаться в более узких окнах, а в более широких окнах не будет пустого пространства.

И еще момент. Правила, правилами, но не надо забывать и про дизайнерские заморочки.

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


  • Сайтостроение. Подбор размеров изображений
  • Пластиковые окна и их составляющие
  • Навязчивая и ненавязчивая реклама посредством всплывающих окон
  •  (голосов: 0)
    Комментарии (0)