Geek Answers Handbook

HTML and CSS Coding Guides

We are contracting with an external consultant to create XHTML (Transitional) and CSS for most of the main pages of the new project that we are currently working on.

I was asked to make a list of manuals for them so that we could be sure that a certain level of quality could be expected. As a little technical background, we will use the HTML source code that they provide in an ASP.NET web form application (using regular master pages / external stylesheets / jquery). Javascript should not be considered, but CSS formatting and organization should be.

I started, but quickly realized that this was probably not a unique situation, and that the checked list might be there somewhere that I could use as a template! Has anyone got any experience with this?

+4
source share
6 answers

From a technical point of view, the pages should pass the test , this is probably the first test I would have.

I expect that the site can be used by someone with JavaScript turned off, and someone using a screen reader (this is pretty good, as this should also indicate problems with misused tables and other things, such as the lack of an alt image tags, inconsistent use of header tags, etc.).

+5
source

One good test that I always do for myself is opening a page and ctrl + scrolling. Scaling gives you an instant idea of ​​how flexible and fluid your design is.

In IE, this usually fails, no matter what, but there you can also try to make the font larger and see what happens (pay attention to buttons that stretch vertically, for example)

+2
source

Give them a list of browsers (browser version and OS) that you expect from them.

Should access rules be followed? You may agree to support some of the items on the Checklist for recommendations on the availability of web content . The list is really useful because it not only ensures that your site works for people with disabilities, but also for browsers without JavaScript, CSS, images. The list also contains some general guidelines for building smart websites.

Since you are using ASP.NET, make sure that they contain only one <form> for each web page. Or at least be prepared to make some workarounds if you allow them to use more.

If you plan to use AJAX, show them the ASP.NET AJAX Control Toolkit so they don’t waste time on things that are already built.

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

+2
source

One thing that does the passing of an HTML / CSS template between several external developers is the proper structuring and indentation of the markup. Similarly, books are divided into volumes, chapters, paragraphs, sentences, words, spaces and periods. There is a hierarchical structure that simplifies reading HTML and CSS (and on the other, a coding method that makes things a complete mess)

Usually:

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

Such a link to the structure can really shorten the time by making the scan code very simple for those who work on it, whether they wrote it or not.

+2
source

In addition to checking, you should keep in mind the following points: - Accessibility (Who is the audience) - Design based on CSS (where semantics are well developed) - Be in agreement with your naming convention (css and name identification). This will be useful in the long run, when it will be necessary to make any changes, when it is necessary to apply new css, etc.).

Check out the following guidelines from the 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 identifier that is generated can be quite long and unexpected (asp.net generates the identifier at runtime);

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

+1
source

In fact, make sure the page has passed verification.

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

+1
source

More articles:


All Articles