(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

За что HTML-верстальщики так не любят веб-дизайнеров

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

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

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 19.03.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
IBM DOMINO COLLABORATION EXPRESS AUTHORIZED USER ANNUAL SW SUBSCRIPTION & SUPPORT RENEWAL
WinRAR 5.x 1 лицензия
IBM RATIONAL Quality Manager Quality Professional Authorized User Single Install License + Sw Subscription & Support 12 Months
Microsoft Office 365 Персональный 32-bit/x64. 1 ПК/MAC + 1 Планшет + 1 Телефон. Все языки. Подписка на 1 год.
IBM RATIONAL Clearcase Floating User From Rational Clearcase Lt Floating User Trade Up License + Sw Subscription & Support 12 Months
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
Один день системного администратора
Delphi - проблемы и решения
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Отличается ли ДрифтКазино от беттинга? (32)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Реклама (6)
Добрый день. Какое продвижение сделать собственному бизнесу?
 
Пишу программы на заказ профессионально (3290)
Пишу программы на заказ на языках Pascal (численные методы, списки, деревья, прерывания) под...
 
Бесплатные прогнозы на спорт (1)
Сейчас много мошеннических прогнозистов, которые занимаются так называемыми раскрутками счетов,...
 
Топ рейтинг слотов 2021 года (4)
Среди огромного выбора азартных слотов...
 
 
 



    
rambler's top100 Rambler's Top100