AmosFiveSix.com

Experience, Knowledge, Creativity

  • Increase font size
  • Default font size
  • Decrease font size
Home Websites My Standard Web Design Practices

My Standard Web Design Practices

E-mail Print PDF

During a phone interview recently I was asked what practices (layout, accessibility, etc.) I used during web design. So here's a quick write-up of what easily came to mind. It's not exhaustive nor in any particular order.

  1. Tables are for tables. Don't use tables to format your content. Only use them if you actually need to display data in a tabular format.
  2. Use appropriate header tags progressively at the appropriate levels. The title/text that describes what's on the current page should be in an H1 tag. Sections below that should use H2 for their titles, etc. Don't use an H4 tag if you don't have an H1, H2 and H3 above it.
  3. Use appropriate tags for the content. Use header tags for headings, use P tags for paragraphs (not DIVs!), use OL and UL for lists, etc. Don't try to use DIVs or SPANs with goofy formatting for everything.
  4. Make sure your content looks orderly and readable even if there's no CSS. Text only readers will ignore most if not all of your CSS.
  5. Make sure links are visually obvious. Underlining is the standard cue for links. Don't take that away from your users.
  6. Always provide an ALT attribute for your images. But you knew that, right?
  7. Make sure the TITLE tag contains something meaningful. Don't use "Home Page". A good idea is to include the company/site name and the name of page/article/content. But don't make it too long. Remember, this is what people will see in their bookmarks if they bookmark your page.
  8. Don't try to find clever ways to make lists with custom graphics or tables. Use UL and OL tags and style with appropriate CSS.
  9. Consider people who are blind, color blind, have limited vision, use text-only browsers, etc.
  10. Test the colors on your site to make sure they don't cause problems for people that are color blind.
  11. Test your site with all of the browsers that your visitors might use. Check the stats for your site to see what browsers people are using and make sure you support them.
  12. Try resizing the browser window up and down in all of your supported browsers. Sizing to really small or really large windows can make some formatting go goofy.
  13. Always use relative units (preferably EM) for font sizes and try to use it for all of your other measurements. This allows browser text sizing to work properly. Don't rely on page zooming provided by newer browsers. Some people just need your text to be larger, not all of your images and everything else.
  14. Test your site at different text sizes in all your supported browsers. Make sure your site looks OK at larger sizes.
  15. Test your site in a text-only browser to make sure the content is ordered well.
  16. Use well formed HTML. Close your tags, use quotes around attributes, etc. Browsers will still work OK with bad HTML so who cares? You do! Be professional in everything you create. Always do it the correct way instead of taking shortcuts and you're less likely to run into problems down the line.
  17. Don't use obscure images for navigation links. Use text or add a text label. People won't click on your links if they don't know what they are. Mystery Meat navigation helps no one.
  18. Don't add tool tips (TITLE attributes) that are same as the link text. It doesn't add anything helpful and it's visually distracting. If you use TITLE attributes, make sure they are really necessary and add something useful. Don't use them just because they're "cool" and another feature you can throw in.
  19. At the start of your page, add a section with links to the main content areas on your page (navigation, text, footer, etc.) for non-visual browser. You can use CSS to position the section off of the page are so visual browsers won't display it.
  20. Pick your DOCTYPE before you start and then stick to it for all your pages. Different DOCTYPEs can make different browsers display your content differently.
  21. Validate your HTML and CSS. If you code properly you shouldn't get any errors.
 

Subscribe

Subscribe by e-mail:

Site Search

Google Ads