html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

За что 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. Спасибо НЛО!
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

5

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • habrahabr.ru
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции