В предыдущем посте я описал требования, которые я стараюсь предъявлять к дизайнерам макетов, которые я получаю в верстку. Сейчас опишу требования которые я ставлю к себе.

  1. Корректное отображение во всех актуальных браузерах
  2. Наименьшее время загрузки
  3. Чистота кода, минимальный размер html файла, обязательная оптимизация размера блоков из однотипных элементов, например, меню или перечислений.
  4. Файлы только на латинице, без пробелов, в нижнем регистре
  5. HTML проверяется на валидацию на http://validator.w3.org в соответствии с заданной версией HTML.
  6. CSS проверяется на валидацию на http://jigsaw.w3.org/css-validator в соответствии с заданной версией CSS.

Требования к верстке и верстальщикам

  1. Верстка только слоями. Таблицы допускаются только в контенте или их использование должно быть аргументировано.
  2. Не должно быть лишних CSS классов и закомментированных участков кода.
  3. Использованы понятные (логические) названия для классов. Например: не использовать “.oshibka” или “.green”, использовать “.error”.
  4. Названия классов и id подбирайте по смыслу, пускай даже длинные, но понятные. Название селектора отображает содержимое.
  5. Не использовать ID для верстки (селектора для css)
  6. Кодировка файлов – UTF-8.
  7. Все специфические символы (äöüßÄÖÜ) а также кавычки, амперсанд, скобки и апостроф должны быть перекодированы в HTML Entity Name.
  8. Все тэги имеют свойство “alt”.
  9. Все указанные ниже браузеры должны на 100% 1:1 повторять PSD-шаблон. Вплоть до пикселя. Все отличия обязательно должны быть обоснованы.
  10. Меню сделаны через списки <ul>
  11. Должны быть предусмотрены и протестированы длинные пункты меню.
  12. Изменение размеров окна браузера не должно приводить к некорректному отображению сайта. То же самое относительно увеличения и уменьшения шрифтов.
  13. Используйте все стандартные HTML тэги. Вместо <div> можно использовать:
    • h1, h2, h3 и т.д.
    • ul, ol, dl
    • cite
    • abbr, acronym, code
    • fieldset, legend, label
    • caption, thead, tbody, tfoot
  14. Для гибких макетов обязательно должны быть установлены максимальная и минимальная ширина.
  15. Обязательно прописывать cursor:pointer для кнопок сделанных с помощью картинок. Это важно, если проводится модернизация сайта, который уже давно и эффективно работает.
  16. Для форм при названии поля обязательно использовать label с заполненным атрибутом for.
  17. Для однострочных элементов (меню и т.д.) обязательно задавать свойство white-space:nowrap.
  18. Для выпадающих меню при обработке клика указывать href=’javascript:void(0)’ вместо href=”#”.
  19. Как можно меньше используйте атрибут style=»…». Лучше не использовать совсем. Взамен не стоит плодить 20 дополнительных классов в духе margin-top_20. Если хорошо спланирована структура HTML, в них нет необходимости.
  20. Футер всегда должен быть прижат к низу (если не оговорено другое).
  21. Вложенные теги сдвигайте с помощью tab, проще видеть иерархию документа.
  22. Если верстка не фиксированной ширины, то разрешение экрана от 1024 (без прокрутки) до макс по ширине. Если начинается от 1280 – оговаривается отдельно. На меньшем разрешении верстка не должна съезжаться, а фиксируется на минимально допустимой ширине, например 1024 или 800.
  23. По высоте верстка всегда должна быть растянута на 100%, т.е. даже если нет наполнения, подвал на большом разрешения должен находится не в середине экрана, а в самом низу.
  24. Оптимизированные картинки, грамотное использование jpg, png, gif, webp, svg. Баланс между сжатием, количеством цветов и размером файла. Тяжелые картинки (от 30-50кб), носящие дизайнерский смысл, должны стоять как background у ячеек. За счет этого они загружаются в последнюю очередь.
  25. Отсутствие style=»” внутри html кода, кроме случаев разового использования на всем сайте (например, главная страница). Обусловлено тем, что файл стиля грузиться один раз и дальше извлекается из кэша. А вот HTML код каждой страницы грузиться каждый раз заново.
  26. Отсутствие <font>, <strong>, <em>, <i>, <br/>, <b> … . Теги <p>, <span> использовать разумно.
  27. В структуре заголовков h1-h6 должна соблюдаться иерархия. h1 должен быть один на всю страницу, т.е это заголовок основной сущности страницы, например заголовок товара на карточке товара, заголовок статьи на карточке статьи или новости, далее структура должна быть ниспадающей.
  28. Заголовки H1-H6 желательно согласовывать с SEO-специалистом
  29. Использование чистых (без style=»” и т.п.) <h1>, <h2>, <h3>, <a>, <b>, <ul>, <li> в контент-части
  30. Использовать TABLE по назначение, а именно для оформления таблиц и не более
  31. Размер шрифта обязательно не фиксированный, а плавающий (через font-size: XX% или font-size: x-small), кроме отдельных случаев – элементов дизайна или некоторых видов меню и подписей, оговаривается отдельно.
  32. Выделение комментариями начала и конца меню, контент-части, крупных блоков
  33. В именах файлов использовать смысловые приставки. Например, ico-*.png для иконок, чтобы отделить их от простых изображений.
  34. Для увеличения скорости загрузки страниц необходимо упорядочить подключение внешних CSS и JS файлов.
  35. Все CSS файлы должны подключаться внутри HEAD, если есть возможность объединить некоторые из файлов – нужно это сделать, в идеале хорошо бы объединить все в один.
  36. Все JS файлы должны быть подключены перед закрывающим . Так же необходимо объединить по возможности JS-файлы в один.
  37. Грешно использовать инлайновый JS кроме острой необходимости.
  38. Всегда описывайте цвет фона для body даже если он белый.
  39. Если это еще не оговорено с заказчиком, предварительно оговорить, какие JavaScript библиотеки вы планируете использовать при верстке макета, чтобы потом не оказалось, что при верстке использовался, к примеру, PrototypeJS, а заказчик планирует в обязательном порядке внедрять на сайт jQuery.
  40. В папке с изображениями не должно быть картинок, не использующихся в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять уже ненужные картинки.
  41. Если в макете используются нестандартные шрифты, обязательно оговорите, есть ли надобность элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (font, sIfr, Cufon, etc.)
  42. Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или «так получается короче»
  43. В большинстве случаев нужно использовать css reset
  44. Все картинки, которые можно заменить css – обязательно использовать css. Использовать псевдоэлементы по максиуму.
  45. Спрайты. Использовать спрайты разумно – не стоит подключать в спрайт картинку, которая используется 1 раз в проекте в какой-то удаленной странице.
  46. Иногда целесообразно использовать перекодирование изображения в base64
  47. Использовать новые технологии оптимизации изображений – optipng для png. Ну или заменять на webp.
  48. Cброс float’от задавать clearfix`ом
  49. Рамки на картинках всегда являются элементом верстки, а не картинки. Тени, отблески и т.д. считаются рамкой картинки.
  50. Да и вобще – в html только минимум, нужный для каркаса. Всю стилизацию задавать стилями. Отступы – стилями. За mar20 бить по рукам.
  51. По возможности, как можно больше элементов вносить в общий шаблон. Все страницы сайта шаблонизируются таким образом, что существует главный шаблон, и в него подгружаются разные внутренние шаблоны. Исключения составляют абсолютно разные страницы, например: версия для печати, загрузочная страница. Если в общем шаблоне остаются части, которые будут меняться, то необходимо комментариями отметить это, а так же предоставить верстку этих частей, во всех отображениях.
  52. Если сайт будет на нескольких языках, то нарезать все картинки с надписями для разных языков. Называть картинки необходимо %название%_%указатель языка (ru|ua|en|…)%.jpg|gif|etc.
  53. Комментарии обязательны и по возможности на английском языке. Как минимум транслит!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

19 − 8 =