ݺߣ

ݺߣShare a Scribd company logo

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

•
•
Ihor Zenich
Ihor Zenich

Требования, которые легче соблюсти, создавая качественную вёрстку, а не говнокод.

1 of 26
Downloaded 45 times
Чек-лист вёрстки. . Что можно отдавать клиенту, а что надо переделывать. Зенич Игорь Руководитель отдела клиентской разработки delka@ideus.biz twitter.com/delaz
Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать
Что проверяем? 0. Соответствие макету. 1. Кроссбраузерность, кодировка и DOCTYPE. 2. Валидность, доступность, микроформаты. 3. Корректная работа при вбивании реального текста, надёжность вёрстки. 4. HTML5 формы, линковка, валидация. 5. Семантичность. Отсутствие глупостей в html и css, единообразие, аккуратность.
Что проверяем? 6. Правильная структура заголовков (H1,H2,… и т.д. и TITLE). 7. Сайт должен нормально смотреться во всех стандартных разрешениях от 1024px и выше и не иметь горизонтального скролла. 8. Работоспособность при выключенном JS. 9. Работоспособность при выключенном Flash. 10. Доступность при выключенных (загружающихся) картинках.
Что проверяем? 11. Отсутствие багов при увеличенном шрифте. 12. Наличие Win/Mac/Linux-аналогов шрифтов. 13. Оптимизация скорости загрузки. 14. И последний пункт – мелкие проверки.
Дайте пожалуйста лекцию в электронном виде! :) http://habrahabr.ru/blogs/webdev/114256 http://bit.ly/markup-checklist-2011
0. Соответствие макету Расположение блоков - 1:1 с макетом. Допускается - до 5px для текста. . «Если от вас требуют попиксельной вёрстки, увольняйтесь!» :)
1. Кроссбраузерность, кодировка и DOCTYPE 1.1 @charset "utf-8"; 1.2 <!DOCTYPE HTML> 1.3 Кроссбраузерность
2. Валидность, доступность, микроформаты . ...обладает заранее известной структурой и упорядоченностью... Проще обрабатывать, обслуживать, видоизменять… Унификация и стандартизация значительно снижают стоимость изготовления и, главное, обслуживания. изделий… Код с ошибками — чаще всего именно кустарщина.
2. Валидность, доступность, микроформаты 2.1 Не должно быть js-ошибок! 2.2 Титулка должна быть валидна. 2.3 CSS валидируется по 3.0. 2.4 Микроформаты/Microdata. 2.5 В идеале соблюдаем WCAG2. 2.6 Некоторые ошибки допустимы :)
3. Корректная работа при вбивании реального текста 3.1 Проверка ввода и удаления данных. 3.2 Проверка корректности работы стилей. 3.3 HTML5-тэги для разметки: header, footer, aside, nav, section, article
4. HTML5 формы, линковка, валидация 4.1 Label и input/select должны быть слинкованы. 4.2 HTML5 валидация заполнения формы. 4.3 Правильные input type=”email/url/tel”.
5. Семантичность. Отсутствие глупостей. Пожалуй единственный пункт, где легче сказать «как неправильно». . «И так сойдёт!..»
5. Семантичность. Отсутствие глупостей. Да что-же тогда хорошо?! — «Пуленепробиваемая вёрстка». — Структурировать код в блоки описывающие логику документа. — Использование правильных framework. Он один :) HTML5 ✰ Boilerplate
5. Семантичность. Отсутствие глупостей. БЭМ! . «И это хорошо!»
6. Правильная структура заголовков Это забота о семантичности кода. Красных строк быть не должно!
7. Нет горизонтального скролла при 1024px! Сайт должен нормально смотреться во всех стандартных разрешениях!
8. Работоспособность при выключенном JS JS может быть выключен согласно корпоративных требований безопастности. А в Opera Mini он работает только методом перезагрузки страницы. Ну выводите хоть уведомление, а!
9. Работоспособность при выключенном Flash Flash не работает на iOS- девайсах. Flash плохо индексируется поисковиками. В идеале критически важный функционал сайта должен быть доступен без Flash.
10. Доступность при выключенных картинках Надписи (особенно логотип и главное меню сайта) должны оставаться читабельными.
11. Отсутствие багов при увеличенном шрифте
12. Наличие Win/Mac/Linux аналогов шрифтов Проверяется поиском по тексту css названий: “Helvetica”,“Liberation”,“DejaVu”,”Meera”, ”Monaco”, “ Century Schoolbook L”, ” Nimbus Mono L”, “URW”. Хотя бы два из них должны быть.
13. Оптимизация скорости загрузки — CSS-спрайты — Base64-encode — CSS3: border-radius, gradient, box-shadow, text-shadow — Оптимизация PNG и JPG — JS максимально выносим во внешние файлы, минимизация.
Для проектов, где это оговорено, проверяется: — Версия для печати — Мобильная версия Они должны быть реализованы через css.
15. Важные мелочи: џ Лого на внутряках должно вести на титулку. џ У каждой страницы должен быть свой уникальный TITLE џ Все страницы должны быть слинкованы и проверены на наличие битых ссылок. џ Все ссылки должны как-то реагировать на :hover, :active и :focus џ «Контент в начале страницы» џ Копирайт должен быть написан правильно. џ Должны быть favicon1.ico и apple-touch-icon џ В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние неиспользуемые файлы, старые версии файлов и т.п. Все бекапы можно вытянуть из системы контроля версий (например SVN), а на живом проекте «мусор» потом мешает разобраться как что работает. џ Размеры для блоков, чьи размеры зависят от содержащегося в них текста, нужно задавать в em, а не px. џ Если url ссылки неизвестен, то он должен быть равен её анкору, написанному латиницей с заменой пробелов/спецсимволов на тире. џ Skype-плагин не должен ломать вёрстку џ Ресайз textarea не должен ломать вёрстку џ Нужно подстраховываться фиксируя в css размеры картинок, выводящихся программно. џ Проверка орфографии Word'ом или Орфографом, желательно — оттипографить контент.
Вопросов не бывает в двух случаях... http://habrahabr.ru/blogs/webdev/114256 http://bit.ly/markup-checklist-2011 Зенич Игорь Руководитель отдела клиентской разработки delka@ideus.biz twitter.com/delaz

More Related Content

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

  • 1. Чек-лист вёрстки. . Что можно отдавать клиенту, а что надо переделывать. Зенич Игорь Руководитель отдела клиентской разработки delka@ideus.biz twitter.com/delaz
  • 3. Что проверяем? 0. Соответствие макету. 1. Кроссбраузерность, кодировка и DOCTYPE. 2. Валидность, доступность, микроформаты. 3. Корректная работа при вбивании реального текста, надёжность вёрстки. 4. HTML5 формы, линковка, валидация. 5. Семантичность. Отсутствие глупостей в html и css, единообразие, аккуратность.
  • 4. Что проверяем? 6. Правильная структура заголовков (H1,H2,… и т.д. и TITLE). 7. Сайт должен нормально смотреться во всех стандартных разрешениях от 1024px и выше и не иметь горизонтального скролла. 8. Работоспособность при выключенном JS. 9. Работоспособность при выключенном Flash. 10. Доступность при выключенных (загружающихся) картинках.
  • 5. Что проверяем? 11. Отсутствие багов при увеличенном шрифте. 12. Наличие Win/Mac/Linux-аналогов шрифтов. 13. Оптимизация скорости загрузки. 14. И последний пункт – мелкие проверки.
  • 6. Дайте пожалуйста лекцию в электронном виде! :) http://habrahabr.ru/blogs/webdev/114256 http://bit.ly/markup-checklist-2011
  • 7. 0. Соответствие макету Расположение блоков - 1:1 с макетом. Допускается - до 5px для текста. . «Если от вас требуют попиксельной вёрстки, увольняйтесь!» :)
  • 8. 1. Кроссбраузерность, кодировка и DOCTYPE 1.1 @charset "utf-8"; 1.2 <!DOCTYPE HTML> 1.3 Кроссбраузерность
  • 9. 2. Валидность, доступность, микроформаты . ...обладает заранее известной структурой и упорядоченностью... Проще обрабатывать, обслуживать, видоизменять… Унификация и стандартизация значительно снижают стоимость изготовления и, главное, обслуживания. изделий… Код с ошибками — чаще всего именно кустарщина.
  • 10. 2. Валидность, доступность, микроформаты 2.1 Не должно быть js-ошибок! 2.2 Титулка должна быть валидна. 2.3 CSS валидируется по 3.0. 2.4 Микроформаты/Microdata. 2.5 В идеале соблюдаем WCAG2. 2.6 Некоторые ошибки допустимы :)
  • 11. 3. Корректная работа при вбивании реального текста 3.1 Проверка ввода и удаления данных. 3.2 Проверка корректности работы стилей. 3.3 HTML5-тэги для разметки: header, footer, aside, nav, section, article
  • 12. 4. HTML5 формы, линковка, валидация 4.1 Label и input/select должны быть слинкованы. 4.2 HTML5 валидация заполнения формы. 4.3 Правильные input type=”email/url/tel”.
  • 13. 5. Семантичность. Отсутствие глупостей. Пожалуй единственный пункт, где легче сказать «как неправильно». . «И так сойдёт!..»
  • 14. 5. Семантичность. Отсутствие глупостей. Да что-же тогда хорошо?! — «Пуленепробиваемая вёрстка». — Структурировать код в блоки описывающие логику документа. — Использование правильных framework. Он один :) HTML5 ✰ Boilerplate
  • 15. 5. Семантичность. Отсутствие глупостей. БЭМ! . «И это хорошо!»
  • 16. 6. Правильная структура заголовков Это забота о семантичности кода. Красных строк быть не должно!
  • 17. 7. Нет горизонтального скролла при 1024px! Сайт должен нормально смотреться во всех стандартных разрешениях!
  • 18. 8. Работоспособность при выключенном JS JS может быть выключен согласно корпоративных требований безопастности. А в Opera Mini он работает только методом перезагрузки страницы. Ну выводите хоть уведомление, а!
  • 19. 9. Работоспособность при выключенном Flash Flash не работает на iOS- девайсах. Flash плохо индексируется поисковиками. В идеале критически важный функционал сайта должен быть доступен без Flash.
  • 20. 10. Доступность при выключенных картинках Надписи (особенно логотип и главное меню сайта) должны оставаться читабельными.
  • 21. 11. Отсутствие багов при увеличенном шрифте
  • 22. 12. Наличие Win/Mac/Linux аналогов шрифтов Проверяется поиском по тексту css названий: “Helvetica”,“Liberation”,“DejaVu”,”Meera”, ”Monaco”, “ Century Schoolbook L”, ” Nimbus Mono L”, “URW”. Хотя бы два из них должны быть.
  • 23. 13. Оптимизация скорости загрузки — CSS-спрайты — Base64-encode — CSS3: border-radius, gradient, box-shadow, text-shadow — Оптимизация PNG и JPG — JS максимально выносим во внешние файлы, минимизация.
  • 24. Для проектов, где это оговорено, проверяется: — Версия для печати — Мобильная версия Они должны быть реализованы через css.
  • 25. 15. Важные мелочи: џ Лого на внутряках должно вести на титулку. џ У каждой страницы должен быть свой уникальный TITLE џ Все страницы должны быть слинкованы и проверены на наличие битых ссылок. џ Все ссылки должны как-то реагировать на :hover, :active и :focus џ «Контент в начале страницы» џ Копирайт должен быть написан правильно. џ Должны быть favicon1.ico и apple-touch-icon џ В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние неиспользуемые файлы, старые версии файлов и т.п. Все бекапы можно вытянуть из системы контроля версий (например SVN), а на живом проекте «мусор» потом мешает разобраться как что работает. џ Размеры для блоков, чьи размеры зависят от содержащегося в них текста, нужно задавать в em, а не px. џ Если url ссылки неизвестен, то он должен быть равен её анкору, написанному латиницей с заменой пробелов/спецсимволов на тире. џ Skype-плагин не должен ломать вёрстку џ Ресайз textarea не должен ломать вёрстку џ Нужно подстраховываться фиксируя в css размеры картинок, выводящихся программно. џ Проверка орфографии Word'ом или Орфографом, желательно — оттипографить контент.
  • 26. Вопросов не бывает в двух случаях... http://habrahabr.ru/blogs/webdev/114256 http://bit.ly/markup-checklist-2011 Зенич Игорь Руководитель отдела клиентской разработки delka@ideus.biz twitter.com/delaz