HoomanB.com/cs - Web Design Tips

Web Design Tips

Last updated: March 18, 2006

After redesigning my own site using pure XHTML & CSS style sheets, I learned some very important tips for designing a good web site and I'm sharing it with you so hopefully we can make the web a better place for all users.

Use HTML code
If you try my next tip, you will find HTML code easier to use than graphical (WYSIWYG) HTML editors. Once I spent my x-mas vacation cleaning up the messed up code FrontPage wrote for me & I've tried a dozen other programs on different pages. I find Dreamweaver to be very good. But after working only 20 or so pages in pure HTML I found HTML code easier and faster than WYSIWYG editors. Don't let the coding freak you out. HTML is a markup language, you don't need to be a programmer. There are editors (like Quanta Plus in Linux) that make HTML coding fast and easy for example by automatically closing your tags, etc.
Choose elements based on the function not the looks
Use h1 for heading, p for paragraphs, ul/ol for lists, etc. and everything will look like what it's supposed to look like.
Use CSS style sheets
Use XHTML 4 and just use the tags based on their function (forget about alignment and font names and sizes). Later add CSS (cascading stylesheet) to make the page look COOL. This way not just you write one page and change the looks at once for all pages, you will have a lot more options than regular HTML and can have several different styles. Yet another feature is that you can have a style for the person with impaired vision.
- Use relative units (em instead of px)
  The em unit is relative to the font size, so if the user decides to use a larger font the text won't fall out of place. Sure it's much easier to use pixels but you design the site once, people visit it possibly a million times. This article explains why you should use em instead of px or even percentage.
- Use divs instead of tables
  One of the most annoying things I notice when I work with existing web sites is the use of nested tables to position the items on the page. As I explained above, HTML tags should be used based on function not format. With divs you can change the position of items in any way you want using stylesheets, divs are only a single tag while every table that you nest has multiple tags (for row, columns etc) which will definitely make the page unmaintainable in the future. Nested divs can be ignore by not adding any style to them, so if you decide to change the position of items or choose a completely new format, you can edit the stylesheel instead of your HTML code. Plus, divs make your site more compatible with mobile devices, search engine robots, etc.
Follow the standards first, try different browsers next
I just go nuts when I contact webmasters about an error and they reply saying "Oh, we tried this on an older version" or a different browser. In fact that's when I decided to type these tips/ If you use standard HTML your page looks nice on any browser. No need to mention "Designed for ..." (Visit for more information on the standards for HTML, CSS, etc.)
Side-note: Since we don't live in a perfect world and certain browsers, IE being the most obvious, don't follow standards correctly you will find your standard web site isn't working on some browsers. Only after you design a web site by following the standards you can look for solutions to fix the problem on those browsers.
Don't assume high speed connection for the majority
Even though most people use high speed Internet with their computers you should know that many people use devices other than desktop computers. Mobile devices are becoming more popular every day.
Avoid Flash as much as you can
Many people don't have Flash and many other don't appreciate a plug-in that makes the page slower when it doesn't have to be there. Or, for example, Flash does not let people use the Back/Forward buttons in the browser or save the information in on-line forms. Use it only when you have to (applications, presentations, games, etc. not web pages or decorative animations)
Name your links - Don't use "Click Here"
...also try to use default colours. People know these are Links and click on them, you don't have to ask them to.
Try to avoid pictures for menus
Try text for menus (use CSS to beautify if you want that). Pictures, specially those with roll-overs make pages slow. But if you really want to use pictures to have nice effects then make sure you add the name of the link to the "alt" property of the image so it works on mobile and text-based browsers.
Be carefull with choice of colours
Remember that some people may confuse colours that have a similar hue or contrast. Also try using 2-3 colours maximum for your text.
For further study...
Read the Top Ten Mistakes in Web Design by Jakob Nielsen.