How to Design Maintainable Web Page

The concept of creating a maintainable web page is not some kind of voodoo magic but is pretty simple if you follow some basic rules. The process starts by creation of a content file with the text and all semantic tags which is also known as html file. Second step is defining view rules and it is done by creating cascading style sheets.

Content

When you want to create a good design you should start with creating content first. It helps you to see page as complex file and not just by some separated blocks. It also helps you to realize the semantic meanings of all markups. The first advice is to start html first. Second advice is to use your head and create the file as simple as it gets, by using proper tags for all elements, e.g. for address you will use address tag.

Form Tips

You should use same style for forms in your whole website. Styles should be clean and easy recognizable. The end user should not be thinking if this is a form or not.

Larger forms can be group into sets using fieldset tag. You should use this option if your form is long.

Use labels with correct for specification.

<fieldset>
    <legend>Billing Address</legend>
    <label for="billAddress">Address</label><input type="text" id="billAddress" name="billAddress" />
    <label for="billCity">City</label><input type="text" id="billCity" name="billCity" />
    <label for="billProvince">Province</label><input type="text" id="billProvince" name="billProvince" />
    <label for="billPC">Postal Code</label><input type="text" id="billPC" name="billPC" />
</fieldset>

Doctype

Specify your doctype correctly. Doctype definition will affect browser rendering.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Don’t limit yourself with few tags you know. For various purposes there is a lot of various tags. You should know each of them and use them for their semantic purpose.

View

Current view of web page should be defined only in cascading style sheets. If you want to make any visual change on your site and you have to edit html file, you are doing it wrong.

Reset

When you start defining your view you should reset various browser definitions for html elements. It is preferred not to use global * selector but to reset tags manually. Here is a modified YUI Reset:

html { color: #000; background: #FFF; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn,em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit;}
del, ins { text-decoration: none;}
sup { vertical-align: baseline;}
sub { vertical-align: baseline;}
li { list-style: none;}
caption, th { text-align: left;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
q:before, q:after { content: '';}
abbr, acronym {border: 0; font-variant: normal; }
legend { color: #000; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
input, button, textarea, select { font-size: 100%;}

Specificity

Specificity tells you the importance of current style. You should never use the keyword !important and only use CSS identifiers hierarchy.

Specificity can be simply measured. The measure of specificity is computed by adding numbers for different identifiers and higher value wins. If two or more have the same value, last one wins.

Inline style is for 1000 points, id classification for 100, class and pseudo-class 10 and element or pseudo-element for 1. So in

body #content .data img:hover

the specificity value is 122. 100 for #content, .data and :hover for 20 and body and img for 2.

Typography

Proper definition of typography elements helps your readers to quicker and more comfortable reading of your page. Check this site for few tips how to handle vertical rhythm.

Mind the Mobile Devices and Printing

Define your style sheets for mobile devices and printing devices is very useful and it doesn’t cost you almost anything at all. All you need to do is to insert definition for this type:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />

Simple definition for print.css

* { background: transparent !important; color: #444 !important; text-shadow: none; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; }
abbr:after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; }  /* Don't show links for images */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3, h4, h5, h6 { orphans: 3; widows: 3; }
h2, h3, h4, h5, h6 { page-break-after: avoid; }

and here is an example style sheet for mobile devices:

* { float: none; font-size: 80%; background: #fff; color: #000;}