HTML & CSS Coding Guidelines

Question

We are contracting an external consultant out to generate XHTML (Transitional) and CSS for most of the major pages of a new project we are currently working on.

I've been asked to put together a list of guidelines for them so that we can be sure that a certain level of quality can be expected. As a bit of technical background, we will be incorperating the raw HTML they provide into an ASP.NET web forms application (utilising the usual master pages / external stylesheets / jquery). Javascript should not be a consideration, but formatting and organisation of CSS should be.

I've made a start but quickly realised that this is probably not a unique situation and that a tried and tested list might be out there somewhere that I can at least use as a template! Has anyone got any experience of this?

Answer 1

From a technical standpoint, pages must pass validation is probably the first test I'd have.

I would expect the site to be able to be used by someone with JavaScript disabled, and someone using a screen reader (this is quite a good one as it should also highlight issues with inappropriately used tables and other things such as missing image alt tags, inconsistent use of header tags etc.).

Answer 2

Apart from validation the following points should be keep in mind - Accessibility (Who are the audience) - CSS based design (Where semantics are well designed) - Be consistent with your naming convention (css and id naming. This will be beneficial in the long run when any change needs to be made, when a new css has to be applied etc).

Check out the following best practices from yahoo developer library... http://developer.yahoo.com/performance/rules.html

Also since you are using ASP.net be careful when naming usercontrols as the client side ID that is generated could be quite long and unexpected(asp.net generates the id at runtime);

Some good info could be found at http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html

Answer 3

Indeed, make sure that the page passes validation.

Also pay attention to semantics, the page should be in a logical order when CSS is disabled (which is the case for some browsers and screen readers). Make sure that headings are actually <h#> tags and that all images have appropriate alt tags. Also make sure tables are only used to display information and are not used for formatting. The menu should be constructed as a list not as divs (semantics).

Answer 4

One good test I always make for myself is opening the page and ctrl+scroll. The zooming gives you an immediate idea about how flexible and liquid your design is.

In IE this tends to fail no matter what, but there you could also try to make the font bigger and see what happens (pay attention to buttons stretching vertically for example)

Answer 5

Give them a list of browsers (browser version and OS) you expect them to support.

Should the accessibilty guidelines be adhered? You could agree on supporing some of the points in the Checklist for Web Content Accessibility Guidelines. The list is actually quite usefull, since it will not only insure that your site works for people with disabilities but also for browsers without JavaScript, CSS, Images. The list also contains some general good practices for building sensible web sites.

Since you're using ASP.NET make sure that they only include one <form> per web page. Or at least, be prepared to make some workarounds, if you allow them to use more.

If you're planning on using AJAX show them ASP.NET AJAX Control Toolkit so that they don't spent time on things that have already been built.

I would insist on that they use some proven frameworks like YUI css reset and jQuery.

Answer 6

One thing that makes passing an HTML / CSS template between multiple front-end developers is proper structuring and indenting of the markup. The same way books are broken down into volumes, chapters, paragraphs, sentences, words, spaces, and periods, there is a hierarchical structure that makes HTML and CSS easy to read (and on the other hand a way of coding that makes things a total mess)

As a rule of thumb:

     <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>

This kind of adherence to structure can really cut down on time by making scanning code super easy for whoever is working on it– regardless of whether they wrote it or not.