websitewriters.co.za

The Dreamweaver Syndrome

(Opinion) It is my personal opinion that Dreamweaver breeds bad design. I have enough circumstantial evidence for that. Too many web “designers” use Dreamweaver, and although you can produce standards compliant designs, too many designers rely heavily on the WYSIWYG part of Dreamweaver. And this means that we get Internet Explorer-only designs that are full of tables and HTML attributes and inline CSS.

Continue reading The Dreamweaver Syndrome…

Standards include things like usability

Indeed.

Standards are not just about good markup and good content. It’s also about making a site usable to everyone who visits your site. In this day and age of multiple devices, we’re starting to use cellphones and PDAs to surf the net. Just a few weeks ago I was browsing some forums from my phone, while sitting on the train, for a solution to a problem I was having at work.

Thanks to Opera Mini, I can browse most normal sites using my cellphone. However, that doesn’t mean that all websites display nicely, or work even. As far as I know, there’s no JavaScript support, and there’s certainly no support for things like Flash. Opera Mini runs through an intermediate server however, that optimises content for the mobile device. My built in browser on my phone is pathetic compared to Opera Mini, and how many people use the built in browser? Most do, I reckon.

Just as a good example, take a look at this blog post from Jonathan Endersby. He makes a good point.

By simply sticking to XHTML and CSS standards, and making sure that your site works without plugins and JavaScript, you make it not only future-proof, since most devices will start with those standards, but also available to a wider audience. Think of blind people, other visually impaired folks, and people on cellphones and PDAs, to name a few.

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!