websitewriters.co.za

Helpful Tools

As my second article, I thought I would just quickly highlight some of the tools I use to create standards compliant web sites.

My editor of choice is Quanta+. It has all the features of a modern IDE, and really helps my productivity. It’s text editing capabilities alone (code completion, autocomplete, etc.) keep me hooked. However, if I’m in Windows, then I use my own editor, RingHTML 3.0, which I’m modeling on Quanta+.
Of course, the first additional tool I use is my browser, Mozilla Firefox. I write my sites too look perfect in Firefox, and then I adjust them for Internet Explorer. I’ve found this to be the most effective way of doing things. Generally (and this is a bit of a bit “generally”), if my sites work in Firefox, they work in Opera, Konqueror, and Safari as well.

Of course Firefox’s extension mechanism is ideal for extra tools right in the browser. Here are some of the extension I have installed, and which I use when developing site designs:

• Html Validator: Very handy, this extension validates your site without you needing to visit the validator at w3c.org.
• Aardvark: The Aardvark extension dynamically shows you all the elements, and their classes and id’s, when you hover over them.
• Web Developer Toolbar: Another absolute essential, you can do a multitude of things with this toolbar, including outlining of elements, viewing id’s and classes, etc.
• Fangs Screen Reader Emulator: This extension will pretend to be a screen reader, and will show you the output a screen reader would “say”. An almost must-have for accessibility.
• ColorZilla: Like that colour on a site you’ve seen? Grab it with ColorZilla.

Got any tools you use that you think are indispensible? Add your comment.

The "Right" way to use an image as your header title

You can use css (cascaded stylesheets) to make your site more accessible to everyone, including those with sight problems.

For instance:
Your site uses a nice large image as it’s title logo. While it’s cool for those who can see, what about those who can’t see? They use screen readers, which basically read out what’s on the screen. The only problem is that when a screen reader comes to an image, it just says “image”. Bummer… now where’s your web site title?

Here’s a little trick I thought of to overcome that particular problem, but one which could be used elsewhere.
create a div with a heading:

<div id="header">
  <h1>mp3taxi.com</h1>
</div>

Then, in your css file, you set your h1 to not display, and your div to show the image, like so:

#header
{
  background: url(../images/main_logo.png) no-repeat top left;
}

#header h1
{
  display: none;
}

So then what happens is that your image shows in css-enabled browsers, and in other browsers, you see the heading, “mp3taxi.com” in nice big letters.
Now, if you go to the site I’ve just been using as an example, you’ll see that there’s another background image that stretches across the whole of that header section, as well as the title header… I simply added a span in, and rearranged my css slightly… see below:

<div id="header">
  <h1><span>mp3taxi.com<span/></h1>
</div>

#header
{
  background: #ffff00 url(../images/headerbg.png) top left repeat-x;
  color: #000000;
  height: 88px;
}

#header h1
{
  margin: 0;
  padding: 0;
  height: 88px;
  width: 281px;
  background: url(../images/main_logo.png) no-repeat top left;
  float: left;
  color: #000000;
}

#header h1 span
{
  display: none;
}

with css:

without css:

happy coding!

Get indexed in search engines before your site goes live.

Your sites SEO(Search Engine Optimization) does not have to start the day you ‘go live’, it can start days, weeks even months ahead with a nicely written page about what the site is going to be about.

In the case of siteb (site we’re currently building for a client) we built a simple page with the look and feel of the final product, some content, metatags & a contact page. A few days later it was Googled and what do you know. #5 for their specific product & number1 on Google South Africa. This makes life so much easier when you officialy launch the site, not having to worry and wait to get it indexed by the major search engines & I’m sure it will make your adwords budget bareable.

Things NOT to do before you launch a new website:

• An animated gif with an Under Construction sign, its not 1999.
• Coming soon as the title

Things you should do before you launch a new website:

• Ensure that visitors know what the site is going to be about.
• Content is King, Queen, Jack & Ace so at least a paragraph of valid copy with a few keywords are critical. The Search Engine Robots will love you for it. Don’t give everything away at first, but rather update it as often as you like giving your target audience a reason to return & the search engine spiders a little bit more to index every time.
• Make sure visitors are able to contact you with a contact form or telephone number, depending on what kind of site it is.

If you are planning to sell any product or service on the world wide web know that Google , or any search engine, will be responsible for the majority of your customers.