Почему для сайта под разрешение 1024px макет дизайна должен быть меньше 1003px по ширине?
Классическая ситуация: у фирмы-Заказчика в штате есть дизайнер-полиграфист, никогда ранее не сталкивавшийся с интернет-технологиями в плане разработки дизайна. Этому замечательному человеку поручают сделать внешнее представление будущего корпоративного сайта. Он отлично справляется с задачей, руководство утверждает дизайн, и далее обращается в web-студию или к "свободным мастерам" (фрилансерам иначе), для выполнения всех работ по собственно разработке сайта. С гордостью предоставляя выполненный своим штатным дизайнером макет.
Задача: определить минимальный набор требований к дизайн-макету для web-сайта.
Примерно в 90% интернет-студий цепочка создания сайта выглядит как-то так: Заказчик - менеджер - дизайнер - верстальщик - сайт.
Получается, что последним сайт попадает к верстальщику, и он видит уже то, что наобещал менеджер, затем отрисовал дизайнер, и уже одобрил заказчик. Чтобы на двух последних стадиях (дизайнер+верстальщик) было как можно меньше трений, постараемся формализовать некоторые вещи, которые лучше учесть креативщику при разработке макета дизайна.
Итак, общие понятия:
1. Файл дизайн-макета будущего сайта должен быть представлен в формате *. PSD либо *. TIFF
2. Цветовая палитра: строго RGB. Именно эту палитру без проблем воспроизводят абсолютное большинство мониторов.
3. Слои. Все графические элементы должны быть разделены на слои, исключение - дизайнерские "фишки".
4. Слои одного логического элемента предпочитаемо объединять в группу, давая ей человекопонятное название. Если это группа слоев, образующих верхнюю часть сайта - назовите ее Шапка, Header, Верх, Верхняя часть сайта... Отдельные слои также крайне желательно называть понятными именами, а не оставлять Слой1.... Слой89, или Slice1.... Slice113.
5. Если сайт предполагается быть фиксированной ширины, то макет должен быть именно фиксированной ширины и строго соответствовать заявленному значению. Если 850px, то 850px, не больше и не меньше, разница даже в 1 пиксель недопустима!
6. Если сайт предполагается делать под конкретное разрешение - очень внимательно отнеситесь к ширине макета. Привожу данные о минимальной рабочей ширине браузеров, измеренной специалистами для того, чтобы сайт занимал всю рабочую область без образования полосы горизонтальной прокрутки:
Разрешение монитора Максимальная ширина макета
800х600 779px
1024х768 1003px
1280х1024 1259px
1400х1050 1379px
1440х900 1419px
1600х1200 1579px
1680х1050 1659px
Это уже посчитанные цифры. На самом деле практика показывает что ширина полосы прокрутки в большинстве популярных браузеров не превышает 21px. Так что ширина вашего макета должна быть ровно на 21px меньше ширины монитора пользователя, под которую предполагается адаптировать сайт.
В этом случае вся свободная область браузера будет занята вашим сайтом, без перекосов и появления горизонтального скроллинга.
Дизайнерские фишки:
1. Если предполагается текстурированный фон - его элементы обязательно должны быть повторяющимися. Одна большая красивая картинка на фоне - это неграмотно, к тому же существенно увеличивает вес сайта и, соответственно, скорость его загрузки.
2. Избегайте эффектов подсвечивания и прозрачности. Это те эффекты, которые невоспроизводимы частью устаревших (но, тем не менее, достаточно популярных у пользователей) браузеров, соответственно ваш сайт не сможет выглядеть одинаково у разных пользователей.
3. Обязательно создавайте "иконку" для сайта при разработке дизайна. Это маленький графический файл в формате *. ICO, который будет отображаться слева от имени вашего сайта в адресной строке браузера. Стандартный размер файла favicon. ico - 16х16px.
4. Элементы навигации (Стрелочки, иконки, кнопочки) - желательно выводить их в отдельный файл, каждый элемент в отдельном слое на прозрачном фоне.
Текстовое наполнение, оформление текста:
1. Размер всех шрифтов задается строго целым числом. Трансформация эффектами сжатия, растяжения и т. п. недопустима!
2. Ограничьтесь применением группы стандартных шрифтов, которые используются "по умолчанию" во всех ведущих операционных системах, это позволит избежать проблем с разным отображением текста у разных пользователей (Стандартный набор: Arial, Helvetica, Times New Roman, Courier, Verdana, Tahoma). Если вы настаиваете на применении графических шрифтов - элементы, выполненные ими, будут интерпретироваться как изображения, имейте это в виду при составлении концепции сайта.
3. Не используйте эффект сглаживания. Он не будет реализован на вашем сайте, а значит, вы получите другое визуальное представление.
4. Описывайте поведение ссылок.
Какой ссылка будет в обычном состоянии, какой - при наведении курсора мыши, какой - в момент нажатия, какой - после посещения.
5. Описывайте поведение в тексте стандартных html-тегов, таких как: параграф параграф P, заголовок H1...H4, маркированный список UL.
Вот примерный перечень условий, учитывая, которые, дизайнер значительно повысит производительность своей работы, а фирма-Заказчик услуг по разработке сайта сэкономит массу времени, сил, нервов и денежных знаков.
Ведь если ваш макет не соответствует минимуму требований верстки - его будет нужно адаптировать, а переделывать чужую работу всегда сложнее, а, следовательно, и дольше, и дороже.
