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

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

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

P.S. Иллюстрированные примеры не выкладываю по, сами понимаете, каким причинам. Если есть какие-то вопросы — задавайте.
P.P.S. Спасибо НЛО!
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 273
  • +9
    Жизненно.
    А еще супер, когда дизайнер использует композиции слоев.
    • +10
      Это всё не только к HTML относится. К дизайнерам десктопных и мобильных приложений это относится в той же степени. Только там есть ещё много специфики.
      • +7
        Подтверждаю, как мобильный девелопер с достаточно большим стажем. Особенно про режимы смешения (особенно Multiply) и настройки шрифтов. И да, вертикальные градиенты в блоках, которые должны растягиваться по высотке.

        И еще одну просьбу добавлю, это касается в основном только мобильных — делайте по отдельной PSD-шке на экран, а не все вместе. Даже на моем относительно нестаром Macbook Pro с 8Гб оперативки, которого за глаза хватает для девелопмента, такие PSD-шки нещадно тормозят.

        Также было бы клево аттачить все использованные шрифты в ttf!
        • +3
          О да, как iOS девелопер полностью со всем согласен. Multiply/Overlay и вертикальные градиенты в резиновых блоках это прям хит какой-то, в каждом проекте встречается.

          Еще дополню по поводу ретины, обычно макеты рисуются под ретину, а в дальнейшем разработчиком просто уменьшаются. Отсюда вытекают две проблемы, размеры элементов (97х39 px), нормально такой контрол уменьшить не получится, приходится либо править, либо добавлять пустые пиксели. И однопиксельные линии на бордерах/бликах/тенюшках/иконках, я не могу их уменьшить до 0.5px линии.

          Ну а подход со стилями:
          зачем проставлять надписи один цвет, а потом использовать эффект «наложение цвета»???

          Мне дизайнер объяснил так: «Стили можно копировать»… А свою палитру под проект создать религия не позволяет??
          • 0
            Кстати интересно было, а зачем изначально рисовать под ретину? Экран для айпада в таком случае не влезает на монитор, и как раз возникают такие проблемы с размерами. да и девелоперам проще смотреть комментарии на обычном разрешении, когда мокап с комментами влезает на экран. А увеличить для нарезки отдельные элементы не проблема. (Конечно это все учитывая, что дизайнер сам делает нарезку)
            • 0
              Сразу под ретину рисуется, потому, что слишком много растра и прочей графики, которую намного проще уменьшить.
              А такое, что б дизайнер сам нарезал графику, я еще не видел. Нарезка даже стандартного UISegmentedControl довольно нетривиальная задача. А про сложные кастомные контролы я вообще молчу.
              • 0
                Всегда свои макеты для iOs режу сам.
                • 0
                  Да, вот макеты под андроид резать гораздо более увлекательная задача, если с ios я чертыхалась только один день, то с андроидом 3 и в итоге писала доку для себя же, что б не забыть всю эту радость с 9.path)
                  • 0
                    Согласен =) Хорошо, что под андроид мне приходится дизайнить очень редко =)
                    • 0
                      Радость называется 9patch. И там кстати есть тулза — draw9patch, которая позволяет смотреть что получится. Это если вы еще на глаз не можете растягивать.
                      • 0
                        Но это не уменьшает радости от пересохраннения этих кнопок во всех состояниях, для минимум трех размеров экранов. И название да, без точки точка пришла из того, что в файле это имеет окончание 9.png)
                        • 0
                          > Но это не уменьшает радости от пересохраннения этих кнопок во всех состояниях, для минимум трех размеров экранов.
                          Может есть смысл написать скрипт который сам во все разрешения будет сохранять?

                          > И название да, без точки точка пришла из того, что в файле это имеет окончание 9.png)
                          В названии patch а не path.
                          • +1
                            Хм, боюсь написание скрипта совсем не входит в сферу моих возможностей :)
                            Вы видимо пользователь андроида?
                            • 0
                              Это плохо что дизайнеры/художники не могут пользоваться своим же графическим пакетом.

                              Из чего вы сделали вывод что я пользователь андроида?
                              • +1
                                Предположение, профиль, вывод: )
                                Вы предлагаете мне в графическом пакете с художественным образованием писать скрипт, когда как минимум скрипт для сохранения слоев в отдельные файлы уже есть, (что изрядно помогает, да)
                                и скрипт не решит мне проблемы с ресайзом с эффектов слоя)
                                • +2
                                  Просто в данном контексте не понятно к чему было про пользователя.

                                  Почему то считается нормальным верстальщику/программисту уметь разобраться с фотошопом и самостоятельно все выгребсти от туда, разобрать слои, эфекты, сделать нарезки.

                                  А художнику/дизайнеру, прочитать главу про автоматизацию нельзя?
                                  • 0
                                    Про пользователя было так, наблюдение: )
                                    Ну, я например так не считаю, и делаю нарезку ресурсов и подробные комментарии, мне можно не писать скрипт? )
                                    Вообще, если говорить именно о вебе и верстальщиках, это ведь очень давний холливар, и в основном он касается начинающих верстальщиков и таких же начинающих дизайнеров. Либо фриласн, когда нет контакта друг с другом. При постоянной работе в команде вырабатывается удобный для всех способ передачи ресурсов.
                                    И да, я за разделение труда, и не рвусь в верстку (для этого ведь есть замечательные профессионал в своем деле), а нынешнем случае еще более не рвусь в программирование под мобильные)

                                    Упомянутая вами тулза, кстати, входит в пакет для разработки под андроид и отдельно не выкачивается и не ставиться как ни печально) Альтернатива только вот такая: android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
                                    • 0
                                      По честному мне все равно сколько дизайнер будет там делать нарезку, 5 минут или 3 дня. Просто мне не нравится, что отсутствие знаний у дизайнера своего же пакета, выливается в жалобы, что надо выдавать картинку аж в 3х размерах! (кстати вы же тоже жаловались :) )

                                      В итоге все та же проблема выливается дальше, если не дай бог нужно что то поправить в 30 слоях (или в одном слое, который задевает 30 других) и пере выгрузить для 3х разрешений. Работы по сути на 5 минут, но так как лень дизайнер будет сидеть день-два. Хотя казалось бы лень — двигатель прогресса, напиши скрипт в фотошопе :)

                                      Просто считайте что андроид сдк это и есть тулза (draw9patch), если вам так будет проще представлять, тогда это вообще ни чем не будет отличаться от любой другой программы :)
                                      • 0
                                        Возможность поныть, это весьма важная возможность)
                                        Это выдавать картинку в минимум трех! И это претензия совсем не к девелоперам, а так глобально к такой вот сложной стороне жизни)
                                        Но если вы думаете, что поправить что-то в 30 слоях это пять минут… И скрипт не решить проблему, когда например иконка должна изменяться в разных размерах, у нее может увеличиваться детализация например, скрипт за меня ее не додумает: ) Даже замечательная тулза slicy решает далеко не все и результат все равно надо отсматривать)
                                        Но в моем случае, как говорила выше решение уже есть, у остальных приходит свое решение со временем)
                                        • +1
                                          Скажем подвинуть на пару пикселей, из-за которых нужно пере выгрузить 30 слоев — это на пять минут. Изменения не значительные, а нытья много будет, так как делаться будет все руками.

                                          То что картинка может быть каждая своя, под каждое разрешение, тоже может быть и это правильно. Не каждый дизайнер захочет рисовать еще одну :)

                                          Скрипт поможет быстро выгрузить все состояния иконки.
                                          Простой пример — скины. В итоге имеем 3 файла, под каждое разрешение, в каждом по 30 слоев, каждый слой для одного элемента. Нужно что то поменять и все перевыгрузить. Будете руками делать? :)
                  • 0
                    Если мне не сразу понятно, как лучше нарезать определенный контрол, я иду к разработчикам и прошу их пояснить в к каком виде им будет удобнее получить графику. Неразрешимых проблем у нас пока не было. Хотя я от добровольца на этот процесс вместо меня не отказалась бы, но реальность против: )
                    Насчет растра, откуда у вас в макетах растр? Это графика для игр, иллюстрации? Потому что у меня сейчас все решается векторными объектами, которые в cs6 фотошопе ресайзить стало гораздо проще.
                    • 0
                      А трестируете мокапы вы потом просто на ретина-айпаде? Для меня критично еще и это, так как под рукой только обычный айпад и следовательно в его разрешении и смотреть удобнее.
                      • 0
                        Мокапы кладутся в дропбокс и тестируются на всех девайсах.
                        • 0
                          Ваши политики компании не запрещают дропбокс, вам хорошо)
                          В моем случае, кроме сложностей с дропбоксом, мне проще в принципе просмотреть результат на своем устройстве. Хотя вот для айфона мы чаще рисуем в ретина версии
                      • 0
                        Полгода назад я бы с вами согласился, но сейчас как раз работаю с дизайнером, который режет макет и знает про resizableImageWithCapInsets! Прямо чудо какое-то! Правда он сидит за столом напротив, что облегчает коммуникацию.
                        А про 0.5 пикселя — как оказалось, это не проблема, на 3Gs и втором айпаде, что более важно, рисуется 1px. Некратные размеры картинок идут от криворукости дизайнера — нормальным мобильный дизайнер выставляет сразу сетку по 8 пикселей и все ровняет по ней.
                        • 0
                          Хм, видимо Вам не повезло. Прекрасно видел как нарезают и по просьбе перенарезают.)
                      • +1
                        Пару раз приходилось убеждать дизайнера, что 12 и 17 — это не в 2 раза больше. После этого, что 12 и 19 — всё равно не в 2 раза больше…
                      • +1
                        Это не просто клево, это обязательно! Тем более, что при этом у шрифта не должно быть проблем с лицензией.
                        К сожалению об этом не задумываются очень многие, и пока я не представляю что можно сделать для решения проблемы в глобальном плане. Учитывая, что мне не всегда удавалось убедить дизайнеров работающих со мной не называть файлы малоосмысленными именами.
                      • 0
                        Но дизайнеры мобильных приложений разве не сами режут графику?
                        • 0
                          Мы пробовали, но оказалось, что проще самому все нарезать, слишком много тонкостей.
                      • +11
                        Ещё бесит, когда в psd-шнике какой-нибудь блок размером 239 пикселей.
                        Ну сделай ты четное красивое число, жалко тебе чтоли? И ведь не влияет ни на что (как правило).
                        Нет, залепил как пришлось, без сетки и потом подогнал по месту…
                        Вроде бы мелочь, а приходится подправлять.

                        • –2
                          А зачем это поправлять-то, ведь не влияет ни на что (как правило).
                          • 0
                            Очень влияет, т.к. при уменьшении на не-ретиновых дисплеях изображение будет некошерно размытым. Поэспериментируйте, если не лень, если лень — поверьте на слово :)
                            • +1
                              А где можно почитать подробнее? Пробовал гуглить «веб дизайн картинки кратно» — не нашел.
                              Попробовал уменьшение картинок 239 и 240 — на глаз оба нормально, что с круглым размером что без (Хром, винда). Что есть кошерное размытие? Никогда не слышал раньше.
                              • 0
                                Ах, простите, я увлекся и перескочил с мобильной ветки. В вебе не знаю, разница есть на мобильных устройствах.
                        • +4
                          Где таких дизайнеров находят? Мне достаточно было изучить основы верстки, чтобы проникнуться спецификой этой работы и начать раскладывать слои/объекты в нужные папки иерархически для верстальщика.
                          Да и просто уважать надо чужой труд и работать командно.

                          • +11
                            А вот мне интересно где такие дизайнеры как вы водятся. Я таких никогда не встречал.
                            • +4
                              Есть класс дизайнеров-выходцев из технологов. Они как раз почти все такие.
                              • 0
                                Я наооборот :) Углубляюсь в технологии. Интересней становится, чем дизайн.
                                • +2
                                  А я вот мечусь между разработкой и дизайном, все нравится)
                                  • –2
                                    +1
                                    Привет вам и комментатору выше :)
                                • 0
                                  Не всегда, я имею вполне художественное образование, но при этом добавляю сетки и комментарии к мокапам с первых опытов в веб-дизайне: )
                                • 0
                                  Идеал только в теории, это же можно отнести и к верстке — этот прекрасный момент, когда звонит заказчик и вносит 26ю правку, уже влом и просто вписываешь в конец css. Так же бывает и с макетами, вроде как начало разложил, но раз менял, два меня и т.д. и вот уже не так чист макет :(

                                  Правда когда верстать не мне, лично меня как в некотором роде технолога и почти программиста по образованию, начинает мучать совесть и я чищу и привожу в порядок макеты :) ну насколько возможно к данному этапу)
                                  • 0
                                    Таких нужно самим выводить.
                                • +4
                                  У нас в компании принято от дизайнера требовать спец.страницу с кастомными элементами во всех состояниях (кнопки, радиобаттоны и т.п., при наведении, недоступные и прочее) а так же с наборами заголовков, таблиц и т.п. всей контентной шелухи, которая очень влияет на конечный вид рабочего сайта.
                                  • 0
                                    Не только у вас, плюс еще добавляется я мокап с наложенной поверху сеткой и комментариями про размеры шрифтов и прочее, что в отдельный файл не вместить.
                                    • 0
                                      Я сам всегда так делаю =)
                                    • –15
                                      Я не верстальщик и не дизайнер. Но мне пару раз доводилось делать мелкие сайтики. Конечно, я понимаю, что совершенно разный объем работы и уровень т. д. Но! Мне даже в голову не пришло верстать в фш. Почему сразу не вставлять в макет? Понятно, что графика готовится в фш, но ведь ее сразу можно сохранить и вставить в css. Т. е. по сути создание шаблона сайта в фш (wysiwyg по сути) тоже самое, что описание в css. Но при этом можно сразу делать резину, видеть, как оно будет в реальности и т. д. Это исторически сложилось, что дизайнер и верстальщик — разные люди? Почему эти две профессии не пытаются совместить?
                                      • +11
                                        Потому что не надо смешивать. Не каждый хороший дизайнер окажется хорошим верстальщиком, и далеко не каждый грамотный верстальщик нарисует вам красивый дизайн.

                                        Я, к примеру, неплохо вроде бы верстаю, но то, что я пытался надизайнить в ФШ, выглядит просто ужасно. Я вижу этот мрак, понимаю, что это мрак, но поделать ничего с собой не могу.

                                        Речь в топике, скорее, о том, что если уж людям 2-х разных профессий приходится сотрудничать друг с другом, то неплохо было бы иметь хоть какое-то представление о сути работы напарника.
                                        • 0
                                          Мне просто такая постановка работы напоминает ситуацию, когда например один программист пишет код на относительно высокоуровневом языке, например C, а второй, вручную все это переписывает на непосредственно ассемблер.

                                          Если изначально дизайн делается в графическом редакторе, то почему этот редактор не может генерировать код сам? (На самом деле может, например тот-же Adobe Dreamweaver, насколько я понял из его описания, он это и делает, но то, насколько он широко используется и удобен в работе — я совершенно без понятия).

                                          Если я не прав — поправьте.
                                          • 0
                                            Dreamweaver — это WYSIWYG-редактор хтмл- и цсс-кода, да еще и с какой-то интеграцией с фотошопом. Штука, вообще-то, хорошая, я сам с него начинал. Но вот как-то так получается, что в итоге проще, быстрее и удобнее делать верстку в обычном хорошем текстовом редакторе, а не тыкать мышкой. Потому что код предсказуемый. Справедливости ради, у Dreamweaver-а с этим было неплохо, особенно по сравнению с тем, что генерил Ворд, но когда кидался что-то допиливать, понимал, что лучше бы сам писал.

                                            Дело в том, что любой подобный редактор так или иначе навязывает вам свою логику, а ведь прогресс не стоит на месте, и то, что раньше в нём было делать приемлемо, сейчас делается просто по-другому, и руками опять же легче. Например, есть такая интересная штука как knockout.js (к стыду своему, узнал я о ней совсем недавно). Эта замечательная библиотека не только требует использования своих специфических атрибутов, но и требует местами вообще специфической вёрстки (с использованием циклов, условий и т.д.). Как это переварит Дримвивер, если пытаться сделать такое в WYSIWYG-режиме? Да никак не переварит. Ругаться он будет.

                                            А насчёт постановки работы программистов… Это значит только то, что руководитель проекта идиот, потому что у него 2 программиста решают одну и ту же задачу. А верстальщик и дизайнер решают разные задачи.
                                        • –1
                                          Не по ФэнШую )
                                          • 0
                                            ага, заодно уж давайте тогда архитектора посадим за башенный кран, инженера поставим за токарный станок, а дизайнера интерьеров поставим гипсокартон нарезать и ламинат укладывать.
                                            • +2
                                              Вообще-то, инженер, делая чертеж детали, должен знать, как будет действовать токарь/фрезеровщик. Существует куча правил и ГОСТов, даже просто по нанесению размеров — все ради того чтобы исполнителю было проще. Поставите вы, скажем, вместо суммарного размера цепочку промежуточных — и токарю придется их складывать, чтобы понять, какой длины болванку взять. Примените нестандартную резьбу, когда можно было бы обойтись стандартной — и ее придется отдельно нарезать а себестоимость детали резко возрастет. То же самое и с архитектором — каменщик не выложит вам стенку толщиной в 3.22 кирпича.
                                              • +1
                                                Вообще-то «чистого» архитектора особо не волнует проблема «3,22 кирпича», его ответственность — эскизы да макеты, максимум чертежи с указанием общих габаритов. Проблема технической и технологической реализуемости волнует архитектора-проектировщика, в зоне ответственности которого лежит полный выпуск проектной документации. Наверное, «HTML-верстальщики так не любят веб-дизайнеров» за то, что последние считают себя «чистыми» дизайнерами, за то, что они не считают необходимым заботиться о технологичности их макетов, о цене (в прямом и переносном смысле) реализации их «полета мысли» верстальщиками и хоть каком-то облегчении их работы. В этом они сродни архитекторам (дизайнерам), которые на вопрос инженера-проектировщика (верстальщика) «каковы ширины проемов и пролетов?» (столбцов)(столбцов) отвечают «ширина фасада указана, возьми линейку, замерь, вычисли масштаб, замерь ширину проемов и пролетов и вычисли их ширины в натуре» («по пикселям посчитай»). Или на замечание «при таких размерах армирование бетонных конструкций должно осуществляться титановыми сплавами особой прочности, распространенные марки стали не подойдут, не говоря о стандартных деталях» («тут придется делать кучу растра, а не обычные правила CSS к куче вложенных блоков применять, не говоря о применение CSS к одному блоку») говорят «ну вы же нашли выход? какая разница во что это обойдется заказчику, даже лучше, больше прибыли в абсолютных цифрах при той же относительной норме».
                                              • 0
                                                Да, и давайте заставим чиновников работать.
                                                )
                                            • –5
                                              Ребята, вы расслабились. За что деньги получаете?
                                              Профессионализм верстальщика определяется тем, что из фигового макета он сможет сделать красивый сайт.
                                              Да, это типичные ошибки дизайнеров, но это все исправимо. Поговорите с дизайнером — пусть заменит шрифты/сетку. Главное идти на диалог и как можно быстрей говорить об узких местах заказчику или напрямую дизайнеру.
                                              • +7
                                                Это не всегда возможно. Бывает и так, что заказчик сразу заказал дизайн у одного фрилансера, одобрил результат, не особо в этом разбираясь (картинка красивая, а техническое исполнение побоку), и отдал на верстку другому фрилансеру. И что с таким делать? Дизайнер уже свои деньги получил и, вполне возможно, на просьбу перерисовать ответит посылом нафиг.
                                                • +1
                                                  тогда общайтесь с заказчиком
                                                • +2
                                                  А чем определяется профессионализм дизайнера?
                                                  • 0
                                                    один из критериев — следование этим принципам, но мы живем в неидеальном мире — нужно уметь работать с плохим дизайном
                                                  • +1
                                                    «Ребята, вы расслабились. За что деньги получаете?». Эммм задам такой же вопрос Вам и всем дизайнерам, которые работают ради «фигового макета»… Вы деньги получаете — будьте добры отрабатывайте их
                                                    • 0
                                                      На это отвечу только одно — почему вы тогда берёте себе специализацию «ВЕБ-дизайнер», а не просто «дизайнер»? Специфика ни к чему не обязывает? Я же привёл только наиболее противные косяки. Я не требую, как, например, в одном из документов конторы, в которой я трудился "Дизайнер должен особо оговаривать, если для реализации закруглений и теней можно пользоваться средствами CSS3, без использования графики, пренебрегая отображением таких элементов в браузере IE." — я даже против — такую специфику дизайнер не обязан знать. CSS постоянно развивается — за этим надо следить. И следить должен именно верстальщик. Более того, дизайнер не должен быть в курсе того, кем (в контексте браузеров) поддерживаются данные свойства и т.д., поэтому не стоит ему выполнять львиную часть работы верстальщика, но уж привести макет в удобоваримый вид — будьте добры!
                                                      • 0
                                                        Вы зря меня спрашиваете, я front-end разработчик. И очень немало наверстал сайтов, и с плохими .psd и с хорошими. Ну да, приятней работать, когда у тебя все по сетке, слои именованы, сложены по папочкам, отдельно стайл-гайды и спрайты.
                                                        Но так бывает редко, и за это не нужно ненавидеть дизайнера — а просто советовать ему, как сделать лучше, для предотвращения дальнейших трудностей
                                                    • +7
                                                      Хороший верстальщик от обычного тем и отличается, что может решать такие вопросы в рабочем порядке. Никакой дизайнер всего для вас не нарисует. Отнеситесь к проблеме творчески. К слову, веб-технологи Хабра умудрялись верстать и по бумажным эскизам.
                                                      • +2
                                                        Совершенно согласен — дизайнеры почти всегда допускают эти «косяки». С опытом исправляешь их просто на автомате, не задумываясь.
                                                        • +2
                                                          А потом: дизайнер справился за пять часов (молодец), а вы — криворукие разработчики — уже два дня колупаете! Потому что дизайнер прислал макет девелоперу в psd со свойствами слоя (у него Linux Mint и GIMP), слоя называются Слой 1… 146 и у контролов только один стейт — normal. Как они выглядят нажатыми и выделенными — выдумывай самостоятельно. Ну и конечно все нарисовано только в одном разрешении.
                                                          • 0
                                                            К слову, у меня есть куча вопросов и к технологам, и к верстальщикам, и к дизайнерам Хабра. Но это только к слову!
                                                            • 0
                                                              Мне кажется, что имея такую статью, можно показать ее дизайнеру один раз, когда одна из подобных проблем всплывает в процессе работы. И тогда половина возможных проблем во взаимоотношениях будут решены автоматически. Автор — молодец.
                                                            • +4
                                                              > б) Сглаживание шрифтов всегда должно быть отключено! И не надо меня «лечить» что кто-то из браузеров там что-то умеет.

                                                              Вы серьезно, какие хоть сколько-нибудь популярные браузеры не умеют сглаживать шрифты?
                                                              • +5
                                                                Браузеры не умеют сглаживать как фотошоп, так что во избежание гемора в дальнейшем лучше его отключить.
                                                                • –3
                                                                  На Маке практически один-в-один.
                                                                  • +3
                                                                    Один в один как что? Как Sharp, Crisp, Smooth или Strong?
                                                                    • +2
                                                                      Crisp.
                                                                      На самом деле не важно где как, главное — без сглаживания почти нигде не осталось.
                                                                      • –3
                                                                        только почему тогда каждый второй новый сайт отключает сглаживание?
                                                                        • +2
                                                                          Где это?..
                                                                          • 0
                                                                            -webkit-font-smoothing
                                                                            • +2
                                                                              вы преувеличили про «каждый второй»
                                                                              • +2
                                                                                Примерно в 600 миллионов раз, не больше.
                                                                              • 0
                                                                                Имелись ввиду сайты. Глупо было бы спрашивать про свойства — в каждом западном блоге о дизайне/вебе уже написали и про font-smoothing, и про text-rendering.

                                                                                Причем, ни один из сайтов, которые я видел, не отключал сглаживание, а выбирал значение antialiased.
                                                                                • 0
                                                                                  так это и есть ничто иное как отключение нативного субпиксельного сглаживания
                                                                                  • +2
                                                                                    Согласен, что отключение нативного (да и то — не везде, пример с Маком тут еще актуален), но не вообще сглаживания, как вы написали в верхнем комментарии. А я как раз и говорил, что сглаживание шрифта теперь повсеместно, а не как хочет автор — по-стариночке выбирать в Photoshop «None».
                                                                          • +5
                                                                            Интересно, минусуют, наверное, те, кто сразу бежит отключать сглаживание шрифтов после установки винды?..
                                                                            • +5
                                                                              Вот-вот. Как это, шрифты без сглаживания? Как в Win98? Вот так?
                                                                              Скрытый текст
                                                                              image
                                                                              • –2
                                                                                У меня дома 19' ЭЛТ и ХР — вопросы? Или думаете таких мало? Или это не универсальное решение?
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                  • 0
                                                                                    1600x1200
                                                                                    Ок, Ваше решение данной проблемы? Какой тип сглаживания следует использовать дизайнеру? чтобы это адекватно отображалось во всех браузерах и ОС? Да ещё с учётом того, что в той же «семёрке» это сглаживание какждый (кто долезает до этих настроек) подгоняет визуально под свой вкус и цвет?
                                                                                    С «none» в ФШ никогда проблем не было, с любым другим типом — куча, вплоть до невозможности вместить текст в жёстко заданные размеры блока.
                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                  • 0
                                                                                    Конечно, нет. Т.е. вы предлагаете изначально дизайнеру (а за ним и верстальщику) брать за ориентир старую ОС и недоступность каких-то технологий? При том, что Natural ClearType включен везде на новых ОС сразу.
                                                                                    • 0
                                                                                      А «Natural ClearType» работает исключительно для браузеров, и игнорирует рендеринг текста в ФШ?
                                                                                      • +1
                                                                                        Вы не поверите. В Photoshop при создании макета текст рендерится так, как указано в настройках его рендера в Photoshop-е (что, собственно, логично — в Photoshop мы получаем на выходе растровое изображение).
                                                                                        • 0
                                                                                          Да не очень-то и логично. Виндовую и Маковскую CMS (Color Managment System) он ведь учитывает. Почему не брать настройки рендера текста из Оси? Впрочем, это риторический вопрос.
                                                                                          • +1
                                                                                            (догадка) Потому что CMS используется только для отображения, а не для рендера?
                                                                                            • 0
                                                                                              CMS никаким образом не затрагивает внутренности документа, который вы создаете. Она используется, грубо говоря, как прослойка между Photoshop-ом и вашими устройствами ввода/вывода.

                                                                                              А системный рендер текста использовать бессмысленно хотя-бы потому, что он заточен исключительно под оптимальное отображение текстов конкретно на вашем дисплее.

                                                                                              Чтобы было понятнее:

                                                                                              1) сделайте 800% увеличение скриншота черного текста на белом фоне с ClearType под WIndows XP (где используется субпиксельный антиалайзинг);
                                                                                              2) обратите внимание на то, что многие точки вовсе не монохромные;
                                                                                              3) задайтесь вопросом — «а нахрена мне это цветные точки в печатном макете?»

                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    • 0
                                                                                      Crisp тоже создает проблемы, тот же ариал в 12 px bold при цвете #000000 выглядит как серый в фотошопе, но будет выглядеть как черный в вебе. Да и вообще этот crisp вызывает у меня субъективное ощущение что, с моим зрением что-то случилось и все расплылось )
                                                                                      Для меня проблема решала тем, что клиента предупреждали о подобной разнице, благо были сплошь адекватные клиенты )
                                                                                      • +2
                                                                                        Да это очевидно что сглаживание в шопе полное дерьмо. Объяснить все это можно. Более того! играться со шрифтами в верстке в разы удобнее чем в макете. Так что можно сослаться на утверждение шрифтов и их цветов конкретно при сдаче проекта в firebug.
                                                                                        • 0
                                                                                          В последней версии стало лучше, совсем чуть-чуть, почти не видимо глазу, но лучше. С версткой согласна полностью.
                                                                                • +2
                                                                                  Это фотошоп не умеет сглаживать как браузеры. Сглаживание шрифтов это вообще вещь патентованна разработчиков операционной системы. Фотошоп не имеет права юзать ту, что придумал microsoft. А на линуксе для меня так вообще вырви глаз а не сглаживание. Но это все сугубо индивидуально. Здесь много людей, кто считают сглаживание в линуксе хорошим.
                                                                                  • +1
                                                                                    Вероятно, вы не видели нормального линуксового сглаживания, например, с infinality. Я очень много настраивал и cleartype, и infinality, и скажу вам, что на шрифты в windows смотреть больше не могу.

                                                                                    Вот ваше сообщение с моими настройками:
                                                                                    Скрытый текст
                                                                                    image
                                                                                    • +2
                                                                                      Такое ощущение, что у вас межсимвольный интервал уменьшен. Видимо это субъективно, но читать сложнее.
                                                                                      • +1
                                                                                        Спасибо, смотрю 1 в 1. Не видел в линуксе я резких шрифтов как на винде и у вас не вижу). Да уже где то обсуждали это и голосовали, все вышло и выходит просто от привычки. Посути неважно, просто еще один повод понять, что нет стандартов в сглаживании на разных платформах
                                                                                        • 0
                                                                                          i.imgur.com/vPs3Vcu.png — вот вам с профилем win7
                                                                                          i.imgur.com/qL4Vbdc.png — и с настройками от win7
                                                                                          И мне так совершенно не нравится, читать неудобно. Правда, у меня маленький экран с DPI 125, поэтому «ужирнение» шрифтов здесь более подходит. И они еще затемняются (контраст чуть меньше стандартного).
                                                                                          • 0
                                                                                            Здорово. Да я не против) Это хорошо что есть чем в меня тыкнуть)
                                                                                      • +1
                                                                                        Патенты тут ни причем. Субпиксельное сглаживание могут делать все, а вот брать готовые реализации (тот же ClearType — только по лицензии). Так что никто не мешает фотошопу использовать тоже субпиксельное сглаживание. Просто разработчики фотошопа исходят из того принципа, что изображение должно быть в точности одинаковое на всем железе, а субпиксельное сглаживание — штука аппаратно зависимая (и зависит от расположения субпикселей на мониторе). В особенности любят экспериментировать с субпикселями на мобильных устройствах.

                                                                                        А вот вам пример разного расположения субпикселей:



                                                                                      • 0
                                                                                        Нажрался я с этим сглаживанием, в результате чего пришел к следующему приему, все шрифты, размер которых меньше 17pt, (в фотошопе), сглаживание отключается, т.е. none, а те шрифты, чьи размеры больше 17pt, оставляется обычное фотошоповское сглаживание. В результате получается картинка очень похожая на то, как отображают Crome, Opera и FireFox.
                                                                                        Потому что ну не возможно, на картинке дизайнеры рисуют все красиво, аккуратно, а когда начинают верстать, получается ужас.
                                                                                      • 0
                                                                                        А уж тем более, что это делается и на уровне ОС в большинстве случаев. Во всех современных — вообще дефолтно.
                                                                                        • +1
                                                                                          Причём в разных ОС и сглаживание разное будет. В MacOS больше похоже на Crisp, в Ubuntu на Strong, в Windows… не помню уже точно.
                                                                                          • 0
                                                                                            В Windows похоже на Sharp.
                                                                                            • +2
                                                                                              И то у определенной гарнитуры) нет ничего похожего. У винды сглаживаение с цветами
                                                                                              Ну
                                                                                              Патент тут и все!
                                                                                              • 0
                                                                                                Ну так это «радуга», в идеале это должно попадать точно в субпиксель, т.е. вы не должны видеть эту радугу на своем мониторе без зума, конечно же.
                                                                                                • 0
                                                                                                  Мне не позволяет скромность нагнуть человека в монитор) Пошел по другому пути.
                                                                                                  • 0
                                                                                                    Я о том, что это не «сглаживание с цветами» и не у windows, это называется субпиксельным сглаживанием и реализуется везде примерно одинаково.
                                                                                                    • –3
                                                                                                      Увы! монополист здесь микрософт.
                                                                                                      На линуксе вы не найдете радуги в шрифтах, и именно по этому они там особенные.
                                                                                                      А так да, субпиксельное примерно одинаковое но не с радугой)

                                                                                                      УУУУууууу
                                                                                                      Microsoft has several patents in the United States on subpixel rendering technology for text rendering on RGB Stripe layouts. This had caused FreeType, the library used by most current software on the X Window System, to disable this functionality by default.[5]

                                                                                                      Apple was able to use it in Mac OS X due to a patent cross-licensing agreement.[6]
                                                                                                      en.wikipedia.org/wiki/Subpixel_rendering

                                                                                                      • 0
                                                                                                        а вот, вру я все же похоже.
                                                                                                        habrahabr.ru/post/173271/?reply_to=6020577#comment_6020629

                                                                                                        Но на счет легальности подобного, я все же не уверен до конца. ( Ну само собой это чисто для галочки )
                                                                                                        • 0
                                                                                                          Ну хрен знает
                                                                                                          Скрытый текст
                                                                                                          image
                                                                                                          • +1
                                                                                                            Да да да) Я прямо выше отписал уже. Но насколько мне известно, там вопрос о том чтобы это было доступно из коробки в той же ubuntu не стоит вроде все из за тех же патентов. Может я ужо устарел.
                                                                                                            Во:
                                                                                                            Font Hinting patent conflict

                                                                                                            Some open source projects such as FreeBSD or Linux, have included FreeType with font hinting functionality disabled or degraded to avoid the issue of software patents held by Apple Incorporated.[12]

                                                                                                            Since May 2010, the last of all conflicting software patents expired,[12] allowing FreeType's TrueType font hinter to be used in open source. Many of the operating systems which disabled the renderer now give the user the option to enable it. In Fedora, freetype-freeworld was switched from the proprietary yum repository to the free repository

                                                                                                            en.wikipedia.org/wiki/FreeType

                                                                                                            Похоже я устарел на 3 года хотя… может это вообще не про то)
                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                            • 0
                                                                                              Century Gothic вообще не стоит в вебе использовать в размерах меньше 17 пикселей, получается страх.
                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                            • 0
                                                                                              Крайне редко. Крайне! Да, ручками. Шрифты не на глаз а через панель шрифтов — выделяем текст и смотрим параметры (каждого отдельного блока). margin/padding — через фотошопную линейку, хорошо если проведены «направляющие», иначе приходится +800% зума и проводить их самостоятельно.
                                                                                            • +7
                                                                                              Было бы просто прекрасно, если бы дизайнеры рисовали руководствуясь этим!
                                                                                              Но они живут на Марсе и в 80% процентах случаев используют Myriad Pro…
                                                                                              • –2
                                                                                                Мириад про стоит на 80% компах с видной. Ставьте его + font-family и будет счастье
                                                                                                • +4
                                                                                                  я понимаю Россия, на лицензии всем пофиг, но всё-таки adobe запретил использовать данный шрифт везде, кроме фотошопа и в pdf-е вроде отдавать можно…
                                                                                                  • 0
                                                                                                    Так не вставляйте его через Font-face, а просто задавайте как свойство. У кого есть — увидят его, у кого нет — увидят эриал
                                                                                                    • +1
                                                                                                      В Тайпките он есть. Можно юзать на вебе.
                                                                                                    • 0
                                                                                                      Sans serif гугл вебфонтс и не парьтесь с myriad
                                                                                                      Последний ставится вместе с каким либо продуктом от Адоби.
                                                                                                      • +1
                                                                                                        И вокруг куча людей у которых стоит Photoshop или ещё что-то от Adobe?

                                                                                                        Myriad Pro в некоторых случаях можно заменить на Trebuchet MS.
                                                                                                        • 0
                                                                                                          Я как раз советовал Sans serif заместо Myriad
                                                                                                          А он ставится вместе с акробатом, а акробат довольно распространенная программа. (Только вот с ридером ли? Не уверен точно)
                                                                                                          • +1
                                                                                                            Myriad Pro не ставиться с Acrobat Reader. Инфа 100%.

                                                                                                            А просто sans-serif — это «а выведи сюда дефолтный sans-serif шрифт клиента». Там что угодно может быть. На Myriad врядли будет похоже.
                                                                                                            • +1
                                                                                                              Живота прошу! Спутал я его!

                                                                                                              Конечно чтоже PT Sans как замена Myriad
                                                                                                  • +1
                                                                                                    в) С умом использовать эффекты — зачем проставлять надписи один цвет, а потом использовать эффект «наложение цвета»??? Зачем использовать внешнюю и внутреннюю тень одновременно? и т.п. Градиент — ладно, оговаривается отдельно…

                                                                                                    Потому что можно красить текст тремя способами:
                                                                                                    1. color overlay через свойства слоя
                                                                                                    2. CMD+backspace
                                                                                                    3. Выделение текста и закраска через панельку цветов

                                                                                                    Далеко не всегда удобно пользоваться одним и тем же способом. Но я не вижу сложностей в том, чтобы узнать цвет этого слоя верстальщику.

                                                                                                    А внешняя и внутренняя тень — потому-что нужно одновременно сделать блик и тень. Эти два свойства идеально подходят для текста, например.

                                                                                                    б) В слоях и эффектах НИ В КОЕМ СЛУЧАЕ не использовать какой-либо режим наложения слоёв кроме Normal, поскольку он зависит от нижележащих слоёв — и это распространяется даже на сведение слоёв и вставку с помощью графики. Это вообще эпично! Как влепят какой-то overlay, и выход тут один — сводить все слои и обтравливать элемент, а это, надо заметить, порой сродни отрисовке в векторе — особенно если всякие свечения/тени с большим радиусом.

                                                                                                    Абсолютное большинство эффектов прекрасно сливается. Есть исключения, конечно, но их нужно просто отправлять обратно дизайнеру, чтобы не тупил в следующий раз.

                                                                                                    а) Хорошо бы иметь готовый css-спрайт со всеми оформительскими элементами и проставленными направляющими — но это из области НФ!
                                                                                                    Если вы расскажете — как это делать, я буду делать это с удовольствием.

                                                                                                    • +2
                                                                                                      1) Вам трудно сразу задать нужный цвет тексту — а мне выкручивать увеличение на максимум и протыкивать пипеткой? (именно протыкивать — поскольку ещё сглаживание «гадит»);
                                                                                                      2) Это нереализуемо через css — вставляйте текст картинкой. Вам по душе такой вариант?
                                                                                                      3) Абсолютное большинство эффектов прекрасно НЕ сливается — уж поверьте! Насмотрелся…
                                                                                                      4) Берём всю оформительскую графику и копипастим её в новый документ. Различные состояния одного элемента (ховер, фокус, клик) распологаем друг под другом по вертикали. Причём именно сам элемент, поскольку эффект (тень, например) может выходить за рамки первоначального состояния. А потом уже проводим направляющие по границам «максимального» эффекта одного элемента.
                                                                                                      • 0
                                                                                                        1. Зачем тыкать пипеткой?
                                                                                                        Type Tool на текст и клик в поле цвета — вот вам и hex нужного цвета. Никуда пипеткой не нужно тыкать.

                                                                                                        2. Нормальные ребята простой текст так не делают. Подобные эффекты обычно висят на кнопках.

                                                                                                        3. Не верю, потому-что знаю. Вы просто не совсем понимаете механизм.

                                                                                                        4. Я так понимаю — это условные спрайты? Исключительно для последующей нарезки?
                                                                                                        • 0
                                                                                                          1. Я про это говрю — я так и хочу. Но вместо этого дизайнер включает наложение цвета, наложение градиента и прочую муть… Вот и сиди «протыкивай пипеткой».
                                                                                                          3. Механизм чего? Как работают режимы наложения?
                                                                                                          4. В большинстве случаев да. А иногда действительно делают png из всего файла/слоя (если он приложен, конечно).
                                                                                                          • 0
                                                                                                            1. Тут еще проще, чем тайп-тулом. Один клик — выделить слой, второй клик в свойство слоя color. Третий клик — цветовое поле.
                                                                                                            Все.

                                                                                                            3. Как клеить правильно.

                                                                                                    • +1
                                                                                                      Может, это от лени, но жутко вымораживает любовь дизайнеров к кастомным селектам-чекбоксам-радиобаттонам! Особенно когда это нужно и под ИЕ
                                                                                                      • +1
                                                                                                        что мешает использовать label+input?
                                                                                                        • 0
                                                                                                          с селектом не покатит — нужно кастомный виджет использовать
                                                                                                          • –3
                                                                                                            для селектов существует куча разных готовых решений в связке html+js. Да и самому можно написать, делов-то: список ul и десяток строк на js / jquery.

                                                                                                            Вообщем вопрос не в «дизайнеры козлы делают все кастомное», а в том, что верстаки ленивые или неумеющие.
                                                                                                            • +1
                                                                                                              Это потом после кучи таких решений страница сайта весит по 15 мб без учета графики, и при загрузке страницы чуть ли не вешает браузер?
                                                                                                              • –4
                                                                                                                1. Учитесь оптимизировать
                                                                                                                2. Если использовать все стандартное, то и сайт будет уг… и опять же нужно думать для чего сайт (в плане красивостей)
                                                                                                            • +1
                                                                                                              ОК. Как Вы относитесь к тому, что по блажи дизайнера стандартный селект вдруг должен раскрываться исключительно вверх? Готовое решение мнеприведите пожалуйста!
                                                                                                              • –3
                                                                                                                В чем проблема сделать UL с bottom: 0? Если Вам это ни о чем не говорит, то это печаль
                                                                                                                • 0
                                                                                                                  1.стандартный селект
                                                                                                                  2. Если у родителя overflow:hidden?
                                                                                                              • +1
                                                                                                                Во-первых, написать кастомный селект, который будет обладать тем же функционалом, что и нативный — это вам не дульки воробьям показывать. Например, организовать обработку нажатий клавиш клавиатуры или выбор элемента при наборе его первых символов.

                                                                                                                Во-вторых, насколько вижу по реакции верстальщиков (я сам программист), кастомизировать готовое решение — тот еще гемор.

                                                                                                                А стандартные селекты очень даже ничего — в бутстрапе, например, их слегка обвешивают стилями, а выглядят прилично.
                                                                                                            • +2
                                                                                                              То что потом эти кастомные контролы выпекаются полусырыми. Поддержка клавиатуры? Поддержка accessibility? Прорисовка всех возможных состояний (disabled, mouse hover, mouse up, down, click)? Нет, не слышали.
                                                                                                              • +1
                                                                                                                А еще ими дико неудобно пользоваться со смартфонов.
                                                                                                          • 0
                                                                                                            больше всего не люблю когда делают для слоя, предполагаемого прозрачность на шаблоне overlay или пр.
                                                                                                            оригинал очень трудно получить.
                                                                                                            • 0
                                                                                                              Покажите пример, попробую явить чудо в макете)
                                                                                                            • –2
                                                                                                              > Хорошо бы иметь готовый css-спрайт со всеми оформительскими элементами и проставленными направляющими
                                                                                                              Это не задача дизайнера,
                                                                                                              а задача верстальщика.

                                                                                                              Кроме того, css спрайты чем дальше тем больше уходят в прошлое.
                                                                                                              В условиях поддержки ИЕ8+ в css спрайтах нет никакой необходимости. Это архаизм.

                                                                                                              • +4
                                                                                                                demimurych поясните, пожалуйста, почему вы считаете что при поддерке ИЕ8+ нужно отказываться от спрайтов? Я всю жизнь думал, что они нужны для сокращения числа запросов к серверу и для моментального изменения, скажем, икнки, при ховере. Для иконок, конечно, в последнее время модно использовать шрифты и прочее SVG, но это все равно не универсальное решение.
                                                                                                                • 0
                                                                                                                  тоже интересно, чем ие8+ такие особенные
                                                                                                                  • 0
                                                                                                                    Нормальной поддержкой работы с data:image/
                                                                                                                    для которой спрайты не нужны как класс, и сохраняют всю гибкость работы как с обычными изображениями без ограничений связанными с работой со спрайтами и бэкграундами.
                                                                                                                    • 0
                                                                                                                      спрайты проще модифицировать
                                                                                                                      • 0
                                                                                                                        Предпологаю что вы не знакомы с инструментами, которые в ваши шаблоны ставят data:image автоматически
                                                                                                                        Когда вы используете такие инструменты, работа с data:image не сложнее прописывания урла к изображению, в отличии от спрайта.
                                                                                                                        • 0
                                                                                                                          Виноват,
                                                                                                                          какой посоветуете?
                                                                                                                          • 0
                                                                                                                            Зависит от того каким образом вы работает с css
                                                                                                                            например в sass есть плагин компасс в котором есть необходимое расширение для этого.

                                                                                                                • +1
                                                                                                                  Вы описали не веб-дизайнера, а какого-то дурачка. Веб-дизайнер по определению знает про веб-технологии и учитывает их в разработке. Так что эта статья могла бы с тем же успехом называться «за что профессионалы не любят профессионалов» и состоять из двух слов: «За непрофессионализм».
                                                                                                                  • 0
                                                                                                                    увы, но действительность такова, что не все дизайнеры представляют что такое вёрстка и с чем её есть…
                                                                                                                    встречал лично psd, в которых шапка для стандартного шаблона в 1000px состояла из 300 неадекватно подписанных и не выделенных в отдельную папку слоёв… чуть ли не каждая загогулина а фигурках была отдельным слоем и как их искать для состыковки в общее целое для меня осталось загадкой…
                                                                                                                    вообщем такой дизайнер «пошёл» лесом…
                                                                                                                    • 0
                                                                                                                      Действительность такова, что в любой профессии есть профессионалы и непрофессионалы. От веб-дизайнеров до пилотов авиалайнеров. Совершенно незачем по каждому такому поводу плакаться в статьях.
                                                                                                                  • 0
                                                                                                                    До сих пор искренне не понимаю, зачем под верстку и дизайн нужны разные люди. Всегда сразу начинал работать с живыми шаблонами и и живым прототипом, скорость разработки морды увеличивалась очень существенно, заодно получалось избегать кучи идиотских ошибок, а также на себе чувствовать сложность реализации создаваемого решения. Хороший пилотаж при этом — авторы