5 Steps to a Successful Web Design (or Re-Design) Part 3

Tweet

Today we bring you part three of a four-part series on effective website design.

Step Four - Code.
This is written for someone with some knowledge of HTML and CSS.

There are tools available to aid a designer when coding the front-end of a website. First of all, you will need an HTML editor. There are a number of very powerful applications available for editing: Adobe Dreamweaver, Aptana Studio, Coda (Mac), TextMate (Mac), but editing can also be done in something as simple as NotePad or TextEdit. Second of all, every web designer should have every major browser loaded on their system for testing. For multiple versions of Internet Explorer, I suggest IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage. Some other tools to be aware of are Firefox add-on called Web Developer Tools https://addons.mozilla.org/en-US/firefox/addon/60 and FireBug https://addons.mozilla.org/en-US/firefox/addon/1843. These tools allow you to debug and monitor code on any pages you build.

Now that you have the right tools there are some good rules of thumb to follow when actually writing your code.

1. Start the document with the correct doctype. This is the very first part of any web page:
2. Place all custom Styles into external CSS files and link between the tags of the HTML document.
3. Reduce page load times by placing any at the end of the document, just before the ending tag. This may not work for all but it is worth experimenting to reduce load times.
4. For ease of readability, indent HTML tags that are inside of other HTML tags and comment after closing tags so that their hierarchy is clear.
5. Learn all of the HTML tags.
6. Learn all of the CSS attributes
7. Use CSS shorthand and combining properties in a single line. This is more efficient for the browser and more efficient when editing.

The original CSS…

• p {
  
  • font: bold 12px "Trebuchet MS", Verdana, Arial, sans;
  • font-style:bold;
  • font-weight:bold;
  • color:#000000;
  • font-family: "Trebuchet MS", Verdana, Arial, serif;
  • font-size:12px;
  • margin-top:6px;
  • margin-right:10px;
  • margin-bottom:8px;
  • margin-left:20px;
  • border-width:1px;
  • border-style:solid;
  • border-color:#333333;
  • padding-top:6px;
  • padding-right:6px;
  • padding-bottom:6px;
  • padding-left:6px;
• }

..can be re-written, using CSS shorthand, as…

• p {
  
  • font: bold 12px "Trebuchet MS", Verdana, Arial, sans;
  • color:#000;
  • margin: 6px 10px 8px 20px;
  • padding: 6px;
  • border: 1px solid #333;
• }

8. Organize your CSS using comments as seperators. This will also make editing more efficient.
Ex: /* ------ Global Styles ------ */
9. As mentioned in the design step, accessibility is very important. Use the W3C accessibility guidelines [http://www.w3.org/TR/2008/REC-WCAG20-20081211] for reference.


**********************************************************
Tune in Monday, April 12 for Part 4 of the series