Building a Better Web Page

by Joe Gillespie — Feb 1, 2002

So, you have time on your hands but not much money and decide to build your own house. There was a time when everybody did this. You know what rooms you need - hall, living room, dining room, kitchen, bathroom, a few bedrooms. If you need more, you can add them on later. You've been in lots of other houses so you have a pretty good idea how they work. It's not too difficult to sketch a layout for your new house on a piece of paper and take it from there.

You buy a plot of land and have a few truckloads of building materials delivered - bricks, lumber, sand, cement, nails and all that stuff.

Now, any three-year-old kid knows how to stack bricks on top of one another to make a wall and nailing some planks of wood together is no big deal either. You build the house and move in. Building your own home page is very like building a house. Both require a degree of planning, a sound knowledge of basic construction methods and ability to use the tools required.

Few people would attempt to build their own house these days; they would get somebody else to do it for them, someone who already has the necessary skills and tools. Nobody in their right mind would attempt to build their own store or office block.

Putting a building together, well one that is going to stand up for any length of time, requires that you know about foundation laying, how to build viable walls on the foundations, how to put a water-tight roof on top. You also have to consider windows and doors, plumbing, electrics, drainage. Then there are less obvious things like sound and heat insulation, damp-proof coursing, fire-proofing and that is all before we even begin to think about the comforts like paint colours and drapes.

In the professional world, no single person does all of these things. It requires teamwork, many specialists each with their own skills. The "do-it-yourself" builder will of course, go where angels fear to tread - and totally oblivious of the pitfalls.

What's the worst that can happen if you build your own Web page and get it wrong? It's unlikely to kill anyone, unlike the self-built house, car or airplane. The worst thing it can do is crash the reader's computer - yes it does happen. Less dramatic than that, and more likely, is that it will just fail to display as intended.

The first mistake that an amateur Web designer makes is to assume that because it looks okay on his or her computer, it will look the same for everybody else.

The second mistake they make is in trusting that the WYSIWYG editor they are using is writing correct HTML code. No current WYSIWYG editor writes totally valid HTML code out of the box! Some get in nearly right, or can be persuaded to get it right with a little tweaking. Some do a dreadful job - but I won't name names here for obvious reasons.

Similar is not the same

You are probably aware that various browsers and browser versions interpret the same HTML quite differently. Sometimes the differences are cosmetic and sometimes disastrous. Early versions of Netscape supported basic HTML but with some ideas of their own added-in – like the dreadful tag.

Likewise, Explorer had its own set of different 'enhancements'. Text display on Mac and PC computers was markedly different, especially in type size, making the same type spec appear oversized in some cases and unreadably small in others.

To be fair, thanks to standards laid down by the W3C and independent pressure groups, the latest browsers are much more consistent in display terms than earlier ones. On the other hand, people don't necessarily use the latest and best browser, they use the one that came installed on their computer and don't see any point in changing it and very possibly, don't even know how.

Browsers have traditionally had a degree of latitude built-in. They could be very forgiving of badly formed source code and make sense out of pages full of HTML errors. The trouble was, that the degrees of forgivingness varied quite considerably. Where valid HTML would give fairly predictable results across all browsers, invalid code could work fine in one situation and not at all in another – and everything in-between. This is still the case today.

If you want consistent results across browsers and platforms, your source code has to be squeaky clean. If you totally depend on a WYSIWYG editor, you will have problems!

The standards for HTML are agreed by the W3C (World Wide Web Consortium). The idea is that if all the browser manufacturers adhere to the same set of rules instead of inventing their own, any given Web page should behave more or less the same way in every browser. Apart from HTML, you also have to consider JavaScript and Cascading Style Sheets, they should ideally conform to common standards too and we are getting there – slowly but slowly.

As a Web designer, it is your responsibility to make sure that the pages you publish conform to W3C standards, not just those of the browser manufacturers. If you don't, they will break in some browser now or in the future. It is very easy to check if your pages do conform because the W3C has a Web based validation tool and all you need to do is type in the URL of a page you have published and it checks it for you and gives you a blow by blow report of any errors. Alternatively, if you haven't already uploaded the page to a server, you can send it straight to the validator.

The W3C Validator can also check your CSS and links. All this is entirely free so there is really no excuse to publish bad pages.

The DOCTYPE declaration

The W3C Validator will check your pages based on the DOCTYPE you have specified at the top of your source code. If you use a WYSIWYG editor, it probably won't have added this information and you will have to do it manually. The DOCTYPE looks something like this:-

 

What all this means is that you are using the current HTML standard (HTML 4.01), 'Transitional' means that it will allow some older tags that are being deprecated and presentational elements like and whereas 'Strict' means 'completely by the book'. 'EN' means English, which refers to the mark-up language, not the contents of the page. More about DOCTYPE.

Another form of the DOCTYPE declaration is this one:-

The second line is the 'switch', which forces some browsers to go into Strict mode regardless of the Transitional statement earlier. Add this only if you are certain that your readers are using the very latest browsers and your coding is 100% compliant.

There are some good examples here.

Instant check

Enter your page URL here to check your HTML with the W3C Validator.

If you prefer to check your code locally on your computer, HTML editors like Macromedia HomeSite 5 (PC) and BBEdit 6.5 (Mac) have excellent built-in syntax checkers. To check JavaScript, either use Netscape's built-in JavaScript console (type "javascript:" in the url box) or in Explorer, make sure "Disable script debugging" is not checked in the Options-Advanced tab.

Browser Latitude

The W3C Validator is a black and white, pass or fail situation with no middle ground. It will fail pages that work perfectly well in all current browsers - including some of mine. This is because current browsers still have some, (if not as much as before) latitude or forgivingness built-in. You can't count on this always being so. If you want your pages to keep on working, make them W3C compliant now.

There are some potential problems that the W3C Validator won't show up. A page that is perfectly valid in terms of coding might still look wrong. The important principle of separating structure and content is like building two houses from the same set of plans - without dimensions. The houses could have completely different sizes, finishes and colours. One could be okay for humans and the other only for dolls.

The HTML is the 'skeleton' of a Web page and the 'look' is determined by the Style Sheet. Well, that is the principle and where things are headed but in the real world, the legacy of older browsers and Web pages still in use means that you can never be sure of anything working correctly anywhere.

In the end, it's your decision. You can address the lowest common denominator and design a page that works at a basic level for everybody or you can use the latest technologies that only work in the newest browsers - or anything in-between.

Screen Size

One problem that crops-up regularly is that of screen size. Some designers design on small screens and forget to check what their page looks like on a bigger one – and vice versa. If you only have an 800 x 600 monitor, how can you tell how a page looks at 1024 x 768? Well, you can't unless you sign up for NetMechanic which renders the page at a reduced size you can view.

Ignore the problem and it will go away

Unfortunately, using a validator like the one at W3C can be a little confusing and even frustrating. Why is it giving errors when the page works just fine in every browser you've tried it in? Is it really possible to get an error-free page and if you did, would it work in any browser?

Well, just like WYSIWYG editors, there are no bug-free browsers. If a browser is interpreting a page of HTML and comes across something it doesn't understand, it should ignore it completely. If Microsoft Internet Explorer sees a tag in HTML 4.01, it just pretends it hasn't seen it and nobody really cares.

The W3C Validator, and any other one of any value, will complain bitterly that there is no tag in this version of HTML. That's what it is supposed to do.

The browser has dealt with the problem by ignoring it but the validator isn't too happy about you taking the mickey.

Not all such problems are so clear-cut. There is a point at which any browser gets utterly confused and can't make any sense of what it is given. What it does in that case is anyone's guess!

Some common validation errors and what they really mean

  • Error: there is no attribute "LEFTMARGIN" for this element (in this HTML version)
  • Error: there is no attribute "TOPMARGIN" for this element (in this HTML version)
  • Error: there is no attribute "MARGINHEIGHT" for this element (in this HTML version)
  • Error: there is no attribute "MARGINWIDTH" for this element (in this HTML version)

What's the worst that can happen?

The browser will ignore these attributes and your graphics won't butt-up against the edge of the page.

  • Error: there is no attribute "HEIGHT" for this element (in this HTML version)

What's the worst that can happen?

The browser will ignore the "HEIGHT" you set for a table and it will collapse vertically until it encounters some content that stops it from shrinking any further.

  • Error: required attribute "ALT" not specified

What's the worst that can happen?

The "ALT" attribute for an image is used by screen reading software for visually impaired people and should tell them what they can't see. Sometimes it doesn't make sense to describe an image – like a clear spacer GIF, for instance. The correct thing to do is to provide an ALT = "" – an empty string.

  • Error: there is no attribute "NAME" for this element (in this HTML version)

What's the worst that can happen?

If you were to address an image in a rollover by its NAME attribute (as is quite common) and the browser ignored it, the rollover wouldn't work and would probably throw a JavaScript error too. However, the "NAME" attribute is undertood by most browsers and valid since HTML 4.01. You will get this error if you specify HTML 4.0 or earlier in the DOCTYPE.

It's getting increasingly difficult to make pages that work in all browsers without resorting to page redirection hacks. At some time you are going to have to decide, (hopefully based on some hard evidence from your server stats), that you are no longer going to support older browsers. Some people are doing that already but exactly where to draw the line is not an easy decision.

No matter how hard you try, sometimes your code will just not pass the W3C Validator test. You might, for instance, have a link to an external banner ad that is serving up non-compliant code. You have to be sensible about such things, absolute perfection is an ideal that doesn't justify insanity.

Meanwhile back on the building site, it's raining hard and all the mortar is being washed out from between the bricks.

The wind has blown away the tarpaulin that was acting as a makeshift roof and the local building inspector has just pulled up in his car...

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float