First time visitor? The tutorials start here.

What You See Is not What You Get

Q: Why do I need to code my own web pages? Why can’t I use one of those drag and drop thingies?

A: Well, you can use one of those drag and drop thingies — also known as wysiwyg (what you see is what you get) editors — if you want to, but don’t come crying to me when people run away from your website, screaming.

Q: Why would they run away screaming? I’ve seen some nice looking websites made with those, what did you call them? Those wysiwyg drag and drop thingies.

A: Ok, so they probably won’t be screaming literally, but they might hit the “back” button without reading anything on the page and look elsewhere, finding their way to your competitors.

Let me guess. You probably use a Windows PC or laptop with Internet Explorer (IE) to surf the web and have never ever tried Firefox, Safari, Flock, Google Chrome, Opera, a handheld device, a Mac, Linux… These are just a few of the more popular alternatives to Internet Explorer and Windows, and there are many other browsers and operating systems out there that wysiwyg program developers just don’t account for.

If you try using any browser other than IE on a computer that runs on Windows and give it enough time, you’ll find plenty of problems with a lot of those same websites. Not only that, but some websites won’t even function at all in some browsers. This is because the programmers who make the different browsers don’t all follow web standards, which I’ll talk more about later.

As for handheld devices, there is just no way to cram a wide, fixed-width website into the tiny screen of one of those things.

And let’s not forget about printing. Have you ever tried to print out a web page? Try it with a few different websites, or just use File > Print Preview on some of those drag and drop websites to see what they will look like in print. Usually they will only fit in landscape mode (wider than it is tall), and have a lot of stuff on there that you don’t need on a printed page, like navigation links in a sidebar. Now do a print preview on this page and compare.

Wow! Not only did some stuff disappear, but the font and overall look changed, and you didn’t even have to leave the page! It’s easy to do, and I’ll show you how when we get to that part.

The tutorials on this website will show you how to not only account for the different operating systems and browsers out there, but also how to have a different layout for handheld devices, and yet another layout for printing… all on the same webpage!

Q: But I don’t know the first thing about writing code. How am I supposed to write for all the different browsers and stuff?

A: No worries, mate. It’s not as tough as I made it sound. Most of the popular browsers actually do follow web standards. If they didn’t, a lot of websites would look like garbage or just not work in them and the browsers wouldn’t be so popular. Microsoft gets away with it because Windoze… err, Windows comes with IE pre-installed, so it’s still so widely used that website developers have learned to cope with its quirks.

In my experience, the main browsers you have to tweak things for are Internet Explorer and Opera, and tweaks for those can be found all over the web.

So what’s my point, you ask? My point is that no wysiwyg editor that I know of will account for the quirks in the different browsers, especially when they are constantly changing the way they handle styling code every time they come out with a new browser version.

Q: What are these “web standards” you keep talking about?

A: Basically, they are a set of rules that each browser should be following. To give you an example, let’s get off the subject of code for a moment and travel back in time before humans had standard systems of measurement.

Once upon a time, there was a king who wanted a new bed, so he called on one of his assistants to hire a bed maker. The assistant told him to lay on the floor and he measured the king’s height by walking heel to toe, counting how many foot-lengths the bed needed to be. Having this measurement, he hired someone to make the bed and told him how many foot-lengths to make it. To make a long story short, the bed maker had smaller feet than the assistant, so the bed ended up being too small for the king.

The moral to this story is, if they had used a standardized system of measurement like yards or meters, the bed would have been the same size, no matter who was doing the measuring.

I will get more specific with this as we get into the actual code, because it won’t make sense to a lot of people if I try to do that right now, and I still have a couple more things to cover first…

Before getting into the actual tutorials, it’s important to understand how search engines look at your pages, as well as how people hear your pages when they rely on software to read them out loud, because this will help you increase the success of your website. Follow this link to continue: Search Engines and Accessibility…

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (2)

Morwen OronorApril 7th, 2009 at 12:41 am

Here’s a clever tip for working your way through the learning process and saving your place.
Bookmark the page you’re on. Then when you close the session for the day, copy the new URL and go to the bookmarks folder find the URL of the previous session and change the relative reference.
This helps in two ways: 1. you don’t end up with dozens of saved bookmarks of the same root URL and 2: you can easily find the spot you left off at the last time.

LesaApril 7th, 2009 at 6:26 am

That is an excellent tip, MO. Thank you for posting it! 🙂

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.