Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов

Размер окна браузера – это ширина и высота области просмотра в пикселях (например, 1896 x 1080 – с учётом полосы прокрутки в 24 пикселя). Другими словами, – это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Но, размер окна браузера пользователь может сам менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.

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

Размеры сайтов бывают двух типов: фиксированный и «резиновый».

Фиксированная вёрстка сайта – это жестко заданные статические параметры сайта, и его ширина не меняется, независимо от того, какое разрешение у пользователя. Делать весь сайт фиксированным уже нет смысла, такой дизайн считается устаревшим. Но некоторые модули сайта могут иметь фиксированную ширину (только не в пикселях, а в процентном соотношении). Например, контейнер с контентом может занимать 80% от всей ширины.

Как дизайнеру определить размер в пикселях, ведь в программе Adobe Photoshop нельзя сделать размер в процентах. Нужно для общего файла задать размер 1920 пикселей, а для контента замерить с образца (который понравился клиенту). Для этого сделайте скриншот сайта-образца и поместите его в файл с прототипом или дизайном сайта, удалите поля браузера со скриншота, растяните слой на всю длину и вы получите поля для контейнера. Можете замерить их при помощи инструмента «Прямоугольное выделение».

Как правило, на дизайне отображают поля, равные 200 или 300 пикселей (слева и справа от контейнера с контентом)

Рис.84. Определение полей направляющими на прототипе по образцу чужого сайта

Резиновая ширина сайта – это ширина, которая подстраивается под ширину браузера. Если браузер шире, то и блоки снизу перемещаются вбок. Браузер уже, – блоки располагаются друг под другом.

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

Минусы: На большом экране сайт очень сильно расползается. Особенно это неудобно для текста. Периодически может возникать пустое пространство между блоками.

Сейчас наиболее современным вариантом вёрстки сайта является адаптивный дизайн.

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

Рис. 85. Разрешение дизайна сайта по ширине для разных устройств

Инструменты для анализа отображения сайта на разных устройствах

Поисковые системы учитывают поведенческие факторы как в десктопной версии, так и на мобильных устройствах, поэтому необходимо учитывать этот факт при разработке сайта (или при его редизайне).

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

Например, инструмент проверки адаптивности Viewport Resizer

Viewport Resizer – инструмент-закладка, работающий в браузере. Сервис используется для проверки отображения сайта при разных разрешениях. При работе с инструментом можно использовать предложенные варианты разрешения, а можно дополнить их пользовательскими вариантами.

И последнее – «резиновый» модуль (например, слайдер) – отображается на прототипе и на дизайне сайта растянутым на всю ширину, то есть 1920 пикселей. Остальной контент, имеющий поля, будет немного уже, в зависимости от сетки, которую выбрал веб-дизайнер. Некоторые модули имеют фиксированный контент, но фоновую подложку «резиновую», которая тянется на всю ширину сайта.

Посмотрите на рисунок 86: на прототипе основной контент имеет поля и будет фиксирован на сайте по определённой ширине, например, будет занимать 80% в браузере, а вот подложка (фон) для формы обратной связи «Рассчитайте стоимость» – будет «резиновый», то есть, растянутый на 100 % по ширине. На прототипе он не имеет полей и занимает всю ширину сайта. Такое отображение показывает верстальщику, как сделать этот модуль.

Рис. 86. Ширина модулей на прототипе

3. Прорисовка модулей прототипа

Вручную прототип делается в растровом редакторе Adobe Photoshop, но это не единственная программа, в которой можно сделать прототип сайта.