Can You Tell if a Site Was Built By Manual Coding or With a WYSIWYG Editor?

Hey folks, for your hardcore web developers/designers, if you look at the source code of a site, can you determine if it was built by manual code, or with a WYSIWYG editor like dreamweaver or frontpage?

If you can tell the difference, can you please tell me what those differences are.

Thank you.

 

i dont think there is straightforward way of knowing that.

 

Thanks webcosmo..... But I have heard that there is a way. And the person who says so is an advanced designer/developer... Sadly I cannot ask the person to tell me how, hence why I came here... Any other takers please....?

 

Well manual coding might have a bit more whitespace . But someone can take WYSIWYG code and add the whitespace so it's not a surefire way to tell the difference .

 

There are certain distinctions but it also depends on the person using the software... If they use the software in "codeview" and write from there removing some of the crap injected and altering default css class names and such then telling the difference might be difficult.

BUT by default each software suite uses its' own headers, default names and spaces. So if you know what you are looking for, then you can absolutely tell the difference. BUT if someone is very well adapted to cleaning up after the software then you may not be able to tell.....

So to give a definitive answer, NO you can't always tell...

 

WYSIWYG pages are more cluttered and sometimes they leave a meta tag with the software name in it.

 

Considering that the most used WYSIWYG is Dreamweaver you might have a hard time distinguishing pure code from Dreamweaver code .

 

There are a few things that can help you tell (as mentioned spacing can be one, and the meta generator tag is a big one), but if someone wants to make sure nobody knows its created by a WYSIWYG editor, they can. Dreamweaver has some default javascript functions, so if the names of the functions are the same there is a good chance they used it (or stole the js)

 

Source code filled with non-breaking white space ( ) is a telltale sign of a WYSIWYG editor.
Also, they often insert a comment or metadata with their name and version, like <!-- Made with EvilEditor v6.66 -->

 

I know that if you use a WYSIWYG editor as your hosting service/subdomain, it is very easy to tell. The html is cluttered with different things about the editor: ex.
#weebly_page_content_container div.paragraph, #weebly_page_content_container p, #weebly_page_content_container .product-description, .blog-sidebar div.paragraph, .blog-sidebar p{color:#000000 !important;}
#weebly_page_content_container h2, #weebly_page_content_container .product-title, .blog-sidebar h2{color:#000000 !important;}
#weebly_site_title{}
is a site made with weebly.

 

yes there are ways that you can tell if it was built by a WYSIWYG editor, they leave a lot of data

 

absolutely yes. WYSIWYG leave tons of crap code, and have some unique messed up ways to code, also sometimes it leaved some metadata eg "Generated with"

 

Like frontpage does.

 

Hey Cash Nebula.. thanks for this info... it kinda makes sense and it has helped me in what I am trying to do.

.
andresc2.. can you please gimme specific examples as cash nebula has done. Thank you

 

You're welcome

lukezli has a good point, many WYSIWYG editor just dump the styles in with the markup, and they are really bad at separating the presentation and content.
The layout of the source code is also a mess, with huge gaps and indents everywhere.

This page lists heaps of other problems:
WYSIWYG Editors And Bad Markup

 

A site built with a WYSIWYG editor will often contain lines like these:

<p>&nbsp;</p>

Code (markup):

You will also find that every single element will have its own CSS styling, even if they are identical. This makes later editing manually a huge pain.

 

To backup what subdivisions was saying. Look for empty <div> and <p> elements too and if the site is laid out in tables then it is either really badly coded or WYSIWYG.

 

in the first few lines of a dreamweaver site there is often a meta tag saying what version it was made with

 

WYSIWYG - is like McDonalds in programming. At first, some editors signs itself, say Dreamweaver, at second, handcoded pages often look cluttered, as software editors use machine rules to determine tabs etc. At third, handcoding programmers are mainly Pro which write code from head, therefore, they do mistakes. But some are cleancode maniacs and write code better then WYSIWYG software ))

 

I don't know if it's possible to know as there are several tools that can clean up the HTML code so one cannot be sure that S/he have used any WSIWYG editor or not. For example, HTMLTidy helps you to clean up your messed up code.

But you can easily know for human touch or software edit from CSS scripting.

CSS script if codded by hand manually, you'll see un-ordered properties. For example,

.wrapper {
width:1000px;
float:left;
height:auto;
border:#ccc solid 1px;
}

You can see that the properties are not in alphabetical order. This confirms that theres human touch. In case if it was from WSIWYG editors you'll have similar coding:

.wrapper {
border:#ccc solid 1px;
float:left;
height:auto;
width:1000px;
}

This was one of the clue.. another is use of shorthand CSS codes.

.wrapper {
margin:0 5px;
}

This is from human.

.wrapper {
margin-top:0;
margin-right:5px;
margin-bottom:0
margin-left:5px;
}

The above one is from most of the WSIWYG editors.

And the third clue can be use of comments. You can read and confirm the CSS comments used either by software or by human itself.

For example,
Human:
/* Sidebar contents goes here */

Automated CSS codes from editors:

/* #sidebar1 */

Hope this helps.