Technical: WYSIWYG HTML editors compared
Location: Forum - Programming - Technical: WYSIWYG HTML editors compared
-
Author: robvdl
User type: Administrator
Posts: 122
Date: June 29, 2006, 5:53 p.m.WYSIWYG stands for "What You See Is What You Get". It is a term that was initially used to describe "visual" desktop publishing programs such as Word and Publisher, as the theory behind it was: What you see on the screen, is exactly how you will see it on paper when printed. For desktop publishing programs this is mostly true, however this is not always the case for web page editors. WYSIWYG web page editors do make editing web pages easier, but some of them don't output very clean, compact or compatible HTML code, some particularly output HTML that only works in a specific browser (they don't stick to actual web standards, but rather only support a specific browser or company). Since WYSIWYG web page editors have been mentioned a bit lately, I wrote a review, of some of the most common WYSIWYG web page editors out there, with some pros and cons for each one. This is a totally neutral look at each tool, from a professional approach. I look at the code that is created, how tidy the code is, how compatible it is with other browsers, and how good the program is following web standards. I hope this will help users choose the correct program for a specific purpose, when first getting into web design.
Before I start, let me explain a little about using desktop publishing programs, or word processors, such as Microsoft Word, or Open Office Writer, for making web pages. Desktop publishing programs are designed specifically for desktop publishing, not really for making web pages. A lot of people tend to start of using a word processor when first getting into web design, however when they convert/export their document to a web page, everything looks and/or prints wrong! Line spacing is too big, hand-made tables (made with spaces and tabs) are unrecognisable, columns disappear, text boxes are gone, and bulleted lists are jumbled up. What happened??? The first mistake many people make is to try to compare desktop publishing to web publishing. Desktop publishing is highly complex and exact. The web lacks many formatting features found in basic desktop publishing software like word processors, presentation software, etc. The two are simply different, and serve different purposes. The best solution, if you plan to maintain an extensive collection of documents on the web and do not have time to "clean up" your documents when converting to HTML, is to create your documents for the web in a proper web page editor to begin with.
Adobe Dreamweaver (Previously Macromedia Dreamweaver)
Dreamweaver is considered the best of the bunch when it comes to web page editors. The products is a little pricey, but it's definitely worth it. The product generaly outputs clean, compatible HTML code, has got good support for CSS standards, and even supports XHTML.
Pros:
- Good standards support
- Reasonably easy to use
- Good CSS support
- Later versions support XHTML
Cons:
- Price
- Tends to use clunky Javascript for image rollovers, where CSS could/should be used
- Some old legacy HTML tags are still used, if you do not select "XHTML" when you first create your document. If you create an "XHMTL" document instead, later versions of Dreamweaver output very good standards-compliant code.
My rating: 9/10
Microsoft Frontpage
Microsoft Frontpage is often one of the first choices for beginners, as it is easy to use. But be warned with Frontpage, it has many pitfalls too. The HTML it creates is not standards compliant, and quite untidy, in places it is even broken. The pages it creates only work properly with Internet Explorer, nothing much else. The other downside to Frontpage, is it's proprietary editing method using templates, and uploading the pages directly to the server within the program, which can be very easy for first time users... but it cannot be ported very easily to another program. A lot of users that tend to get into Frontpage, often find themselves "locked in" and reliant on the program, and when wanting to change to another program or upgrading their skills to the next level, they often have to recreate their site from scratch. Earlier versions of Frontpage required a proprietary web server setup, with "Frontpage Server Extensions" installed, however in newer versions, the "WebDAV" standard is also supported for uploading, which can also work on other platforms. Frontpage also supports scripted elements, which can easily be inserted by the user, without knowing any programming. Howevever, the scripted elements are in ASP and only work on Microsoft IIS webserver. Since the majority of servers actually run Linux, it does kind of restrict the user in many ways.
Pros:
- Very easy to use for beginners
- Easy site management, uploading and templates
- Reasonable price
Cons:
- Output HTML not standards-compliant, only works properly in Internet Explorer. No DTD at the top of the document, some tags are in upper case, some tags are not properly closed, some attributes do not have quotes, some legacy, unsupported, or proprietary tags/attributes are used, e.g. topmargin="0" leftmargin="0" bgproperties=fixed in the section, where CSS should be used instead... the list actually goes on...
- Has basic CSS support, but is primarily hidden to the user, and embedded directly into every page, rather than using an external CSS document. It even uses some capital CSS selectors in places, which is invalid.
- No XHTML support
- Templates and built in site management is easy, but locks you in to using a proprietary method for maintaining your site. Your site cannot easily be ported to another web page editor, if you want to move on to a higher level.
- Early versions of Frontpage used the proprietary "Frontpage Server Extensions", although this has now been fixed in newer versions, with support for the "WebDAV" standard.
- Scripted elements are nice, but are in ASP and only work on Microsoft IIS webserver, locking the user to a Windows based server, which costs a lot more. Also the majority of servers actually run Linux instead.
My rating: 4/10
Frontpage Express
Frontpage Express is a cut down version of Frontpage, which was once bundled free with older versions of Internet Explorer (5 or 4?). Frontpage Express is no longer bundled with IE6, and the last version that Microsoft released was v4.0, which is now very outdated, I wouldn't really recommend using the program for making modern websites.
Pros:
- Like Frontpage, very easy to make websites
Cons:
- Shares the same codebase as Frontpage, it also creates pages which are not standards-compliant and only work in Internet Explorer.
- Lacks the site management features of Frontpage
- Has templates, but are more simplified and cut down compared to Frontpage
- No XHTML support
- No CSS support
- Was free, but no longer developed by Microsoft
My rating: 3/10
Microsoft Word
Microsoft Word is not actually a web page editor but a word processor (see my explanation above), and I would definitely not recommend using this to start building websites in. Microsoft word creates the most incompatible websites out of the lot, a lot of unusual tags are inserted that only work in Internet Explorer. The outputted HTML is bloated, and in places, I have even seen text rendered to images. In general, Microsoft Word doesn't create good web pages at all, not for anything but Internet Explorer anyway. Also using a word processor to create websites can generate unwanted results, as a lot of the formatting from word documents is often lost or screwed up in the conversion process, as desktop publishing programs are very different from web publishing programs.
Pros:
- Easy to use
Cons:
- Creates highly incompatible and bloated HTML, only works with Internet Explorer
- Some text is rendered to images
- Formatting is screwed up when saving word documents as HTML
- No XHTML support
- No CSS support
My rating: 1/10 - Not recommended at all, it's optimized to be a desktop publishing program, not a webpage editor
OpenOffice 2.0 Writer
Like Microsoft Word, this is not a web page editing program, and shouldn't really be used for this purpose. It has got some features specific to creating web pages, so I will give it some credit here, and at least the program doesn't generate Internet Explorer only pages. However, the program does create some HTML pages with errors in it, and uses some old legacy HTML tags and attributes that have long been dropped.
Pros:
- Free
- Easy to use
Cons:
- Outputs old legacy HTML tags and attributes, that have long been dropped, some attributes are not properly quoted. Tags are all in uppercase.
- Formatting is screwed up when saving Open Office Writer documents as HTML
- No XHTML support
- No CSS support
My rating: 2/10 - Not really recommended either, it's optimized to be a desktop publishing program, not a webpage editor. Open Office is a great office package, don't get me wrong there 😉. it's just not very great for doing web pages in.
NVU
NVU is an Open Source web page editor, built from where Mozilla Composer left of, since the Mozilla Suite was split up and made into separate programs. NVU is free, and creates standards-compliant web pages, that work well in all browsers. It supports both HTML and XHTML. There are some downsides to NVU when say comparing it to Dreamweaver. It does use CSS, but it embeds it by default, and sometimes uses it a bit too much. For example, where the tag strong or b should be used for bold text, NVU prefers to use
<span style="font-weight: bold">Ok, this method will work and is standards-compliant, but it's not really proper semantic HTML either, it's not major, but could be done properly (maybe in future releases). Overall, NVU is a good program and does create standards-compliant pages. It's good to begin with, much better than Frontpage, or even using a word processor and doesn't cost a cent. At least if you begin with this program, you can have peace of mind that your page will work on non-IE browsers too.
Pros:
- Free
- Reasonably easy to use
- Standard compliant
- Good CSS support, based on Mozilla
- Supports XHTML
Cons:
- CSS is supported, but is primarily embedded, would be better as an external CSS file
- HTML is standards compliant, but not always semantic. spans will be used over strong or bold tags.
My rating: 7/10
Conclusion:
No web page editor is perfect yet. Dreamweaver definitely comes close, and NVU isn't bad either. I don't really recommend using a word processor for starting to build websites with, you'll get into more problems than it's worth, plus your site kind of tends to get looked down on by professionals, which is not always a good thing. If you want to get into web design and don't want to spend much money, definitely try out NVU, it's free so you've got nothing to lose really, plus it outputs reasonable tidy standards-compliant HTML that works on any browser.
Moving onto the next level and beyond:
WYSIWYG programs are good to begin with, but they are just the beginning. After that, is when professional web development starts. This is the transition between web "design" and web "development". The next level is to start to become familiar with the HTML code that your WYSIWYG tool is creating, understanding the HTML and being able to correct errors the editor created. In time, you'll learn new technologies such as XHTML and CSS, which will open a whole new world again, where WYSIWYG programs are unable to create the pages for you anymore, as you learn to exceed their capabilities, and they will serve of no more purpose. You will instead start hand crafting pages, to be extremely lightweight, at 1/10th the size, and even compatible with mobile phones and voice browsers, this is practically getting into a whole new world again, but this is also when it starts getting exciting. It takes a while to master, and you start to learn all the ins and outs of each browser, but it's a really cool thing to be doing.
As far as I know, these sort of techniques are hard to come by, and not many people teach them in training institutes. The best way to go beyond WYSIWYG, and getting into standard-compliant CSS design and semantic XHTML markup, is really learning it yourself, by reading other websites on the topic. Search Google for "XHTML" or "CSS", and there's literally thousands of pages to help on the topic. Going beyond that again, basically gets you into programming, initially using client-sided languages, such as Javascript, and in time server-sided programming using PHP, and then eventually using MySQL for data management, then combining everything together, even with using Web 2.0 and AJAX. It takes most people around 3 years or more to get to this stage if they love doing it and are dedicated, and another 2 years or so to really master server-sided programming. But don't let that put anyone off. Programming is a really awesome thing to get into, whether it's web related programming, or application programming - I wouldn't want to do anything else. 😉 It's not a job, it's a passion.
-
-
Author: Uber_deathworld
User type: Standard User
Posts: 58
Date: July 1, 2006, 10:01 p.m.Just wondering rob .. did adobe buy out macromedia... becuase now its Adobe Dreamweaver, Adobe Flash Player etc... anything i seen that used to be macromedia is now adobe?
And if so wow they must make alot of money from there PDF apps
-
Author: robvdl
User type: Administrator
Posts: 122
Date: July 1, 2006, 10:15 p.m.You guessed that right, Adobe did buy out Macromedia around 6 months (I think) ago.
I think Adobe would make a lot of money out of programs like Photoshop. The latest version of Photoshop sells for around $1200, Acrobat Writer sells for around $800, Premiere around $1600, etc...
-
Author: Uber_deathworld
User type: Standard User
Posts: 58
Date: July 1, 2006, 11:48 p.m."The latest version of Photoshop sells for around $1200"
-Robvdl
Yet they wonder why people download pirated version's, I mean to be honest id rather pay nothing and have it magically appear onto my HDD from super natural forces then pay up a good 2 weeks wages!
-
Author: robvdl
User type: Administrator
Posts: 122
Date: July 2, 2006, 12:26 a.m.Yeah sure, some people will do that when the software they want to run is too expensive to purchase. That's off course all fine until found out, and can't really afford to let that happen in a business environment, not to mention I would actually personally feel guilty myself every time when using the software (even if it is a big company).
Personally, I am a strong believer of Open Source (free software written by the community), surely Open Source software hasn't always got all the features as the expensive commercial applications do, but for most people it's more than enough. I really love Open Office for example, I have watched this project since it was still called Star Office (it wasn't really that great back then), but it has improved a lot and is still improving now. Open Office does everything I need it to do, and the new version now even has a database. Surely it doesn't have all the bells and whistles as Microsoft Office does, but it's still free, and I don't really use the extended features in Microsoft Office anyway. For the majority of people Open Office is enough.
As a paint program, I purchased Paint Shop Pro 7 a few years ago via their online shop, $99 USD it was. Paint Shop Pro does everything I need it to do, I love the vector tools when doing logos. I use it to do all my website graphics (including the Ynui site, where for example the chip is a vector graphic). In my opinion the layers are practically or almost as powerful as Photoshop for a fraction of the price. Paint Shop Pro 10 is out now, and since has been brought out by Corel, but I haven't even had a need to upgrade yet.
As for Open Source paint programs, initially there was only really The Gimp. Now The Gimp is a good program and it is very powerful, but some people tend to dislike the interface with "loose" windows (everyone has their own opinion). Recently, a new Open Source project was born, called Paint.NET, we have mentioned it on the site before, Paint.NET is a fairly good program already and is really easy to use for beginners too. However with Paint.NET I see real potential for the future, because of the speed it is being developed. Check out the actual roadmap towards Paint.NET v3, to see what they are going to add to the new version before the end of the year to see what I mean.
-
Author: Uber_deathworld
User type: Standard User
Posts: 58
Date: July 2, 2006, 9:29 p.m.😉 Yea the gimp is what i used to use till i got Corel PSPX .. but you see theres not really any need to upgrade as i used to own Version 8.0 and to be honest the only big difference i've noticed is the splash screen and a few things here and there.. Eg. exra picture tubes and other "Features" that i can easily live without.. btw you did that in PSP.. is that a mac keyboard .. it looks like the old style of return but with a modern flare about it 🙂c All in all i would have to say this is a pretty good site.. clean looks, easy to get around, and if you have troubles going though this website you must of overdoesed on prozac 😈
-
Author: Mega Byte
User type: Standard User
Posts: 16
Date: July 2, 2006, 10:05 p.m.Lol sup ppls i like to use front page dreamweaver notepad word pard any text editor but for guis and wysiwyg i woudl say front page and dream weaver are good as well as this old one called heavy it was mad i lost it when i reformated mi hdd lol so sad 🙂
-
Author: robvdl
User type: Administrator
Posts: 122
Date: July 3, 2006, 1:01 p.m.Yeah, I use notepad all the way too, well actually Crimson Editor to be exact because it has syntax highlighting, a basic spellchecker, tabs and a project manager 🙂, which I like. In a way it's still similar to notepad off course.
For people just beginning WYSIWYG, then I believe Dreamweaver is a good choice. Either that or NVU, because both generate websites that work well in all browsers, which I personally believe is important. Frontpage is a good program in general, I do like it, just in my opinion one of it's downsides is that pages created with it only work properly in IE, which in this day and age, with more people already having moved to Firefox or other standards compliant browsers, such as Opera or Safari, will limit the amount of people that can access the target website properly, or sometimes worst case scenario at all.
Off course Firefox users can install a plugin, IE-Tab to view Frontpage generated sites through an embedded IE in Firefox, but in my opinion that doesn't generate a professional impression. I believe with using Dreamweaver or NVU as a beginner tool this can be avoided in the first place.
-
Author: Winston
User type: Standard User
Posts: 24
Date: July 12, 2006, 5:46 p.m.I stopped using wysiwyg editors after discovering CSS based layouts. It is a very big transition, many say it isn't, but thats for people who are interested and have the time and inclination to learn out of work, not during a job with a tight deadlines!
Personally I think its worth the effort. I would be really interested to to see how Dreamweaver 8 works, the interface etc, producing CSS layouts, I last used Dreamweaver at version 3.
Do you just draw divs here and there?
Speaking of text-editors, I use skEdit. Code completion is very helpful for newbies (relatively) to html/css like me.
-
Author: robvdl
User type: Administrator
Posts: 122
Date: July 12, 2006, 8:04 p.m.The last version of Dreamweaver I used was 7, it does support some CSS to an extent, but still sticks with 'tables-for-layout' and prefers to embed CSS rather than using an external file. How it handles DIV's is that it calls them "layers", in a way I think this doesn't really educate the user what a layer really is. A "layer" in Dreamweaver is simply a DIV with the style "position: absolute" applied to it and a width and height specified, so it sits on top of the page like a layer in photoshop in a way. That's about the only CSS based layout that Dreamweaver can actually do as far as I am aware. Floats, clears, relative positioning, negative margins, not to mention the complex inheritance and subclassing support in the CSS language are all too much for most wysiwyg programs to handle 100%, so they tend to stick to table-based layouts like they have for years.
Other than that Dreamweaver allows basic styling of fonts, colours and backgrounds, but it still seems to steer clear from using 100% CSS based table-free layouts. I think one of the reasons why this might be is that it could be very difficult to implement the complexity of true CSS based layouts in a wysiwyg editor, it would require large parts of the program to be redesigned from scratch. Another reason why I think Dreamweaver hasn't adopted 100% pure CSS layouts yet, could be because of older browser compatibility still plagueing developers, such as IE5/6, even IE7 still isn't upto scratch with web standards, but this could change over time, even if it takes another 2-3 years for IE8 to catch up to Mozilla, Opera and Safari (most likely those browsers will fully support CSS3 by then, but that's another story - IE will be behind for a few more years to come I think). Pure CSS based design is an awesome way of creating websites, but I don't think CSS was really designed to be portable to wysiwyg software, it still appears that the only way to do clean and efficient CSS based sites is definitely still by hand.
skEdit looks good, I've heard it being mentioned before by Mac designers who are also into the CSS scene (there seem to be a few Mac users in the CSS design scene, which is cool). If you're already doing CSS and HTML by hand, that's awesome, I wouldn't even use the word newbie. Once you've started with CSS it's hard to stop or go back and then you also tend to learn real quick anyway, mainly through trial and error/experience. The only difficult thing I often find is getting things to go in explorer after creating a beautiful design that works on every other browser. How do you usually test for IE on Windows? run it in a virtual machine on the Mac or use an online website previewing service? I tend to use a virtual machine on Windows XP, running older copies of win98/IE on it, but it's quite awkward that way.
I know there is a way to get around it and force to install several versions of IE (5, 6, 7, etc) on the one PC, but it sounds risky as Windows was only designed to take one copy of IE at a time. I don't want to risk Windows falling over, lol. So I just tend to run Win98 in a virtual machine on top of XP.
I have a lot of useful CSS stuff bookmarked over the years, one of the most useful starters to creating a new CSS design would have to be layout gala:
-
Author: Winston
User type: Standard User
Posts: 24
Date: July 13, 2006, 2:29 p.m.Yes, when it comes time to view in IE, I get very depressed! Because were in a studio environment, we have a few PC's that I can test on, although only IE6
Our main internet guy (does the ASP,PHP, scripts, etc.. something I would like to get into down the track) uses a PC while the designers and video department uses Macs. Although 'Department' makes us sound much bigger than we are, 7 people altogether.
Occasionally I use the free trial service on the web to view your site in different browers - I've forgotten the name now.
-
Author: robvdl
User type: Administrator
Posts: 122
Date: July 13, 2006, 7:01 p.m.Heh, this is a bit of a coincidence, but Microsoft just released Virtual PC 2004 for FREE just today. I downloaded it (18mb) and installed Windows 98 on it with older copies of IE for website testing, works great!
I saw a link on a digg.com article a few weeks back, linking to a free service that allowed you to test in heaps of different browsers all at once, different versions of IE, Mozilla, Opera, Safari were all supported... but I lost the link. 🙁
Been playing with Virtual PC 2004 most of tonight, I even installed MS-DOS 6.22!! I can't believe after not too much tweaking, I was able to load HIMEM.SYS, EMM386, a mouse driver, a cd-driver, and all with only utilisising 65k of base memory. I still have 575k of base memory free, this is quite an achievement for DOS, lol... let the old abandonware games begin. 😉
