форум vBSupport.ru > Камчатка > Бар «У воблочки»
  • »
VBsupport перешел с домена .ORG на родной .RU Ура! Пожалуйста, обновите свои закладки - VBsupport.ru
 
 
 
 
Luvilla
Гость
Default За что HTML-верстальщики так не любят веб-дизайнеров

Quote:
За время своей работы верстальщиком, мне довелось иметь дело с кучей разных макетов как от новичков дизайна (или порой просто левых людей), так и до профессионалов. И за это время я успел набрать приличную выборку наиболее типичных багов в макетах, которых не в состоянии избежать даже маститые специалисты. Сразу оговорюсь — в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, при несоответствии дизайна этим требованиям, он должен без вопросов отправляться на доработку, но реалии таковы, что зачастую проще самому внести нужные правки, чем гонять документ туда-сюда по трекеру. Но даже в этих «требованиях» упомянуты далеко не все очевидно возможные «косяки». Постараюсь привести наиболее популярные и универсальные (без личностной привязки). Да, кстати, все баги привожу под использование фотошопных 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-спрайт со всеми оформительскими элементами и проставленными направляющими — но это из области НФ!
б) Желательно сопровождать макет пояснительной запиской, где будут перечислены:
— использованные гарнитуры (для возможности сразу прописать основное семейство шрифтов для страницы и изменять его лишь отдельных блоков);
— блоки с использование «неавтоматического» интерлиньяжа и интервалов;
— цветовая схема — сразу прописаны цвета для основных текстовых блоков (все используемые цвета не имеет смысла перечислять), цвета ссылок — по умолчанию, по наведению, посещённые; опорные цвета используемых градиентов и т.д.

Вот, пожалуй, основное. Как видите не так уж и много и не так уж напряжно для дизайнера учесть эти моменты. Зато время вёрстки сокращается ну наполовину уж точно! Буду рад, если кто-то воспримет это как руководство к действию, и хотя бы частично сделает свои макеты лучше — а вдруг доведётся вместе работать.

Отсюда: http://habrahabr.ru/post/173271/
Bot
Yandex Bot Yandex Bot is online now
 
Join Date: 05.05.2005
Реклама на форуме А что у нас тут интересного? =)
 
 
Abraxas
Гость
Default

Да, накипело у кого-то, дай ему Бог здоровья и нервов крепких.
 


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off




All times are GMT +4. The time now is 04:19 AM.


Powered by vBulletin® Version Kerk Edition
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Loading...