За время своей работы верстальщиком, мне довелось иметь дело с кучей разных макетов как от новичков дизайна (или порой просто левых людей), так и до профессионалов. И за это время я успел набрать приличную выборку наиболее типичных багов в макетах, которых не в состоянии избежать даже маститые специалисты. Сразу оговорюсь — в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, при несоответствии дизайна этим требованиям, он должен без вопросов отправляться на доработку, но реалии таковы, что зачастую проще самому внести нужные правки, чем гонять документ туда-сюда по трекеру. Но даже в этих «требованиях» упомянуты далеко не все очевидно возможные «косяки». Постараюсь привести наиболее популярные и универсальные (без личностной привязки). Да, кстати, все баги привожу под использование фотошопных psd — ну уж де-факто это стандарт в веб-макетах. Да и не попадались мне ещё макеты в векторе (и надо сказать, слава богу).
1. Разметка. Основа страницы, так называемый лэйаут или скелет.
а) Самое известное и набившее оскомину, но от этого не менее популярное — ширина макета всегда должна быть меньше подразумеваемой ширины устройства отображения на 20-24пикс (корректно — минимум 24пикс.). Т.е. если мы готовим документ под горизонтальное разрешение в 1024пикс., то максимальная ширина макета — 1000пикс. Надеюсь понятно почему — учитываем высоту скроллбара и бордеры окна. Если кто-то считает, что при небольшой высоте макеты допустимо не учитывать скроллбар — то могу заметить, что пользователь всегда может ужать окно по вертикали и… Это, пожалуй, самый трудоемкий для правки баг (если этим приходится заниматься верстальщику) — порой встроенная графика и/или разметка просто не даёт возможности адекватно это сделать. Приходится вырезать куски, масштабировать, подгонять остальной контент и т.д. Жуть, короче!
б) Модульная сетка. Вернее даже не сетка, а направляющие, проведённые к основным блокам/картинкам — позволяют просто раз провести линейкой между ними и вбить полученное значение в css. Не критично, но очень здорово облегчает жизнь. Надо заметить, что макеты без направляющих встречаются очень редко. Но в большинстве случаев дизайнер обходится всего несколькими направляющими для основных колонок.
в) Тоже известный бич вёрстки — так называемая «рыба», обычно вписана идеально, и почти никто и никогда не вставляет экстремальные по объему контента примеры. И приходится гадать-уточнять поведение того или иного блока при переполнении контентом или недостатке его (например пропорции картинки не соответствуют тем, что заложены в макет — кропить, если да, то как? вписывать? и т.д., или имя/фамилия юзера окажется длиннее чем «Иванов Иван» ну и т.д.)
г) «Резина». Хотите «резину»? Будьте добры приложить 2 макета для минимального и максимального разрешения, чтобы верстальщик не гадал — какие именно блоки и как будут тянуться!
2. Типографика.
а) Гарнитуры. Есть всем известный список «безопасных шрифтов». Большинство в курсе его. Но порой лепят какой-нибудь Myriad Pro и понеслась… Начинаешь объяснять, что он не входит в стандартную поставку с ОС, несмотря на то, что дико популярен. В большинстве случаев дизайнер идёт на встречу и делает замену гарнитуры, но есть и такие, которые начинают учить… Дескать, а Вы не в курсе свойства @font-face. Да я-то в курсе, но 1 — дайте мне нормальный качественный шрифт, чтобы я мог его конвертировать (всякие font-squirell очень гаденько рендерят не «типичные» кегли), 2- а мы ничьих авторских прав при этом не нарушаем? В большинстве случаев оказывается, да — шрифт-то платный. Короче, проблем куча.
б) Сглаживание шрифтов всегда должно быть отключено! И не надо меня «лечить» что кто-то из браузеров там что-то умеет. Ну IE умеет, например, — и что? Оно понятия не имеет о фотошопных «резко», «гладко» и т.п. А по факту получается — менеджер утверждает один макет, а на выходе вёрстки имеем корявую нечитабельную фигню. И кто виноват?
в) Интерлиньяж. Всегда должен быть проставлен хотя бы «авто» (обычно это значит следующее «стандартное» значение после кегля, но не в точности — приходится подбирать вручную), а лучше конкретное значение. Потому что css всегда требует как значение кегля, так и интерлиньяжа. И Вы не поверите — за свою карьеру в окошке значения интерлиньяжа я видел, наверное, все возможные значения в принципе.
г) Отличный от дефолта (100%) межбуквенный/межсловный интервал тоже заставляет резко напрячься — что это? Остатки от «старых настроек»? Блажь дизайнера? Или действительно осознанный приём — приходится уточнять.
д) Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать (свечение и обводку) — но что-то одно, сами понимаете — «работающее» свойство text-shadow можно задать только один раз.
3. Эффекты и графика.
а) Эффекты для слоёв лучше не сводить — поскольку некоторые эффекты можно реализовать через CSS, а это оптимизация.
б) В слоях и эффектах НИ В КОЕМ СЛУЧАЕ не использовать какой-либо режим наложения слоёв кроме Normal, поскольку он зависит от нижележащих слоёв — и это распространяется даже на сведение слоёв и вставку с помощью графики. Это вообще эпично! Как влепят какой-то overlay, и выход тут один — сводить все слои и обтравливать элемент, а это, надо заметить, порой сродни отрисовке в векторе — особенно если всякие свечения/тени с большим радиусом.
в) С умом использовать эффекты — зачем проставлять надписи один цвет, а потом использовать эффект «наложение цвета»??? Зачем использовать внешнюю и внутреннюю тень одновременно? и т.п. Градиент — ладно, оговаривается отдельно…
г) Для внедряемой графики (иконки, кнопки и прочий декор) — желательно сводить слои, чтобы верстальщик не рылся по макету в поисках нужных слоёв. А лучше вставлять смарт-объектом — очень быстро делается внедряемая картинка и при необходимости в неё можно вносить изменения.
4. Прочее.
а) Хорошо бы иметь готовый css-спрайт со всеми оформительскими элементами и проставленными направляющими — но это из области НФ!
б) Желательно сопровождать макет пояснительной запиской, где будут перечислены:
— использованные гарнитуры (для возможности сразу прописать основное семейство шрифтов для страницы и изменять его лишь отдельных блоков);
— блоки с использование «неавтоматического» интерлиньяжа и интервалов;
— цветовая схема — сразу прописаны цвета для основных текстовых блоков (все используемые цвета не имеет смысла перечислять), цвета ссылок — по умолчанию, по наведению, посещённые; опорные цвета используемых градиентов и т.д.
Вот, пожалуй, основное. Как видите не так уж и много и не так уж напряжно для дизайнера учесть эти моменты. Зато время вёрстки сокращается ну наполовину уж точно! Буду рад, если кто-то воспримет это как руководство к действию, и хотя бы частично сделает свои макеты лучше — а вдруг доведётся вместе работать.
P.S. Иллюстрированные примеры не выкладываю по, сами понимаете, каким причинам. Если есть какие-то вопросы — задавайте.
P.P.S. Спасибо НЛО!
Автор: Spaceoddity
