WYSIWYG Web Design

wysiwyg / Adjective: Denoting the representation of text on screen in a form exactly corresponding to its appearance on a printout.

Although I’ve been experimenting with HTML & CSS since High School, it was not until my later undergraduate years that I really started to dive into the building blocks of website creation. After all, as an English/Communications major I needed to supplement my abstract writing skills with something practical that I could put on a resume. Taking the time to learn website coding payed off well for me; it helped land me a job as a webmaster for Medical Device Depot, a medical equipment store where I alternate between updating the company website and tinkering with Mac 1200 EKG Machines. Did I mention I also assist with their advertising? 🙂

Anyway, when I started working on their website and fixing product pages, I grew very familiar with wysiwyg web building. Wysiwyg is an awkwardly short way of saying “what you see is what you get.” In other words, you use a robust HTML editor to sort of paint a picture of what you want on your webpage. When you’re done, the HTML editor generates a lot of (horribly written) code and you end up with a nice literal representation of what you designed. Incidentally a lot of blogging sites, including WordPress, utilizes a wysiwyg-style editor for users to design blog posts. If you’ve ever started (and subsequently abandoned after one week) a blog, you may have used a wysiwyg editor without realizing it.

Note that I said the code was horribly written. Unfortunately even the most robust HTML editor cannot keep up with the constantly changing human brain, and the right combination of erasing and re-inserting data can result in an awkward mess that can be difficult to fix in the limited editor program. Wysiwyg editor’s do not always like the idea of the undo button. They may get violent with you if you try to undo a mistake, resulting in an even bigger mess than what you began with.

Take a chart or table for example – you want to create a very even 4 column x 3 row table to display data, say different dimensions and sizes on a piece of furniture. You might tell the wysiwyg editor to create this table, and viola the table appears. However, if you make one simple misstep or need to change the table dimensions halfway through entering data, then your local wysiwyg editor may decide to turn your table into a piece of abstract art that you cannot fix unless you obliterate the entire table and try again. This is why some web designers shun wysiwyg and stick to doing all of their coding by hand with good ol’ notepad (or notepad++).

I respect the viewpoint of those web design purists, and I agree that wysiwyg has it’s faults. Yet those user-error faults won’t stop me from using it. This is partly because I’ve worked with my local wysiwyg editor for almost two and a half years and I know every pitfall to avoid. But mainly it is due to the fact that, because I am pretty good at coding HTML by hand, I can dive into the HTML code and fine-tune those silly coding errors as they appear. If that table example I described above occurs to me (and it occurs often), I can just look at the code, add or remove a <td> or <tr> tag, delete that moronic fixed-width cell padding the editor likes to toss in and viola – awesome looking table. Well, nowadays I just insert my homemade table code when I need a table, but that’s the general idea.

Sure the wysiwyg editor may create some unnecessary header tags or throw in a silly amount of <br> (blank line) tags that may cause a purist coder to faint, but that’s ok. I don’t need super awesome neat looking code. Website visitors don’t see that stuff. No, I need code that works. And if you take the time to develop your skills with HTML produced via wysiwyg and handmade code you’ll get code that works with minimum frustration.

In related news, this blog post is a fancy way of telling the world that I’ve started experimenting with Adobe Dreamweaver. I look forward to using Dreamweaver, which incidentally allows for an amazing blend of wysiwyg and hand-coding, to make websites in the future.

It also helps that I can put it on my resume.


Leave a comment

Filed under Web Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s