Welcome to the beta of the new saila.com. Send in your bugs.
Basic Online Style Guide
This was a style guide I put together for the redevelopment of a major consumer Web site, some of the people working on it had only a passing familiarity with hand-coding sites. This is can be read as an expansion on Steadfast Suggestions for Web Design, and should be general enough to apply for most sites.
Here are some guidelines that not everyone will need to care about, but are done just for the sake of having a common starting ground as the templates start to be created. Again, since we are using templates, much of these stuff won't even apply once they've been created. Nevertheless…
The Web is always evolving, and eventually this site need to be available on a variety devices (TVs, cellphones, refridgerators, whatever). With that in mind, the site is best based on XHTML—essentially and XML-friendly version HTML, and the latest recommendation from the Web’s standard body. XHTML also makes debugging CSS problems easier.
For those who know HTML already, XHTML is not much different, and the major differences are noted below:
- all documents must begin with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> - all tags should be lowercased (e.g.,
<body>not<BODY>) - all attributes should be quoted (e.g.,
width="120"notwidth=120) - all elements should be closed (e.g.,
<p></p>,<li></li>)- those that aren’t normally closed (e.g.,
<img>,<hr>, etc.) should be closed with a space and a slash (i.e.,<img />,<hr />, etc.)
- those that aren’t normally closed (e.g.,
- properly nest the elements (e.g.,
<p><em></em></p>not<p><em></p></em>)
For more details on the differences, read the XHTML recommendation.
And here are some general notes for the site:
- avoid visual mark-up like <b> or <i>, instead rely on a class defined in our style sheets and structural mark-up (e.g., for emphasis, use <em>
- comment heavily, so someone coming into the document will know what does what (e.g.,
<!--This commment is an example --> - save pages as
*.html main pages aredefault.html- make the filenames descriptive and intuitive—they should not be overly long
- don’t have spaces in file names (use the underscore instead)
- avoid uppercase letters in file names
- do not splice images unless doing so allows you to optimize the individual pieces so that the total file-size is signifcantly smaller than the original image
- avoid creating graphics with text as it less accessible and harder to translate
- always use the
altattribute inimgeven if the it is blank (i.e.,alt="") or the graphic is only a spacer GIF (this makes the site more accessible) - whenever possible, specify the proper height and width of an image/table/layer (impoves rendering time)
- headlines are <h1>, subsequent subheadings should go in descending order from the main heading (i.e., under an <h2> is an <h3>
For more all-purpose guidelines that should also be considered, read the New York Public Library’s Style Guide.