Ростов-на-Дону  +7(863)309-00-84 :: Краснодар  +7(861)2-929-927   Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

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

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

  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 блоки комментариями, например:
    <!--—BEGIN HEADER -->
    <!--—END HEADER -->
  11. Всё что можно сделать без применения Javascript, делать без него средествами CSS.
  12. Стараться использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.
  13. Javascript код нужно выносить в отедльный файл с названием template.js. Тоже самое касается и обработчиков событий.
  14. Обязательно уточнять какие JS библиотеки вы планируете применять при верствке макета, чтобы потом не получилось, что при верстке использовался, к примеру, PrototypeJS, а необходимо было внедрять jQuery.
  15. Для резиновых макетов сайта обязательно должны быть установлены минимальное и максимальное значения ширины.
  16. Макет сайта обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной ширине окна браузера 1170px.
  17. Все картинки используемые в верстке должны находиться в папке images(название может зависить от типа CMS под которую Вы создаете макет). В этой не должно быть картинок, не используемых в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять картинки, которые уже не нужны.
  18. Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.
  19. CSS файл должен быть структурирован с помощью строк с комментариями на блоки по функциональному назначению, например:
    /*-----------1. Сброс CSS (START)-----------*/
    css описание
    /*------------1. Сброс CSS (END)------------*/

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

    /*-----------2.1. Залоговки(START)----------*/
    css описание
    /*------------2.1. Залоговки(END)-----------*/

    /*------------2.2. Ссылки(START)-------------*/
    css описание
    /*--------------2.2. СсылкиEND)--------------*/

    /*----------2.3. Элементы форм(START)--------*/
    css описание
    /*-----------2.3. Элементы форм(END)---------*/

    /*--------------3. HEADER(START)-------------*/
    css описание
    /*--------------3. HEADER(END)---------------*/

    /*--------------4. FOOTER(START)-------------*/
    css описание
    /*--------------4. FOOTER(END)-------------*/
  20. Если сдача верстки сайта производится более чем одним этапом (например, верстальщик отправляет страницы по одной, или если ему возвращаются на доработку уже сверстанные страницы) и вы не используется система контроля версий, исполнитель должен в обязательном порядке прикрепить файл с описанием изменений в макете примерно такого содержания:
    • Добавилены новые картинки в папку images
    • Картинки buttonHome.jpg и buttonFeedback.jpg уже не нужны, можно удалять
    • Изменил html-код в файле services.html
    • Добавил в конец файла main.css новые стили (начиная с .buttonTitle и ниже).
  21. Все макеты html-макет, CSS и JS файлы должны быть в кодировке UTF-8.
  22. Если в макете присутствует JS, изменяющий DOM — внимательно следить, чтобы все корректно работало в Опере, т. к. этот замечательный браузер при нажатии на кнопочку назад страницу не перезагружает, а отдает закешированный документ, причем очень важный момент: документ не просто закешированный, а еще и с учетом всех модификаций DOM, которые были выполнены с помощью JS
  23. Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег <a>.
  24. Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href='javascript:void(0)' вместо популярного href='#', чтобы страница не скроллилась вверх.
  25. Верстайте формы правильно: метки полей должны находиться в тегах label, имеющих правильно заполненный атрибут for. Предусматривайте при верстке форм элементы для вывода ошибок валидации и стили для неправильно заполненных полей. Если это не предусмотрено в т.з. и дизайне, обязательно обсудите это с заказчиком.
  26. Если в макете используются нестандартные шрифты, обязательно оговорите, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, etc.)
  27. Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту. Если хотите сделать блок фиксированной высоты — сначала спросите у заказчика.
  28. В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии или малом количестве контента, если не оговорено обратное.
  29. Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно.
  30. Все элементы вертски, которые выравниваются по высоте (по центру) или по ширине (по центру) должны иметь одинаковые отступы, если по ширине то по бокам, если по высоте то сверху и снизу.
  31. Контактная информация на страницы контакты должна быть с учетом микроразметки https://yandex.ru/support/webmaster/schema-org/what-is-schema-org.xml
  32. Телефоны должны заключаться в тег <a href="tel:+78885232121">+7(888)523-21-21</a>, чтобы они были кликабельными на мобильных устройствах

КОНТАКТЫ

 г.Ростов-на-Дону, пр-кт. Театральный 60/348, офис 1431
+7(863)309-00-84 - Ростов-на-Дону
+7(861)2-929-927 - Краснодар
+7(495)201-76-88 - Москва
 noproblemsite
 Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
 Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Scroll to top