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