How messy can Wysiwyg's make your code

[caine]

One of my longer term clients, who i do PT se consultation for has been for a while using a chap who's design skills are improving to an excellant level - better than me. However after taking one of the site's through FP, i deleted out all the surplus code, and now passing it through DWMX, what a mess - though i am just about to start cleaning it up too > W3C loose 4.01 DTD. Looking at it i think i must fail at least on 50 points per page, think i will be working on this all night.

Will work out why all the tags have come onto the pages, then will report back.

[Robert Charlton]

How messy can Wysiwyg's make your code

<p><font color="#339966" size="2" face="Trebuchet MS"><strong><font face="Geneva, Arial, Helvetica, san-serif"><a href="widgets.html">Widgets 
 from WidgetCity</a><sup><font color="#1458AB">&reg;</font></sup></font></strong></font><font face="Geneva, Arial, Helvetica, san-serif"><br>
<font size="2">Enjoy the convenience of online widgets from WidgetCity<sup><font size="1">&reg;</font></sup></font></font></p>

I never did get my head around this one. Lost count of the font tags somewhere along the line. ;)

I've been advised it's not untypical of what Dreamweaver will do with an inexperienced operator. Too bad the board removes spaces, so I can't show how the lines are indented after they're arbitarily chopped up.

[claus]

caine:
- forget it, there's no way you can work out why for each tag, you'll get very old before you finish ;)

Let me get this straight; you took an innocent site, dragged it into FP, and from there into DW? I don't know if DW has the same habit of "correcting code" as FP has, but i would suspect that two wysiwyg editors would add some to the confusion.

Robert Charlton
- very nice example, i think the Trebuchet is just a default that is never used anyway. Still, all the other code gets nested into it... logical, but not nice.

I think the problem is that wysi.. graphical editors record all user actions, desired as undesired, i've even seen something like <b></b><b></b><i>italic</i> because the text should not be bold and then it should and then it should be in italics (don't remember the exact syntax though). And then there's all the prorietary code on top, and the plain errors. It seems to me, that "what you see" is only a small fraction of "what you get", as you inevitably get a lot of unwanted stuff on top of what you wanted.

In other discussions on this topic (outside WW) i've seen results down to 1/3 of the original file size when removing the code bits that didn't add value to the page. I do not use such editors myself (at least not for anything even close to publishing), but i don't condemn them, as they are useful for some purposes, eg. in prototyping, visualisations, mock-ups etc.

/claus

[caine]

Claus

> Let me get this straight; you took an innocent site, dragged it into FP, and from there into DW?

No. Someone else has done this, and dropped it onto my lap.

took me an hour to clean up the first page, so much junk via FP, DW MX - too validation.

[stever]

The junk is because the user doesn't know how to use DW properly (I can't speak for FP).

claus's fourth paragraph is absolutely right - that's what DW does if you add in <b> tags and <font> tags and then take them out again. Which of course begs the question of why one is doing that in the first place.

You can also drive a Ferrari at 120mph in first gear...

On the other hand, DWMX can be and is used to produce clean compliant code using CSS-P and validated for accessibility and correct code with very few problems from within the programme and I would challenge anyone to remove "unnecessary code" from those pages.

[jordanm]

Why not drop the formating on the page and start fresh.. Sometimes though you run into a client that wants to use FP to add and make modifications to a site because they don't want to hire anyone else to do it nor do they want to spend money and learn DWMX. You build the site in MX and they mofify in fp, very messy... but the site functions.. sometimes you just can't worry about messy code.

[europeforvisitors]

If you're going to import existing pages into an editing (any editor--I've been given templates that self-destructed when opened in HomeSite), you need to set the editing program's options or preferences so it won't alter the imported code.

In FrontPage 2002, you can do this as follows:

1) From the "Tools" menu, select "Page Options."

2) A dialogue box will display. Select the "HTML Source" tab and check the box that reads "Preserve existing HTML." (The other option, "Reformat using the rules below," is for users who want to impose a specific HTML formatting style.)

[pageoneresults]

caine, take it back into FP and do as europeforvisitors suggests. But, you will probably need to check the box to apply your new formatting rules instead of preserving existing html. You want to incorporate your new preferences into those pages. Once you've done that, then you can switch back to preserve existing.

Then take it one step further by viewing the page in normal view. Select All (Ctrl + A) and then Remove Formatting (Ctrl + Shift + Z). This will strip all of the html styling markup and leave you with the raw code. There is an optional way to do this in html view. Right click the page and select Reformat HTML to apply your new rules. You can also apply XML formatting rules.

Then there is the process of applying that formatting back to the elements. Typically what I do is the plan the style sheet in advance. That way I can methodically work from the top to the bottom of the page and apply styles using a combination of the FP styling menu and working in html view (hand coding).

Give me a page with the hundreds of usual errors and I'll have it validated strict in less than 30 minutes. Most of the time anyway. ;)

P.S. Once you've cleaned everything up, you can double check yourself by viewing the page in normal view and Reveal All (Ctrl + /) which shows you all the html tags (starting and ending) and anything inbetween. One other feature you should always have enabled Show All (Ctrl + Shift + *).

[zoobie]

What happens with "those" editors is, when you make a mistake and backspace or whatever, it closes the tag then reopens another with the same settings. Pretty soon, you have a page full of font tags all saying the same thing.

[woop01]

I highly recommend checking out the FP 2003 beta. It writes much cleaner code than previous versions. It even has an "Optimize HTML" tool.

[mattglet]

i have a designer that uses dreamweaver exclusively, and produces some of the most horrible code you've ever seen in your life. for an anal HTML-formatting person like myself, it probably has already taken years off my life.

i have heard of these magical things that one can do about cleaning up dreamweaver code, but can never remember what. can anyone point me in a direction to find these commands? thanks.

-Matt

[stever]

Dreamweaver doesn't produce it, your "designer" produces it. Regardless of whether a wysiwyg or Notepad, surely a designer should be expected to produce valid html?

It is entirely and eminently possible to use DW without producing a mess - the fact that people do produce a mess has to do with their lack of fairly basic skills more than the programme itself.

In answer to your question, look under Commands - Clean Up HTML/XHTML and you will find plenty of options there.

[mattglet]

steve-

just to clear up my previous post:

i am talking about what claus and you were pointing out in the upper posts.... how if you do everything in design mode, a lot of excess tags get thrown in.

i agree that the mess is caused by ignorance, and that you shouldn't expect the world from a designer. but, c'mon, can't a person dream? :)

thanks for your help, also.

-Matt