Рекомендації до дизайну й верстки вебсайтів

Працюючи над вебпроєктами у 2009 році, я помічав ті самі проблеми під час передачі дизайну у верстку й програмування. Тому вирішив зібрати рекомендації в одному місці: від завершеності HTML-блоків до назв стилів і станів навігації.

22 правила для узгодження макета й верстки

1. Робіть кожен компонент завершеною структурою HTML: відкривайте й закривайте його елементи в межах відповідного блока.
2. Організовуйте зображення в зрозумілі каталоги. Назва images була домовленістю цього проєкту, а не вимогою HTML.
3. Добирайте шляхи до ресурсів відповідно до розгортання. Відносні, від кореня сайту та абсолютні URL мають різні доречні застосування.
4. Зазвичай логотип веде на головну сторінку; перевіряйте цю поведінку в макеті та верстці. Приклад: <a href="/">Логотип</a>.
5. Відокремлюйте спільні стилі від розмітки. Назви style.css і styles.css — варіанти проєктної домовленості.
6. Передбачайте всі потрібні блоки: авторизацію, пошук, карту сайту, верхнє, бічне й нижнє меню, пагінацію, хлібні крихти, логотип, основний вміст, каталог, новини й анонси.
7. Використовуйте семантичну розмітку та CSS для компонування; таблиці залишайте для табличних даних.
8. Давайте осмислені назви класам, полям і формам.
9. Групуйте поля введення в form, коли вони становлять форму.
10. Використовуйте кнопки для дій, а посилання — для переходів.
11. Узгоджуйте базове оформлення заголовків h1–h6, сторінки та посилань, включно зі станами взаємодії.
12. Коментуйте неочевидні рішення в CSS.
13. Дотримуйтеся послідовних відступів і форматування HTML.
14. Задавайте придатний колір фону на випадок, якщо фонове зображення не завантажиться.
15. Позначайте заголовок відповідним елементом, наприклад h1, а не лише візуально схожим блоком.
16. Форматуйте CSS так, щоб його було зручно супроводжувати: одна декларація на рядок і проміжки між змістовими групами полегшують читання.
17. Показуйте активні пункти меню та поточний крок навігації в макеті й готовій сторінці.
18. Домовляйтеся про послідовні назви рівнів меню. Цифрові суфікси — один зі способів, а не правило CSS.
19. Перевіряйте сторінки в браузерах, якими користується ваша аудиторія. Згадані в оригіналі Internet Explorer 6, Opera 9, Firefox 3 і Safari відображають тодішнє середовище тестування.
20. Передбачайте резервні шрифти та перевіряйте сторінку без додатково встановлених гарнітур. Наявність Arial Narrow не слід вважати гарантованою.
21. Явно задавайте узгоджені кольори фону, тексту й станів посилань з достатньою читабельністю.
22. Не примушуйте всі зовнішні посилання відкриватися в новій вкладці. За потреби поясніть користувачеві таку поведінку. Це відповідає рекомендації W3C G200.

Приклад форматування CSS

Початковий запис:

#knopka { background:url(/user/templates/alerta/images/fonsubmit.gif); background-repeat:repeat-x; border-color:#0f1324; border:none; color:#fff; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding-bottom:5px; padding-left: 6px; padding-right: 6px; padding-top:4px; height:23px; margin-top:1px;}

Той самий набір декларацій у читабельнішому вигляді:

#knopka {
  background:url(/user/templates/alerta/images/fonsubmit.gif);
  background-repeat:repeat-x;
  border-color:#0f1324;
  border:none;
  color:#fff;
  font-size:11px;
  font-family:arial, verdana, sans-serif;
  font-weight:bold;
  text-align:center;
  padding-bottom:5px;
  padding-left: 6px;
  padding-right: 6px;
  padding-top:4px;
  height:23px;
  margin-top:1px;
}

Це демонстрація форматування старого коду. Зокрема, border:none прибирає рамку, попри попередню декларацію її кольору.

Послідовність назв меню

У первісному прикладі змішувалися назви:

#menu a{ text-decoration: none; color:#1c144d;}
#menu2 a:hover{color:#d8354a;}
#menu1 a:hover{color:#d8354a;}

Автор пропонував узгодити індекси:

#menu1 a{ text-decoration: none; color:#1c144d;}
#menu3 a:hover{color:#d8354a;}
#menu2 a:hover{color:#d8354a;}

Обидва фрагменти можуть бути синтаксично коректними; відповідність селекторів реальній структурі меню важливіша за сам спосіб нумерації.

Відкриття посилань

Історичні приклади відрізняються наявністю target:

<a href="http://corp2.net/"> RS™</a>
<a href="http://corp2.net/" target="_blank"> RS™</a>

Перший варіант не є помилкою. Вибір нової вкладки має випливати із завдання користувача, а не з того, що сайт зовнішній.