Skip To Content

Search
You are here:  My Pages > Personal > Best Website Builder for Small Business

WYSIWYG Web Builder

WYSIWYG "What You See Is What You Get"

  

A WYSIWYG (pronounced "wiz-ee-wig") web builder is a system that allows a developer to see what the end result will look like while the interface or document is being created. WYSIWYG is an acronym for "what you see is what you get". A WYSIWYG Web Builder can be contrasted with more traditional editors that require the developer to enter descriptive codes (or markup ) and do not permit an immediate way to see the results of the markup. The first true WYSIWYG editor was a word processing program called Bravo. Invented by Charles Simonyi at the Xerox Palo Alto Research Center in the 1970s, it became the basis for Simonyi's work at Microsoft and evolved into two other WYSIWYG applications called Word and Exai.

This web builder started joint operation with work of google free web fonts for better mobile-friendly websites user experience

What Is An HTML Editor?

An HTML editor is a specialized piece of software that assists in the creation of HTML code. Similar to text editors such as Notepad and TextEdit, HTML editors allow users to enter raw text.

Most (if not all) professional web developers use an HTML editor to create and maintain their websites. This is because a good HTML editor can boost productivity enormously.

An HTML WYSIWYG editor, such as Microsoft's FrontPage or Adobe's PageMill conceals the markup and allows the Web page developer to think entirely in terms of how the content should appear. One of the trade-offs, however, is that an HTML WYSIWYG editor sometimes inserts the markup code it thinks is needed all on its own. Then, the developer has to know enough about the markup language to go back into the source code and clean it up.

The actual meaning depends on the user's perspective, e.g.

In presentation programs, compound documents, and web pages, WYSIWYG means the display precisely represents the appearance of the page displayed to the end-user, but does not necessarily reflect how the page will be printed unless the printer is specifically matched to the editing program, as it was with the Xerox Star and early versions of the Apple Macintosh.

Modern software does a good job of optimizing the screen display for a particular type of output. For example, a word processor is optimized for output to a typical printer. The software often emulates the resolution of the printer in order to get as close as possible to WYSIWYG. However, that is not the main attraction of WYSIWYG, which is the ability of the user to be able to visualize what they are producing.

A composition mode, in which the user sees something somewhat similar to the end result, but with additional information useful while composing, such as section breaks and non-printing characters, and uses a layout that is more conducive to composing than to layout.

A layout mode, in which the user sees something very similar to the end result, but with some additional information useful in ensuring that elements are properly aligned and spaced, such as margin lines.

A preview mode, in which the application attempts to present a representation that is as close to the final result as possible.

 

WYSIWYG HTML editors provide an editing interface which resembles how the page will be displayed in a web browser. Because using a WYSIWYG editor may not require any HTML knowledge, they are often easier for an inexperienced computer user to get started with.

The WYSIWYG view is achieved by embedding a layout engine. This may be custom-written or based upon one used in a web browser. The goal is that, at all times during editing, the rendered result should represent what will be seen later in a typical web browser.

Difficulties in achieving WYSIWYG

A given HTML document will have an inconsistent appearance on various platforms and computers for several reasons:

Different browsers and applications will render the same markup differently.

The same page may display slightly differently in Internet Explorer and Firefox on a high-resolution screen, but it will look very different in the perfectly valid text-only Lynx browser. It needs to be rendered differently again on a PDA, an internet-enabled television and on a mobile phone. Usability in a speech or braille browser, or via a screen-reader working with a conventional browser, will place demands on entirely different aspects of the underlying HTML. All an author can do is suggest an appearance.

Web browsers, like all computer software, have bugs

They may not conform to current standards. It is hopeless to try to design Web pages around all of the common browsers' current bugs: each time a new version of each browser comes out, a significant proportion of the World Wide Web would need re-coding to suit the new bugs and the new fixes. It is generally considered much wiser to design to standards, staying away from 'bleeding edge' features until they settle down, and then wait for the browser developers to catch up to your pages, rather than the other way round. For instance, no one can argue that CSS is still 'cutting edge' as there is now widespread support available in common browsers for all the major features, even if many WYSIWYG and other editors have not yet entirely caught up.

A single visual style can represent multiple semantic meanings.

Semantic meaning, derived from the underlying structure of the HTML document, is important for search engines and also for various accessibility tools. On paper, we can tell from context and experience whether bold text represents a title, or emphasis, or something else. But it is very difficult to convey this distinction in a WYSIWYG editor. Simply making a piece of text bold in a WYSIWYG editor is not sufficient to tell the reader *why* the text is bold - what the boldness represents semantically.

Modern websites are rarely constructed in a way that makes WYSIWYG useful

Modern websites typically use a Content Management System or some other template processor-based means of constructing pages on the fly using content stored in a database. Individual pages are never stored in a filesystem as they may be designed and edited in a WYSIWYG editor, thus some form of an abstracted template-based layout is inevitable, invalidating one of the main benefits of using a WYSIWYG editor.

HTML Editors - Features

Like any software, different HTML editors have different features. However, there are some features that are inherent in most HTML editors. For example, one would expect that even the most basic of HTML editors would include the "autocomplete" feature (where the editor automatically inserts closing tags, double quotes for attributes etc).

Here are some of the more common features seen in HTML editors:

 

  • HTML and CSS autocomplete. Sometimes called "code completion", the autocomplete feature detects when you begin to type HTML or CSS. It will then automatically insert the rest of the HTML/CSS code for you (for example, closing tags).
  • HTML entities library. This feature allows you to insert HTML entities with a click of the mouse. (What are HTML entities?)
  • Site Explorer. This feature allows you to navigate the files in your website using a hierarchical menu (similar to Windows Explorer).
  • Built-in FTP client. Some HTML editors enable you to FTP to your web server straight from the HTML editor. In other words, you can publish your changes without having to fire up a separate FTP client. This makes publishing much quicker and easier.
  • Search and Replace. Most HTML editors have a search and replace of some kind. Some of the better ones will have advanced features, such as being able to search through a whole website project and searching only certain file types (eg, only files with an .html extension).
  • Split-Screen View. This is where you can set up the screen to show half code, half preview.

These are only some of the many features that you're likely to encounter when searching for an HTML editor. Some features can really make your life much easier, so it's often better to pay a bit extra and get a full-featured editor.