Web Development Best Practice
For what it's worth, here is my opinion on the subject of front-end web development best practice. This document assumes you are already coding confidently with HTML and CSS. It is also highly subjective! It covers everything from choosing a doctype to SEO tips and suggestions on how to make your pages more accessible.
Doctype
For sites that don't use a rich text editor CMS it is recommended you try to code to the XHTML 1.0 standard:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"For sites using a rich text editor CMS it cannot be guaranteed that the resultant pages will be valid XHTML so it's best to stick to HTML 4.01:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML
- Use semantically correct markup:
- If you have a heading, paragraph or list of items (navigation/menu) use the heading element (beginning with <h1>), the paragraph element (<p>) and the list item element (<ul>) respectively.
- Don't use CSS defined colour, <strong> or other markup that has no semantic meaning for headings.
- Limit the use of <br> tags as much as possible – use display: block on the preceding element instead. Don’t use multiple <br> tags for spacing, use CSS padding or margins instead. Don't use <br><br> to fake paragraph breaks.
- Code all menus/navigational as lists. Don't use the pipe | symbol to separate links, use CSS borders instead. Characters that have no semantic meaning should be avoided.
- Use <strong> and <em> in place of <b> and <i>.
- Think about definition lists and use them when appropriate.
- Avoid large amounts of nested divs. Don't use extra markup to render design elements such as drop shadows, rounded corners etc. Use the existing tags and think creatively. For example, if you have an extendable box that has rounded corners put the bottom corners as a background image of the container div (aligned to the bottom) and the top corners as a background image of the first element inside the box – usually a heading.
- Validate all your HTML and CSS.
Accessiblity
- Avoid the use of image elements in the HTML for logos, headings etc. Use image replacement techniques instead. Eg.
#searchProducts h2 {
background: url(../images/h2_searchproducts.gif) no-repeat;
text-indent: -1000em;
} - If non-standard font headings are to be pulled from a CMS consider using sIFR.
- Use a negative text-indent (text-indent: -1000em) to hide text, not display:none which is ignored by screenreaders.
- Use a "skip to nav" link at the top of the HTML to link to the navigation further down.
- Create accessible tables with table summaries, table headings, and captions.
- Create accessible forms using labels and fieldsets. Use headings in place of the legend element which cannot be styled with CSS.
- Use "ems" for font sizing.
SEO
- Don't use images for titles, use image replacement techniques. Avoid image replacement techniques for menus/lists of links.
- It is better to make the h1 element contain page specific content rather than the name of the site - save that for the <title> element.
- Re-order the HTML and use relative/absolute positioning in order to keep content-rich areas at the top of the page, roughly:
<div id="container">
<h1>Page Specific Title</h1>
<div id="content">
</div>
<div id="nav">
</div>
<div id="footer">
</div>
<div id="header">
</div>
<div id="ads">
</div>
</div>
CSS
When creating your div layout, consider using the conventions shown below (shown in design order rather than HTML order). Any divs inside the #content div should be given id names relevant to their content. This is so links to these sections will make sense. Eg. www.site.com/index.html#intro
- Consider including the Yahoo reset.css file in all projects.
- When naming classes and ids don't use underscores or hyphens - use camelCase.
- Make id and class names as short as possible.
- The best way to make sure others can understand your code is to create a single stylesheet split into sections with comments:
<!-- default styles -->
all styles applied to page elements h1, p, a etc
<!-- common styles -->
all styles used on multiple pages .pagination, form styles, menu styles etc
<!-- layout styles -->
#container, #header, #footer etc
<!-- listing page styles -->
page specific styles: homepage, listing page, detail page etc - Do not split styles into typography, colour etc., use only one entry for each class or id. This helps others understand your code and limits the size of the stylesheet.
- Use the FNE (Float Nearly Everything) method for clearing.
- Avoid box model problems by not using padding/margin and width in the styles for a single element.
- Don't use hacks or conditional comments - be creative instead. Don't use styles only certain browsers support, eg. transparent borders.
- Don't use quotes when specifying background image urls. They are not needed and cause cross browser issues.
- Use shorthand wherever possible. Eg.
margin: 10px 5px 3px 0;
color: #fff;
background: #fff url(images/shoe.gif) no-repeat
Print Styles
- Because most browsers turn background printing off by default, site logos won't print if you are using an image replacement technique. Instead, put a print version of the logo in the HTML and use CSS to hide it and show a background image that displays the screen logo, eg:
<a href="../Home/" id="siteLogo">
<img src="../images/logo_print.gif" alt="Logo" width="204" height="79" border="0"></a>
#siteLogo {
background: url(../images/logo.gif) no-repeat;
text-indent: -1000em;
width: 204px;
height: 79px;
display: block
} - Don't use "print this page" links - use a print stylesheet instead. Educate your client as to why we no longer need them.
- To increase readability and cross platform compatibility it is best to take out floats, background colours and advertising. Please read my article on print stylesheets for more information.
Testing
If you can't convince your client to accept graded browser support, it is advisable to test your sites in the following browsers:- Windows
- Internet Explorer 5.5 and above
- Firefox 1.5 and above
- Opera 9 and above
- Mac OS
- Firefox 1.5 and above
- Safari 2 and above
- Opera 9 and above
Common IE 6 bugs and how to fix them
- Peekaboo bug
- Part of the page disappears until you scroll down or mouse over links.
- Guillotine bug
- The Guillotine is a bug that chops off the bottom part of floated elements when certain links are hovered over.
- Duplicate Character Bug
- Text characters from the last of the floated elements are sometimes duplicated below the last float.
- The direct cause is nothing more than ordinary HTML comments sandwiched between floats that come in sequence. Remove the comments!
- Doubled Float-Margin Bug
- If you float an element in the same direction as a margin on that element (eg. float: left; margin-left: 10px) the margin will be doubled.
- Avoid doing this or alternatively add display: inline to the element.
- Gaps between list items
Useful websites
- Tools
- Lorem Ipsum generator
- ASCII Codes
- Software
- Firefox
- Firebug
- Homesite
- Firefox and IE developer toolbar
- Firefox HTML Validator plugin
- Firefox switch to IE plugin
- sIFR
- Blogs
- http://www.richinstyle.com
- http://www.positioniseverything.net
- http://brainstormsandraves.com/
- http://www.alistapart.com
- Validators and accessibility checkers
- W3C HTML and CSS validators
- W3C Accessiblity Guidelines
- Accessibility validator
Comments
2 things that have really helped me in the past year are understanding "haslayout" (http://www.satzansatz.de/cssd/onhavingla..) and possibly a little more controversially (but this has saved me hours) conditional comments: (http://www.quirksmode.org/css/condcom.ht..) - hope someone else finds these links as useful as I have. 20 March 2007 from matt keogh