Руководства по кодированию HTML и CSS

Question

Мы заключаем контракт с внешним консультантом для создания XHTML (Transitional) и CSS для большинства основных страниц нового проекта, над которым мы в настоящее время работаем.

Меня попросили составить список руководств для них, чтобы мы могли быть уверены, что можно ожидать определенного уровня качества. Как немного технического фона, мы будем использовать исходный HTML-код, который они предоставляют, в приложение веб-форм ASP.NET (используя обычные мастер-страницы/внешние таблицы стилей/jquery). Javascript не должен рассматриваться, но форматирование и организация CSS должны быть.

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

Answer 1

С технической точки зрения, страницы должны быть pass validation, вероятно, первым испытанием, которое у меня было бы.

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

Answer 2

Помимо проверки следующие моменты должны быть иметь в виду - Доступность (Кто аудитория) - CSS дизайн на основе (Там, где семантика хорошо разработаны) - Будьте последовательны с именовании (CSS и наименования. Это будет полезно в долгосрочной перспективе, когда должны быть сделаны какие-либо изменения, когда необходимо применить новый css и т. Д.).

проверить следующие лучшие практики из библиотеки разработчиков Yahoo ... http://developer.yahoo.com/performance/rules.html

Кроме того, поскольку вы используете ASP.net быть осторожным при именовании UserControls как на стороне клиента идентификатор, который генерируется может быть довольно долгим и неожиданным (asp.net генерирует идентификатор во время выполнения);

Некоторые хорошая информация может быть найдена на http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html

Answer 3

Действительно, убедитесь, что страница проходит проверку.

Также обратите внимание на семантику, страница должна быть в логическом порядке, когда CSS отключен (что имеет место для некоторых браузеров и программ чтения с экрана). Убедитесь, что заголовки на самом деле являются < h # > тегами и что все изображения имеют соответствующие метки. Также убедитесь, что таблицы используются только для отображения информации и не используются для форматирования. Меню должно быть построено как список не как divs (семантика).

Answer 4

Один хороший тест, который я всегда делаю для себя - это открытие страницы и ctrl + scroll. Масштабирование дает вам немедленное представление о том, насколько гибким и жидким является ваш дизайн.

В IE это, как правило, не в состоянии ни на что, но вы могли бы также попытаться сделать шрифт больше и посмотреть, что происходит (обратите внимание на кнопки, простирающихся вертикально, например)

Answer 5

Дайте им список браузеров (версию браузера и ОС), которые вы ожидаете от них.

Должны ли соблюдаться правила доступа? Вы могли бы согласиться на поддержку некоторых из пунктов в Checklist for Web Content Accessibility Guidelines.Список действительно полезен, поскольку он не только гарантирует, что ваш сайт работает для людей с ограниченными возможностями, но и для браузеров без JavaScript, CSS, изображений. Список также содержит некоторые общие рекомендации по созданию разумных веб-сайтов.

Поскольку вы используете ASP.NET, убедитесь, что они содержат только один <form> на веб-страницу. Или, по крайней мере, будьте готовы сделать некоторые обходные пути, если вы позволите им использовать больше.

Если вы планируете использовать AJAX, покажите им ASP.NET AJAX Control Toolkit, чтобы они не тратили время на вещи, которые уже были построены.

Я бы настаивал на том, что они используют некоторые проверенные рамки, такие как YUI css reset и jQuery.

Answer 6

Одна вещь, которая делает передачу HTML/CSS-шаблона между несколькими внешними разработчиками, является правильной структуризацией и отступом разметки. Точно так же книги разбиты на тома, главы, параграфы, предложения, слова, пробелы и периоды. Существует иерархическая структура, которая упрощает чтение HTML и CSS (а с другой - способ кодирования, который делает вещи бардак)

Как правило:

 <body> 
      <div id="first"> 
       <p> 
        Some text goes in here... 
       <p> 

       <ul> 
        <li>A list item</li> 
        <li>A list item</li> 
        <li>A list item</li> 
        <li> 
         <ul> 
          <li> 
            <a href="#">A link</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> <!-- #first ends --> 
    </body> 

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