mtcodex

The Danger of Dreamweaver (Part 1)

• home
• work
• about
• journal
• contact

The Danger of Dreamweaver (Part 1) Monday evening, 1 May 2006

Looking at a list of ‘Failed Redesigns’ I thought it was about time to address an issue which i’ve noticed a lot lately.

It’s the problem of Dreamweaver professionals who simply don’t have a clue about websites. Oh sure, they could re-arrange some lists or put in an image tag but that’s probably about it.

This is going to be a three part series, the first part looking at the problem, the second at the excuses, and the third at the solution.

For this first part i’m going to pick a website (not one i’m in anyway related to) to illustrate the problem, and the lack of understanding that is evidenced when developers learn to use Dreamweaver instead of learning to use HTML.

The victim? The New York Observer.

I’m going to take three examples that show you the dangers of learning Dreamweaver. This is not intended as a high-horsed snub to all those Dreamweaver users, the fact is until a couple of years ago I was amongst them, making all of the same mistakes. So let’s begin.

1. Obtrusive Javascript.

The whole point of modern coding techniques that utilise HTML / CSS and Javascript is to separate the three elements of an web page. This makes it easier maintain and means you know where to look if you want to change an aspect of a page.

These are the content (HTML), the presentation (CSS), and the behaviour (Javascript). Kinda like earth, wind, fire they don’t mix very well, but websites being produced today, particularly at big agencies using software like Dreamweaver still stir the majority of this into the HTML and just separate out a few key assets here and there.

The Observer has 56 lines of inline Javascript along with a further 36 instances of inline event handlers. While the inline Javascript is the fault of the developers, the inline event handlers are default Dreamweaver code. All added without any understanding of how Javascript really works (and forget the DOM).

<a href="../homepage.asp" onMouseOver="MM_swapImgRestore();MM_swapImage('pageOneBtn','','./images/btns/pageOne_over.gif',1);
MM_showHideLayers('pageOne','','show','politics','','hide','finance','','hide','media','','hide','theCity',
'','hide','prperty','','hide','culture','','hide','love','','hide','opinions','','hide',
'ourCrowd','','hide','theDailyObserver','','hide')"><img src="./images/btns/pageOne.gif" alt="Page One" 
name="pageOneBtn" width="91" height="24" border="0"></a>

Also notice the border"0" on the image tag. This unnecessary attribute is added to remove the blue border from the image (as it’s a link) that could be removed globally from the site with one simple line of css:

a img {border:none;}

2. Chubby Style Sheets (CSS)

CSS offers powerful features to style the various aspects of a webpage. The superpowerful part of CSS comes from the cascade and inheritance.

For example, if I want to set the default font family for the page, lets say I fancy ‘Times New Roman’, I can apply it to the body tag and by magic it will apply itself to all the children of body. This can be done with a single line of CSS:

body {font-family: "Times New Roman", Times, serif;}

Until I witnessed it with my own eyes I didn’t believe what i’m about to tell you happened in real life! Some Dreamweaver users set every single style via the CSS property setting panel in Dreamweaver (see the pic), which doesn’t understand inheritance and so set the same properties over and over again.

How many times is the font-family unnecessarily set on the New York Observer? I’m glad you asked - 58 times too many!

That other cool thing, the cascade, is barely used, the most complicated example I saw was a class, followed by a tag with a pseudo selector:

.newsBoxTitle a:hover { ... }

You’re not going to get far with that, i had a look at my most recent project and found the longest selector:

table.schedule tr.hour td.first div {margin-top: -8px; position: absolute;}

I’m not trying to show off, that was quite an extreme example of a specific situation, and hence it was a very short on actual style declarations. Dreamweaver CSS is constantly full of similar length classes, redefining the same stuff, and consequently the HTML is blighted with divitis and classitis, which brings me nicely to my next point.

3. Meaningless Markup

Having looked briefly at the Javascript and the CSS, lets see what damage the premier web development tool can do in the hands of a web pro when aimed at HTML!

Well, we already know it’s full of obtrusive javascript, they actually made room for some inline CSS too, can it get any worse?

Sure! 198 validation errors later we see among other things, script tags without a type attribute, duplicated IDs (lots of these), missing alt attributes, missing tags, unencoded ampersands and invalid attributes.

This means there’s not much chance of parsing this on alternative devices, those with disabilities may as well look else where, a screen reader would have some severe difficulties. This site isn’t even XHTML (slightly stricter), it’s just HTML.

And thanks to all those divs and repeated ID attributes no meaning is conveyed by the markup, it’s just a giant hack to make it look okay in the browser window.

Don’t forget: ‘Dreamweaver 8 is the industry-leading web development tool, enabling users to efficiently design, develop and maintain standards-based websites and applications. ’ Enabling being the key word, a text editor lets you do standards-based websites better than Dreamweaver can!

Conclusion

This really is not an exceptionally bad example, this is common practice for some agencies that claim to specialise in web design and development. Dreamweaver expertise is very often a requirement for getting a job at these places. But Dreamweaver is not the web, it’s not html, it’s a feature packed tool for letting people create web pages without having to understand what they’re doing.

Check back for part 2 to see some of the reasons companies stick by their guns with Dreamweaver, and why their reasons often don’t hold water.

Comments

<td width="87" height="27"><a href="/detection/" onMouseOver="popUpOn(menuDetection,'divMenuDetection',getValue('menuDetection','x'),getValue('menuDetection','y')+27)" onMouseOut="popUpOff()"><img src="/images/menu/button_detection.gif" name="menuDetection" width="87" height="27" border="0" alt="Detection" onMouseOver="changeImages(this,menuDetectionOn)" onMouseOut="changeImages(this,menuDetectionOff)"></a></td>  

<li class="detection"><a href="/detection/">Detection</a></li>