Рекомендации по вёрстке макета веб-сайта

Веб-мастер не должен быть ограничен в выборе графической программы для разработки и верстки макета веб-сайта. Это может быть Adobe Photoshop, Corel Photo-Paint, Ulead Photoimpact или любая другая программа или даже online-сервис в Интернете. Однако, для групповой работы в команде дизайнеров, первостепенным является вопрос совместимости графических форматов приложений и дальнейшая работа с макетом веб-сайта в плане масштабирования графических объектов, соответствия цветового профиля, экспорта и вёрстки для различных устройств.

Понятно, что для мобильных устройств, такие как смартфоны, говорить о макете не приходится. Здесь мы говорим о структуре  - в общем, и о стиле веб-сайта  -  в частности.

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

Итак, минимальная рекомендуемая ширина макета — 900 px, в идеальном случае рекомендуемая высота – 600px. Дизайн должен учитывать возможность комфортного просмотра сайта на большинстве мониторов с возможностью доступа пользователя ко всем элементам навигации, если специально не оговорено другое. В случае 14” мониторов пропорции 900х600px оптимальны, хотя существуют ещё такие устройства, как «нетбуки» и различные терминалы, для которых особо не «подизайничаешь».

Для обеспечения корректного масштабирования блоков сайта на мониторах с разным разрешением, не желательно использование крупных фоновых изображений, суммарная ширина которых будет превышать 1000px. Разумеется, если фоновое изображение можно без видимых искажений размножить, то это ограничение не действует.

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

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

Необходимо также обеспечить возможность корректного (без ущерба для дизайна сайта) отображения контента сайта любым из системных шрифтов внутри семейства шрифта (serif, sans-serif, monospace).

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

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

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

Во избежание дробления макета на многие десятки слоёв не следует помещать каждый объект в отдельный слой, если не меняется его контекст (окружение, фон) на сайте.

Направляющие (guides) необходимо использовать только в тех случаях, если требуется:

• обозначить выравнивание нескольких элементов по одной линии или для акцентирования других особенностей их взаимного положения;
• для обозначения полей (margins) и отступов (paddings ) элементов оформления и/или контента сайта;

 

Следует отметить, что при масштабируемой HTML-вёрстке любой макет будет представлять собой только один из множества вариантов вида веб-сайта. В этом случае использование направляющих вообще теряет смысл или даже мешает увидеть конечный результат. Вместо выровненных раз и навсегда объектов следует задуматься о взаимном расположении частей макета. Не стоит «измерять алгеброй гармонию». Что вы знаете, к примеру, о золотом сечении, в котором «отношение большей части к меньшей в этой пропорции выражается квадратичной иррациональностью»: Вот сначала отмерьте  направляющей, а потом спорьте. Хотя  очень просто «отмеряется на глаз»: мы не знаем, что это  или , но мы живые люди и нам нравится воспринимать гармонию. Не принимая этого во внимание, вы рискуете создать макет похожий на раскрашенный гроб.

 

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

Корректирующие слои также не желательны, так как не имеют самостоятельного значения. Их следует объединять с основными слоями.

К макету прилагается пояснительная записка, в которой содержится следующая информация:

• тип верстки сайта (масштабируемый, фиксированный, смешанный) с указанием абсолютных и/или относительных размеров функциональных блоков сайта;
• желательность или нежелательность скроллинга (полосы прокрутки) для случая если объем контента не будет умещаться в отведенную ему область (т. е. скрыть не уместившийся контент либо добавить скроллинг);
• поведение динамических элементов и элементов управления контентом с отсылкой на соответствующие слои макета. В том числе вид ссылок и интерактивных кнопок для различных состояний (hover, active, visited);
• любая иная информация, не очевидная из самого макета.

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