Web Development Docs

This list is intended as a starting point.
  • Static HTML should be static and not generated with php or templating engines.
  • Have a good doctype declaration.
    • At time of this writing HTML 4.01 is preferred over XHTML 1.0 and HTML 5.
    • Make sure all content complies with the used DTD (avoid mixing HTML and XHTML).
  • Put Stylesheets at the <head>.
  • Put scripts at the bottom of the <body>.
  • Make JavaScript and CSS external (no inline style or script).
  • Use a CSS reset (unless you really, really know how to handle quirky browser defaults).
  • Understand CSS positioning.
  • Make a cacheable favicon.ico.
  • Validate HTML/CSS and run JSLint on JavaScript snippets.
  • Avoid doing styling with JavaScript as much as possible.
  • All pages should load under 10 seconds.
  • Degrade gracefully:
    • The page should at least give a warning for lack of JavaScript (use <noscript>).
  • Avoid <div> as much as possible.
  • Understand the difference between inline and block elements.
  • Avoid iframes as much as possible.
  • Avoid class grouping and addressing if possible.
  • Have a logo and link to home page at the top left corner.
  • Have a proper footer with links to Contact Us, FAQ, About Us, and Copyright notice.
  • Clickable images should resemble buttons.
  • Infographics should represent actions (not just objects).
  • Have consistent colours for backgrounds and site functionality.
  • Text links should be underlined at all times if possible.
  • Use breadcrumbs at the top for all pages but the homepage.
  • Forms should flow vertically (no eye zig-zagging).
  • Validate user input with JavaScript and also at server side.
  • Avoid Flash as much as possible.
  • Use tables only for tabular data display.
  • Style should allow reflow of content as best as possible.
  • Visited links should change colour.
  • Have a good simple search with misspelling support.
  • Avoid PDF as much as possible.
  • Text blocks should be easy to scan-read helped with <em> and <strong>.
  • Use a readable font size.
  • Avoid banners.
  • Follow design conventions for non-artistic websites.
  • Avoid opening pop-ups and other browser windows.
  • Help the user in making decisions with design hierarchies of content and colours.
  • Web pages shouldn't break when users go back.
  • Avoid animated images as much as possible.
    • Animated images or video should have an option to stop or be removed.
  • Try to use well compressed and cross-browser compatible PNGs (online conversion)
  • Have a good robots.txt file.
  • Create an XML Sitemap file for indexing.
  • Watch out for XSS.
  • Watch out for CSRF on JavaScript/JSON resources.
  • Store safely all sharp objects and check for Microsoft Internet Explorer compatibility.
  • Check page rendering with multiple browser tests.
  • Go through a good website launch checklist.

Resources:
Advanced
  • Understand Browser security, start by reading this very good handbook

Comments