When you’re looking at a blog post or a comment on a web site, you’re actually looking at HTML. A sentence with a few bold words and a link in HTML might look something like this:
<p>This is a sentence with a <strong>few bold words</strong> or <a href="http://www.google.com">a link</a></p>
The thing is, we don’t all know HTML, yet! [Skillcrush is going to change that!] Fortunately, that’s where WYSIWYG editors come in (pronounced wizzy-wig). Instead of typing the code and then seeing how it looks, you just design how it looks and the editor makes the code for you.
If you’ve ever clicked a button in a text editor to make a word bold, or clicked another one to make a link, you were using a WYSIWYG editor. Tumblr and WordPress use WYSIWYG editors for you to make blog posts, and Gmail uses one for when you’re writing emails. WYSIWYG editors save time and trouble when you aren’t trying to make anything too complicated or specific. What you see is what you get!
WYSIWYG editors aren’t just for the Web, either. iPhone developers lay out screens in a program called Interface Builder, where they can click and drag text and buttons, changing colors and adding features without writing a single line of code. Personal website builders that let you insert pictures and add content without learning to code are all based on WYSIWYG editors.
WYSIWYG editors speed up your workflow, but you can run into tradeoffs with flexibility. What if the WYSIWYG editor doesn’t support the feature you’re looking for? Maybe you’d like to use Comic Sans, but your email client only lets you use Arial! Even if you knew how to write the code yourself, some editors won’t let you.
You may get lucky, though – ever seen an ‘HTML’ button when you’re using a text editor on the Web? That’s your shortcut to the raw code the editor is making! Click it and you can edit the HTML to your heart’s content.
Another downside to WYSIWYG editors is that the code they create is usually pretty messy and difficult to understand. Turns out, there’s a lot of thinking, planning, and design that goes into coding larger web projects and it’s hard to teach all that logic to a WYSIWIG editor. WYSIWYG web page builders like Dreamweaver are great for creating a simple website, but if a professional needs to improve or expand the page they’ll want to start from scratch.
All in all, WYSIWYG editors are an invaluable tool for taking charge of the web. Next time you click the ‘link’ button in Gmail you’ll know just what to say – it’s a wizzy-wig!