Требования к верстке страниц

Общие требования к верстке

  • Корректное отображение во всех актуальных браузерах
  • Наименьшее время загрузки
  • Индексация сайта поисковыми ботами

Оформление кода

Оформляйте свой код, чтобы в нём легко могли разобраться другие. По окончанию работ проверьте все еще раз и перелинкуйте страницы.

HTML код:

  • Вложенные теги сдвигайте с помощью tab, проще видеть иерархию документа.
  • К закрывающим тегам добавляйте комментарий. Например:
  • Названия классов и id подбирайте по смыслу, пускай даже длинные, но понятные.
  • Как можно меньше используйте атрибут style=»…». Взамен не стоит плодить 20 дополнительных классов в духе margin-top_20. Если хорошо спланирована структура HTML, в них нет необходимости.
  • Проверяй код на валидность: http://validator.w3.org/ или WebDeveloper toolbar для Mozila Firefox.
  • Все парные теги должны закрываться!
  • Правильно объявляйте доктайп:


XHTML 1.0 Strict

XHTML 1.0 Transitional

  • Все ссылки на внутренние (собственные) страницы должны открываться в том же окне браузера, кроме исключительных случаев, явно указанных в задании. Если на сайте содержится ссылка на другой сайт, она должна открываться в новом окне.

Требования кодированию

  1. Чистота кода, минимальный размер html файла, обязательная оптимизация размера блоков из однотипных элементов, например, меню или перечислений.
  2. Если верстка не фиксированной ширины, то разрешение экрана от 1024 (без прокрутки) до макс по ширине. Если начинается от 1280 – оговаривается отдельно. На меньшем разрешении верстка не должна съезжаться, а фиксируется на минимально допустимой ширине, например 1024 или 800.
  3. По высоте верстка всегда должна быть растянута на 100%, т.е. даже если нет наполнения, подвал на большом разрешения должен находится не в середине экрана, а в самом низу.
  4. Оптимизированные картинки, грамотное использование jpg или gif. Баланс между сжатием, количеством цветов и размером файла. Тяжелые картинки (от 30-50кб), носящие дизайнерский смысл, должны стоять как background у ячеек. За счет этого они загружаются в последнюю очередь.
  5. Отсутствие style=»» внутри html кода, кроме случаев разового использования на всем сайте (например, главная страница). Обусловлено тем, что файл стиля грузиться один раз и дальше извлекается из кэша. А вот HTML код каждой страницы грузиться каждый раз заново.
  6. Отсутствие
  • В контент-части может быть любой текст, ссылки, таблицы, вложенные таблицы, списки и т.д. При этом вид шрифта не должен меняться. Для этого обязательно наличие в файле стиля всех стандартных тегов:
    • TD, P (основной текст) XX – заменить
    • A, A:link, A:active, A:visited, A:hover
    • H1, H2, H3, H4
    • TABLE, IMG
    • BODY
    • UL, LI
    • см. пнель инструментов wysiwyg редактора
  • Вместо стилей (style=»») следует использовать контейнер ID для передачи наследственных стилей В HTML:

    , , ,

      ,
    • в контент-части
    • В структуре заголовков h1-h6 должна соблюдаться иерархия. h1 должен быть один на всю страницу, т.е это заголовок основной сущности страницы, например заголовок товара на карточке товара, заголовок статьи на карточке статьи или новости, далее структура должна быть ниспадающей.
    • Использовать TABLE по назначение, а именно для оформления таблиц и не более
    • Размер шрифта обязательно не фиксированный, а плавающий (через font-size: XX% или font-size: x-small), кроме отдельных случаев – элементов дизайна или некоторых видов меню и подписей, оговаривается отдельно.
    • Выделение комментариями начала и конца меню, контент-части, крупных блоков
    • Путь для файлов:
      • data/style.css – файл стилей
      • data/javascript.js – файл для javascript
      • images/ – для картинок
    • В именах файлов использовать смысловые приставки. Например, ***_button.png для всех кнопок, чтобы отделить их от простых изображений.
    • Нужно предусмотреть, что любые надписи могут быть увеличины по длине текста. При этом дизайн не должен искажаться. Чтобы этого не роисходило с длинными надписями в ограниченном пространстве, следует использовать таблицы с фиксированной шириной (TABLE-LAYOUT: fixed)

    Оптимизация кода

    Для увеличения скорости загрузки страниц необходимо упорядочить подключение внешних CSS и JS файлов.

    Все CSS файлы должны подключаться внутри HEAD, если есть возможность объединить некоторые из файлов – нужно это сделать, в идеале хорошо бы объединить все в один.

    Все JS файлы должны быть подключены перед закрывающим

    Требования к верстке сайта

    Мы постарались собрать воедино основные требования, которым должна соответствовать качественная верстка сайта:

    html-верстка должна соответствовать тому макету, который Вы предоставили разработчику. При чем степень этого соответствия необходимо прописывать в техническом задании (далее ТЗ). Нормой считается отклонение в 3-5 пикселей, но если Вы решите сделать заказ у фрилансеров, либо верстальщика-новичка, то в результате работ можете получить не то что хотели, потому что фразы «похоже на макет» и «как на макете» все понимают по-разному.

    Это верстка, совпадающая с предоставленным макетом «пиксель в пиксель». Данное требование не является стандартным и если Вам нужно его выполнение — то это обязательно необходимо озвучивать в процессе заказа, поскольку оно увеличивает трудоемкость и стоимость работ. Столь высокая точность необходима только для высококачественных макетов в высоком ценовом сегменте, поэтому данное требование встречается редко.

    Верстка должна одинаково выглядеть в различных браузерах на различных устройствах. Каких браузерах и устройствах — необходимо прописать в ТЗ. Формулировку «на всех» у Вас никто не примет, потому что это невозможно.

    Мы рекомендуем ограничиваться последними версиями самых популярных браузеров на самых популярных устройствах, а именно:

    На персональных компьютерах и ноутбуках:

    • Google Chrome
    • Firefox
    • Яндекс-Браузер
    • Internet Explorer
    • Opera
    • Safari

    На смартфонах и планшетах под iOS:

    На смартфонах и планшетах под Android:

    Мы всегда стараемся акцентировать внимание заказчиков на вопросе кроссбраузерности, поскольку если на этапе сдачи проекта выяснится, что у Вас на предприятии на всех компьютерах установлен Internet Explorer 8, который не поддерживает многие из современных технологий отображения сайта — то сайт будет выглядеть не так как на макете и его придется дорабатывать за Ваш счет, если требование поддержки Internet Explorer 8 не было прописано в ТЗ.

    Нам, профессиональным разработчикам, кажется элементарным тот факт что html верстка должна быть выполнена по правилам html, т. е. с минимальным количеством ошибок. Но к нам постоянно приходят на доработку проекты, в которых на отдельных страницах встречалось до 60 ошибок в html-коде! И, как ни странно, такая верстка более-менее нормально отображается в большинстве браузеров, т. к. они умеют обрабатывать некоторые ошибки. А вот поисковые роботы такие проекты не жалуют.

  • CSS и Javascript код должен быть вынесен в отдельные файлы .css и .js соответственно
  • Адаптивность

    Адаптивный дизайн (от англ. responsive web-design) — это дизайн, который сам определяет ширину окна браузера, в котором его просматривают, и подстраивается под него. Это реализуется именно на этапе верстки за счет применения медиа запросов в файле стилей .css.

    Для того чтобы заказать адаптивную верстку — Вам нужно будет предоставить макеты страниц во всех разрешениях (обычно их 3 или 4) с указанием разрешений, в которых должно происходить изменение дизайна.

    К ним относятся любые другие Ваши пожелания: должна ли верстка быть «резиновой» (заполнять всё свободное пространство по ширине) как должны реагировать элементы на странице при наведении на них курсора мыши что и как должно анимироваться на странице и так далее.

    Требований существует много, на данной странице были рассмотрены самые важные из них.

    Если Вы заказываете верстку у добропорядочного разработчика, то он сам задаст Вам наводящие вопросы, а в спорных ситуациях примет решение в Вашу пользу.

    © 2014-2018, Conversion Labs. Все права защищены.

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

    Общие требования

    Все ссылки на внутренние (собственные) страницы должны открываться в том же окне браузера, кроме исключительных случаев, явно указанных в задании. Если на сайте содержится ссылка на другой сайт, она должна открываться в новом окне.

    При входе в раздел, содержащий несколько подразделов, отображается список названий входящих в него подразделов.

    Для сайта должны быть указаны собственные заголовок окна, Мета-ключевые слова и описание.

    На каждой странице сайта должны быть указаны копирайты

    После утверждения дизайна шаблон необходимо положить в папку Проекты на общем диске.

    Если фон элемента не входит перечень 256 стандартных цветов его необходимо делать при помощи изображения.

    Оптимизация графики

    Названия файлов должны примерно соответствовать применению (например: logo.gif, slogan.gif, header.jpg, menubg.gif).

    Качество (Уровень сжатия) не менее 60).

    При сжатии не должно возникать видимых дефектов характерных данному формату.

    Формат для сжатия малоцветных изображений (менее 256 цветов).

    Желательно использовать этот формат только в исключительных случаях.

    Минимальный набор элементов

    • DOCTYPE
    • html
    • head
    • title
    • meta
    • charset
    • description
    • keywords
    • author
    • body

    Коды счетчиков должны быть занесены в .

    В основном html-шаблонах сайта должны присутствовать комментарии к основным элементам страницы: шапка, логотип, меню, заголовок страницы, контент, вставки модулей (если есть), футер.

    Все CSS-стили должны быть вынесены в отдельный файл, только присутствие классов и ID элементов. То же самое с описанием функций Javascript.

    При вставке изображений использовать относительные пути) указывать собственные размеры.

    Код должен иметь форматирование удобное для пользователя.

    После верстки проверить соответствие стандарту: http://validator.w3.org/#validate-by-uri.

    Минимальный набор элементов

    • body
    • h1-h6>
    • pre
    • p
    • a:link , a:hover (при наведении мышью), a:visited (посещенная ссылка), a:active (активная ссылка)

    Общие требования

    Всегда описывать цвет фона для body даже если он белый.

    В случае, если фон под контентом отличается от общего фона страницы, для body его нужно прописать в html-коде.

    Названия классов и id должны по смыслу соответствовать применению (например, header, menu, footer, news).

    По умолчанию границы для изображений, являющихся ссылками отсутствуют.

    Размер шрифта стандартных элементов (body, table, td, p, li, a) должен быть одинаковым.

    Избежать установок выравнивания текста по ширине (justify) для стандартных элементов (body, table, td, p, li, a).

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

    SEO верстка сайта. SEO требования к верстке сайта

    SEO верстка сайта

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

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

    После исполнения требований проводится валидация верстки. Код страниц сайта, которые прошел валидацию будет проиндексирован без проблем.

    Есть сервис проводящивалидацию бесплатный.
    Ссылка на сервис валидации — https://validator.w3.org/

    Требования к верстке с точки зрения поисковой оптимизации сайта

    Заголовок h1 на сайте для документа должен быть один. Если только не используется html5.
    В семантике html5 допускается несколько заголовков.

    Что использовать. Рассмотрим основные аспекты.

    Использование параграфов обязательно. Тег параграфа p выглядит так:

    Альтернативой тегу параграфа p является тег блока страницы div, который выглядит так:

    Использовать div для параграфа не рекомендуется.

    Заданные стилей для элементов документа сайта

    Стили прописываются в CSS.

    Для всех элементов в документе рекомендованной пропиской стилей является внешний файл стилей.

    Прописывание стилей в коде является логикой не правильной.

    Ориентировочный список элементов, при помощи которых должен оформляться текст:

    Специальные символы должны задаваться через:

    • — для тире;
    • « для левой;
    • и &raquo для правой кавычки.

    Наиболее правильным вариантом по встраиванию кода стилей и скриптов было бы их размещение и подключение в файл документа сайта закрытием тега body. Часто встроенный JavaScript приводит к замедленной загрузке документа.

    Что еще рекомендовано было бы проверить по внешним файлам:

    • CSS вынесен в отдельный файл;
    • JS вынесен в отдельный файл;
    • JS-файлы должны кэшироваться;
    • CSS — файлы должны кэшироваться.

    Текста правильно разбивать на 300-600 символов на один абзац.

    Основные теги Title и Meta должны располагаться сразу после открытия тега head.

    Код должен проходить валидацию. Например, HTML5 валидации.

    Бесплатный валидатор доступен по прямой ссылке на официальном сайте консорциума W3C https://validator.w3.org/

    Уникальных текстов на сайте должно было бы быть больше чем не уникальных.

    Количество вхождений из продвигаемых фраз должно составлять не менее 3-4 вхождений.

    400 слов — 2 вхождения. 800 слов — 4 вхождения

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

    Картинки должны быть с отступами от текстового содержания документа.

    Ссылки должны отделятся от текста, например цветом или подчеркнутыми.

    Требования к верстке страниц

    Узнайте каким требованиям по верстке должен обладать Ваш сайт

    1. Кроссбраузерность сайта
      Сверстанный сайт должен нормально работать в IE7+, FireFox3+, Opera9+, Safari4+, Chrome36+
    2. Табличная вертка может применять только для таблиц, верстка макетов таблицами запрещена. Вы можете использовать либо float, flex или grid (при использовании flex и grid следите за кроссбраузерностью)
    3. Макет должен быть сверстан с применением фреймворка bootstrap3+
    4. При верстке адаптивных макетов может использоваться классы bootstrap
    5. Если Вам необходимо сделать верстку адаптивного макета сайта (в этом случае для каждой страницы Вы получаете три макета (для десктопа, для планшета и телефона)), сверстанный Вами макет должен хорошо выглядеть и на промежуточных разрешениях. Верстка не должна отображаться хорошо, только на трех типах разрешениях, т.к. в реальной жизни, количество разрешений экранов гораздо больше, чем 3, а сайт должен адаптироваться под все экраны и выглядеть хорошо везде.
    6. Цвет фона для body всегда должен прописываться в css файле стилей, даже если он белый.
    7. CSS Файл стилей должен назваться template.css
    8. Если используете CSS хаки, комментируйте, что это и для какого браузера, а лучше используйте css_browser_selector.js. Заботьтесь о верстальщиках, которым придется работать с этим макетом после вас.
    9. Названия классов и id должны быть названы на английском, а не транслитом, а также по смыслу соответствовать применению
      например, header, menu, footer, news, titlenews, footercontacts
    10. При создании html макета для CMS (тоже касается и обычный html макетов) обязательно разделяйте основные html блоки комментариями, например:

  • Всё что можно сделать без применения Javascript, делать без него средествами CSS.
  • Стараться использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.
  • Javascript код нужно выносить в отедльный файл с названием template.js. Тоже самое касается и обработчиков событий.
  • Обязательно уточнять какие JS библиотеки вы планируете применять при верствке макета, чтобы потом не получилось, что при верстке использовался, к примеру, PrototypeJS, а необходимо было внедрять jQuery.
  • Для резиновых макетов сайта обязательно должны быть установлены минимальное и максимальное значения ширины.
  • Макет сайта обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной ширине окна браузера 1170px.
  • Все картинки используемые в верстке должны находиться в папке images(название может зависить от типа CMS под которую Вы создаете макет). В этой не должно быть картинок, не используемых в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять картинки, которые уже не нужны.
  • Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.
  • CSS файл должен быть структурирован с помощью строк с комментариями на блоки по функциональному назначению, например:
    /*————1. Сброс CSS (START)————*/
    css описание
    /*————1. Сброс CSS (END)————*/

    /*———2. Типовые элементы(START)———*/
    css описание
    /*———2. Типовые элементы(END)———*/

    Требования к верстке страниц

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

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

    И этот момент игнорируется. Часто это происходит из-за предположения, что трудозатраты на написание детального ТЗ в сумме со стоимостью аутсорсинга не окупаются сэкономленным временем штатного верстальщика. В конце концов, верстка — это ведь не так уж сложно — думает рядовой project менеджер. И, как правило, это действительно прокатывает, *хвала человеческому интеллекту*, профессиональные верстальщики в большинстве своем ограничивают буйство экспериментаторского духа и заранее знают, какие технические решения в верстке могут вызвать у заказчика геморрой не столь адский, чтобы забанить верстальщика, но все же исключающий радость и восхищение прекрасным html-макетом.

    Тем не менее, вероятность факапов, как показывает практика, не столь мала, чтобы этим можно было пренебречь.

    А основное заблуждение здесь в том, что детальное ТЗ — это сложно и трудоемко. Какие-то специфические требования к макету в любом случае приходится описывать, а вот на общие требования и рекомендации, как правило, забивают.

    2. О, велика моя скорбь!

    Я недавно получил макет, который менеджеры отдавали на аутсорсинг и просто не знал, смеяться мне или плакать. Если бы не мне предстояло интегрировать этот макет в систему шаблонов CMS, я бы наверно все-таки смеялся.

    Табличная верстка и стили, не вынесенные в CSS файл и стандартный дримвиверовский скрипт для подсветки кнопок даже не воспринимаются как недостатки после того ада, который я увидел. Все поля ввода были вставлены внутрь тегов label, засунутых в отдельные формы, причем при попытках как-то привести это в человеческий вид, вся верстка разваливалась. CSS классы имели кириллические названия, причем не осмысленные, а вида «.стиль1,.стиль2». Большинство элементов форм стилизировались каким-то мало известным и до ужаса кривым скриптом на jQuery, некоторые элементы имели одинаковые ID и между ними был JS код, оперирующий как раз этими элементами и получающий их по ID, и верх маразма — это применение в конце документа метода jQuery.сss чтобы задать стили, которые ну совсем ничто не мешало просто прописать в CSS файл. А еще хедер сайта вместе с кучей ссылок (шрифтом Tahoma и без сглаживания) был сделан одной картинкой, на которую наложены элементы MAP и AREA. Не буду больше травмировать вашу психику описанием фейлов в этом замечательном макете, т. к. было их там еще бессчетное количество.

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

    Происшествия такого вот характера побудили меня опубликовать список требований и рекомендаций, которые будут полезны как людям, отдающим макеты на html-верстку, так и собственно верстальщикам.

    Вы можете переработать эти рекомендации и дополнить ними свое типовое ТЗ на верстку. Многие вещи из перечисленных вполне очевидны, но вы можете извлечь profit из того, что все они собраны в одном месте. Некоторые пункты (к примеру требования к поддержке браузерами или используемым скриптам) для разных контор специфичны, но я не буду далее писать расплывчатых фраз, чтобы этот списочек можно было легко скопипастить и заточить под свою специфику работы .

    3. Требования и рекомендации

    1. Кроссбраузерность
    Сайт должен нормально работать в IE7+, FF3+, Opera9+, Safari4+, Chrome последней мажорной версии (или в зависимости от условий договора с клиентом и года, в котором вы читаете эту статью).

    2. Всегда описывайте цвет фона для body даже если он белый.

    3. Если используете CSS хаки, комментируйте, что это и для какого браузера, а лучше используйте css_browser_selector.js. Заботьтесь о верстальщиках, которым придется работать с этим макетом после вас.

    4. Названия классов и id должны по смыслу соответствовать применению
    например, header, menu, footer, news

    5. Просьба разделять основные html блоки комментариями. Примерно так:

    Это нужно для создания из сверстанного html макета шаблонов для CMS, после чего комментарии будут удаляться.

    6. Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.

    7. Все что можно сделать без Javascript, делать без него.

    8. Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже лучше отделить и объявлять в отдельном файле.

    9. Если это еще не оговорено с заказчиком, предварительно оговорить, какие JavaScript библиотеки вы планируете использовать при верстке макета, чтобы потом не оказалось, что при верстке использовался, к примеру, PrototypeJS, а заказчик планирует в обязательном порядке внедрять на сайт jQuery.

    10. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.

    11. Если в Т.З. не сказано другое, макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной составляющей разрешения экрана 1024px, а если позволяет размер макета, то и 800px.

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

    13. Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.

    14. CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению, например:
    /* ___________1. Сброс CSS____________________*/
    /* ___________2. Типовые элементы____________*/
    /* _______________2.1. Залоговки______________*/
    /* _______________2.2. Ссылки________________*/
    /* _______________2.3. Элементы форм_________*/
    /*___________3. HEADER (Шапка сайта) __________*/
    /*___________4. FOOTER (Подвал )_______________*/
    /*___________5. SIDEBAR (Справа)_______________*/
    Как именно структурировть стили — вопрос немного холиварный, но главное — как-то это делать.

    15. Если сдача верстки производится более чем одним этапом (например, верстальщик отправляет страницы по одной, или если ему возвращаются на доработку уже сверстанные страницы) и вы не используете систему контроля версий для верстки, исполнитель должен в обязательном порядке прикрепить файл с описанием изменений в макете примерно такого содержания:

    • Добавил новые картинки в папку img,
    • Картинки btnHome.jpg и btnFeedback.jpg уже не нужны, можно удалять
    • Изменил html-код в секции файла anketa.html
    • Добавил в конец файла main.css новые стили (начиная с .form_row и ниже).

    16. Оговорить, в какой кодировке должен быть html-макет. CSS и JS файлы должны быть в той же кодировке, что и макет, иначе вероятность долгой и утомительной охоты на баги критически возрастает.

    17. Если в макете присутствует JS, изменяющий DOM — внимательно следить, чтобы все корректно работало в Опере, т. к. этот замечательный браузер при нажатии на кнопочку назад страницу не перезагружает, а отдает закешированный документ, причем очень важный момент: документ не просто закешированный, а еще и с учетом всех модификаций DOM, которые были выполнены с помощью JS

    18. Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег .

    19. Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href=’javascript:void(0)’ вместо популярного href=’#’, чтобы страница не скроллилась вверх.

    20. Верстайте формы правильно: метки полей должны находиться в тегах label, имеющих правильно заполненный атрибут for. Предусматривайте при верстке форм элементы для вывода ошибок валидации и стили для неправильно заполненных полей. Если это не предусмотрено в т.з. и дизайне, обязательно обсудите это с заказчиком.

    21. Если в макете используются нестандартные шрифты, обязательно оговорите, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, etc.)

    22. Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту. Если хотите сделать блок фиксированной высоты — сначала спросите у заказчика.

    23. В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное.

    24. Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или «так получается короче»

    Правила вёрстки печатных изданий

    В полиграфии и издательском деле верстка – это процедура формирования страниц (полос) издания с помощью компоновки текстовой и графической информации на этих страницах.
    В эпоху докомпьютерного набора верстка журналов, книг и т.д. делалась вручную: на линотипе или монотипе набирался текст, к которому добавлялись иллюстрационные клише и далее, эти элементы оформлялись пробелами и линейками при помощи вспомогательных инструментов.
    Бурное развитие цифровых технологий в настоящее время привело к тому, что верстальщики для работы стали использовать компьютеры и работать в специальных верстальных программах.
    И так, верстка макета — это такой вид работ, в процессе выполнения которых на полосах нужного формата размещается материал книги (буклета, каталога, брошюры).

    Вёрстка буклета

    Буклет можно назвать разновидностью листовки, так как он представляет собой лист бумаги, сложенный определенным образом и имеющий от 4 и более страниц. Компоновка текстового и иллюстративного материала для буклета требует соблюдения тех же правил, что и при верстке остальных видов полиграфии с той лишь особенностью, что располагаются страницы совершенно иным образом, зависящим от способа фальцовки. Способов же компоновки буклетов несколько, но основных три: гармошкой, перекрестными и оконными фальцами. В зависимости от порядка расположения страниц и ведётся верстка буклета специализированными средствами графических пакетов.

    Верстка буклетов – это довольно непростой процесс. Его сложность заключается в том, что в небольшом издании необходимо разместить максимально большой объем информации, в результате чего, буклет должен выглядеть компактным и гармоничным. Поэтому здесь очень важна высокопрофессиональная и качественная полиграфическая верстка.

    Вёрстка брошюры

    Брошюра относится к многостраничной полиграфии. Все существующие каталоги, журналы и даже некоторые книги (объемом до 48 страниц) считаются брошюрами, так как создаются они по одним и тем же принципам верстки. У каждой типографии существуют свои технические требования. Согласно им и ведется верстка макета брошюр, буклетов и другой полиграфии. Эти же требования, в большей степени применимы и к вёрстке журнала, который является по сути, той же брошюрой, только большего объема, и издаваемой периодически.

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

    Для того, чтобы комфортно воспринимать текстовой материал в издании и обеспечить безупречное качество издаваемого продукта, верстка макетов требует соблюдения многих правил и ограничений.

    Существуют особые правила и законны вёрстки, которые знает каждый специалист. Иногда нелишне знать о них и заказчику, чтобы не предъявлять неграмотные и непрофессиональные пожелания и требования. Они затем неизбежно отрицательно скажутся на финальной стадии выпуска продукции.

    Правила вёрстки многополосных печатных изданий максимально просты:

    В сверстанном издании титульный лист, шмуцтитулы, начало первого из предисловий и основного текста необходимо заверстывать на нечетных полосах.

    Не следует оставлять неполные строки, соответственно, последние и первые в абзаце, ни в конце, ни в начале сверстанной полосы. Потому что, при такой верстке полоса выглядит неаккуратно и становится неудобной для чтения. Следовательно, такие строки необходимо убирать при помощи приемов вгонки и выгонки строк (можно уменьшить или уменьшить число набранных строк за счет уменьшения или увеличения межбуквенных пробелов).

    Хотя в некоторых случаях дизайнеры стараются их избежать, специально не размещая текст во всю шину полосы, а смещая к тому или другому краю печатного поля. При классической вёрстке переносы не делают в словах, которые переходят с нечетной полосы на четную. Это делает издание неудобным для чтения: приходится переворачивать страницу, только для того, чтобы прочитать окончание слова. Перенос же слов на одном развороте в верстке допускается.

    Для серьезного издания (даже для некоторых видов буклетов) потребуются серьёзные профессиональные компьютерные программы , специально предназначенные для многостраничной вёрстки.

    Необходимо построение модульной сетки . Она может меняться от выпуска к выпуска (у буклетов и брошюр) или быть постоянной на протяжении долгого периода в зависимости от идеи и концепции издания (журнала).

    Касательно брошюр и журналов, особого внимания требует корешок . Как и чем будет переплетено будущее издание лучше знать в процессе вёрстки.

    Это поможет спланировать грамотный разворот брошюры или журнала, модульная сетка на отпечатанной многостраничном продукте съедет. 5 мм потеряют на КБС, десять — на полиграфических болтах. Эксклюзив вообще непредсказуем.

    Иногда в процесс вёрстки и вообще в переплетное дело вмешивается заказчик. Сам того не желая. Берёт бумагу потолще, для солидности, добавляет парочку разворотов и… получает целый пакет неприятностей. Не получается соединение скрепкой, выпирают внутренние страницы блока и уходят под нож, проблемы с изменением способа печати, ввиду неожиданного уменьшения тиража и другие технологические нюансы… проблемы…

    Работа с иллюстрациями

    Нередко заказчик не предоставляет иллюстрации, или предлагает их в непригодном качестве, настаивая на их использовании. Следует идти на компромисс, добиваясь, чтобы иллюстрации ля серьёзного издания были надлежащего качества, размера и всех необходимых технических параметров. В случаях с фотографиями — лучше переснять материал, воспользовавшись услугами собственного профессионального фотографа.

    Затраты со стороны заказчика на вёрстку напрямую влияет на её качество. Материала обычно много, бюджет ограничен, количество полос строго рассчитано. Если что-то не умещается, лезет, заказчик, снова вмешивается в творческих и технических процесс, ломает отстроенную модульную сетку, стараясь заполнить важной информацией каждую свободную клеточку.

    Выход — бизнес-портреты, выездные фотосессии на производстве и т.д. И не внимать заверениям заказчика, что «нужное достанут в интернете или отснимут своими силами. Обрабатывать низкокачественных изображений займет много времени, сил и нервов при вёрстке, которые не будут оценены заказчиком.

    Результат — плохие, вытянутые «из ничего» иллюстрации испортят самую прекрасную типографику.

    Верстка — очень важный этап в создании буклета, брошюры или, т.к. определяет его эксклюзивность и создает особый имидж изданию. Грамотно сверстанный и качественно изданный буклет, брошюра или журнал привлекает внимание потенциального клиента, дает очень достойное представление о компании и рекламируемых товарах и услугах, что, в свою очередь, положительно сказывается на имидже компании.

    Читайте так же:  Ипотечный калькулятор материнский капитал