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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Алгоритм создания прототипа

Сначала в программе создаётся пустой файл шириной 1920 пикселей и высотой примерно 5000 пикселей. Для контента задается ширина с полями (1920 – 300Х2 = 1320 пикселей). Высота потом меняется в зависимости от количества модулей.