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.

CSS making sense

One of the things that is encouraged when designing standards compliant sites is correct naming of id and class selectors in your stylesheet.

Continue reading CSS making sense…

The long-lost multi-column layout

Ok, it’s not “long-lost” but I had to think up a nice title, ok? And besides, it’s more in reference to the method of doing the multi-column layout. Although that’s not “long-lost” either…

Ever since I saw a guy do a presentation on usability of web sites, I’ve wanted to see a layout that was correct in it’s coding, took minimal hacks of code, and used as little code as possible (i.e. no unecessary DIVs). A few weeks back I found an article on A List Apart just like this. I immediately implemented it in the template for www.websitewriters.co.za.

Continue reading The long-lost multi-column layout…

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.