WYSIWYG HTML Editors

By Daniel Scocco

WYSIWYG stands for “What you see is what you get”, and it refers to applications where you can see on the screen exactly what will appear once the document is printed or published. The most basic example of a WYSIWYG application is a word processor, but lately it became very popular for web authoring programs.

Those HTML editors are very useful for people that are not familiar with coding, and they can save a lot of time when creating or customizing websites. Here are some of the features of HTML editors:

  • tabbed editing to work on multiple pages
  • integrated FTP functionalities
  • support for forms, tables and templates
  • reliable HTML code creation
  • cross-browser compatibility

If you are looking for a free WYSIWYG editor I would recommend either Nvu or Amaya (created by the W3C). Both applications are open source and they are available for Windows, Macintosh and Linux.



Share

18 Responses to “WYSIWYG HTML Editors”

  • Daily Good Tips

    yes…this html editor is very useful for me, because i dont have enough knowledge about html code.

  • maleos read comic and manga online

    Don’t use it.

    freerte = Slow like snail.
    openWYSIWYG = full of bug, cannot use on safari.
    tinyMCE = to many function, slow also.

  • Michael Gibson

    Well I’ve lately discovered a shareware program called EditPlus 3. This is not truly a WYSIWYG editor, but it allows you to write your code as you would with say, Windows Notepad or Mac Text Editor, only it color codes the tags.
    I have found this to be invaluable while debugging.
    I’ve been staying away from WYSIWYG editors for almost 10 years now. Horrible ugly code and cross-browser compatibility issues are no fun!

  • Allen

    I just want to say thank you for taking the time & effort for put this web page together! Visit my sites, please:

  • Jay Gilmore

    Dawud,

    First, please get in touch with me via my website so we can further our conversation off this thread as it is a little OT at this point.

    That being said. I agree with everything that you say (almost), I only have one of the many that I have built in the last two years that has a tabled layout and that is because I haven’t gone back to fix it (it is not mine).

    One place where I don’t agree with you is that XHTML is the future. It is in fact a very misused format in web design as it is often thought to be the next version of HTML but if you go to the W3C website you will find all sorts of documentation to the contrary. XHTML was designed to allow the inclusion of XML within HTML documents and not as a more modern versinon of HTML (http://www.w3.org/MarkUp/2004/xhtml-faq#advantages).

    Some purists even suggest that you should NEVER use XHTML to build websites unless it is going to be served correctly as “application/xml”, as opposed to “text/html”, which is how most (almost all major) browsers treat XHTML anyhow (although if you read the W3Cs own spec under Appendix C you can do it and be correct.)

    You can easily apply the strict, logical markup formatting to HTML 4.01 and yeild the exact same results–in fact if you are using any DOM Javascript, you actually have an easier time of it.

    There is a working group in the midst of developing the next generation HTML to include both HTML and XML.

    If you are developing pages that have no advanced applications that require XML such as Xforms, SMIL or the like there is no reason whatsoever to use anything other than HTML 4.01. It is necessary that we as developers know how to work in all these web environments but also what tool to use. I agree that we need to know XHTML, XML and XSLT but knowing when to use them is as important.

    All the best and get in touch!

    Jay

  • Dawud Miracle

    Thanks for the dialogue, Jay. Dreamweaver is expensive – and it’s a business write-off.

    As for those beginning with HTML, my feeling is to start with Web Standards right out of the box. I’ve trained a handful of designers in Web Standards and find it in every way superior to table layouts. Now I’m not a zealot about this, but I do know that Standards is where the web is heading. XML is coming and XHTML is the doorway there. Semantic markup is vital to the new leap of the internet. One point, just think about the possibilities with Microformats.

    So why teach people HTML 4.0 when the skills they need forward are found in XHTML (HTML under XML rules) and CSS?

  • Jay Gilmore

    Dawud,

    We are singing from the same hymnbook just in differrent keys.

    Those books are quite good but a little advanced for those who really have no background in HTML at all. That being said, they are a great read.

    Regarding DreamWeaver: it is expensive, but a necessary tool in my arsenal, as some of my clients and contracts require being able to step in and pick up where some DW designer left off. Some of those nested tables are so deep that you get easily lost in , and upon , and that it is just easier to work in the original environment. In addition, to work with templates inherited from other devs in the short term, DW is indispensable.

    All the best,

    Jay

  • Dawud Miracle

    Hey Jay

    I hear you on Dreamweaver. I’ve never bothered with it’s FTP client. I only use it for some of the shortcuts with creating links, page building and reporting. I do all my coding in BBEdit and CSSEdit with Transmit as my FTP client (love it). Coding with Web Standards, I find Dreamweaver code to bloated, but worse off is its prohibitive cost.

    For newbies, my book suggestions would begin with Zeldman’s Designing for Web Standards, Second Edition., Then reading Dan Cederholm’s Web Standards Solutions & Bulletproof Web Design and anything by Eric Meyer Of course a great look at the power of semantic code and css layout can be found in Dave Shea’s The Zen of CSS Design. But, I’m a Web Standards guy.

  • Jay Gilmore

    Dawud,

    I know about Contribute and I understand the purpose. I personally don’t use DW for developing sites any more for two reasons: 1, it is bloated for use as a text editor–and uses nearly 50MB of memory in XP, 2, its FTP engine is slower than molasses going uphill in January.

    I personally use HTML-Kit by Chami (Closed Source Freeware,[I’d pay for he registered version but I don’t need the features of it so why bother]) for all my web projects as it has nearly 400 available plugins, fast FTP built-in and since I don’t use DW style static templates I don’t, therefore, need any of the features of DW. I do however, use FireWorks in conjunction with HTML-Kit for fast, efficient image and vector creation and editing.

    None of my clients ever want to do more than post or edit content and therefore the CMS I use for projects either has TinyMCE or Xinha installed and they can manage with those.

    I would say this then, it is our jobs as developers to educate our clients as to what they should and shouldn’t be editing.

    And, if you are a newb starting to do your own site editing as a hobby get the SitePoint book, “Build Your Own Web Site The Right Way Using HTML & CSS, by Ian Lloyd or Elizabeth Castro’s, HTML for the World Wide Web 6th Edition: With XHTML and CSS, Peachpit Press.

    Cheers and out,

    Jay

  • Greg King

    I have always preferred code-based HTML editors to the WYSIWYG tools. After a couple of weeks of using editors such as Homesite and the code editor in Dreamweaver I found I could create web pages quicker and with fewer headaches than with a WYSIWYG editor. So although Nvu looks great, I would love an open source equivalent of Homesite.

  • Dawud Miracle

    Jay, while I agree there’s not a lot of options…there is one solution I use with many of my clients so that they can manage their own content in an easy-to-use interface – Adobe Contribute. Contribute came over when Adobe merged with Macromedia. It’s a content editor only, but works great. I’ve got dozens of client using it with little or no problem. The learning curve is small and the program is reasonably priced at $149. No coding needed. Now you wouldn’t build a site in Contribute. But you could have a designer build you a site template and build all the pages yourself – saving on costs.

    I know about Expression. I’ll likely look at it sometime in the first quarter. I’m a Mac guy and I mostly hand code in BBEdit. Though I do use Dreamweaver for page building and some of its reporting features. It’s hard to believe that Expression wouldn’t be any more than a modernized FrontPage. But we’ll see.

    Amaya isn’t great. Geared toward XHTML, but performance is sluggish and I’ve found it to be a bit unstable.

  • Jay Gilmore

    Dawud,

    You are so right, but there is a missing product in the marketplace which allows for the simple editing of web pages for non-developers. For them, editing their page is a means to an end–within their budget. If it screws up their page, well then they will have to pay someone like you or me to fix it. But all too often devs lose sight of the fact that for most individuals and small business, a website is merely a part of a whole and if it works, who cares.

    Small business may not ever yield any direct benefits from having clean code. The issue that can hurt business more than tag-soup is cross-browser compatibility. Many non-devs use a WYSIWYG editor and preview using the Microsoft IE rendering engine and then their pages don’t work in other browsers correctly–or at all. This is far more serious financially than code bloat or font attributes inline.

    All the best,

    Jay

    BTW: I tried Amaya last night and it is horrible. On top of the fact that it is a usability failure, its default Doctype is XHTML 1.0 Transitional (What–the W3C has a Transitional Doctype as the default!?!?). What makes matters worse is that there is no sign of HTML 4.01 in the template drop down. What I did like about it was that it uses good linear document structure.

    I also tried NVU. It is fast, lightweight, clean but uses inline CSS (non-devs; don’t worry about this). Uses layer terminology and absolute positioning of div elements and will produce odd layouts that are not crossbrowser friendly. Might be okay for editing existing pages.

    Microsoft Expression Web was 200MB download (limited to 100KB/Sec from MS–even though I have a 10Mb connection it took almost an hour do download) and although was fast, is really a Dreamweaver Competitor. I’d stick with Dreamweaver since Adobe plans on keeping it around for a while.

    ATB -J

  • Dawud Miracle

    Boy WYSIWYG sure creates an interesting debate for web coders. No tool that I’ve found does a great job at coding from WYSIWYG layout. Nvu isn’t bad. Dreamweaver is okay, too. But gosh, to get really clean code, you have to code by hand. This is especially true if you’re using semantic markup and css layout.

  • Daniel

    Chris, I will check WYSIWYGPro, thanks for sharing.

    Jay, you got a point there man! In fact I would not recommend those editors to build entire websties but rather customize or fix particular details on pages.

  • Jay Gilmore

    WYSIWYG Editors should be for the most part called WYDSIAGDM (What You Don’t See Is A Gosh Darn Mess). While WYSIWYG editors have the potential to create fast, well structured pages, what normally happens (with some exceptions) is that the software will use nearly any tactic, trick, hack, non-sensical document structure to make the “picture” of what you designed in the visual editor.

    I am all for content editors having control but the web is moving toward a more accessible and more efficient one and having bloated, meaningless, code underneath your “visual” masterpiece actually has financial consequences.

    For busy sites, extra code means more bandwidth, for not so busy sites but those who want as many customers as possible, poor document structure can lead to inaccessibility for people with screen readers or those who use personal stylesheets to display larger text or higher contrast.

    That being said, if you have to use WYSIWYG editors Amaya seems like it ought to be okay. DreamWeaver (though not cheap) is more than capable of producing excellent output thanks to the WaSP (Web Standards Project) and Microsoft Expression Web is also based around good output (thank you M$ for finally killing FrontPage)

    Good points though…

    All the best,

    Jay

  • Chris Baskind

    There’s also the family of embedded WYSIWYG editors. Most of my projects these days are on Joomla, where installing a 3rd party editor is just a mouse click. I’ve been using WYSIWYGPro for quite a while:

    http://www.wysiwygpro.com/

    What I like about this particular editor is that it generates really clean XHTML output. I has an upload manager, you can link it to your CSS file so things really *are* WYSIWYG, and it’s easy to examine and edit tags if you so desire.

    It also works with WordPress — up to 2.0.7, according to its website. Might work on 2.1, but I haven’t asked. It’s terrific, though, if you prefer pro-quality WYSIWYG from the backend.

    I have no relationship with the company that produces WYSIWYGPro. Just a fan. 😉

Comments are closed.