Building a Better Web Page
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.
Del.icio.us
Digg
Technorati
Blinklist
Furl
reddit
Design Float
Articles Feed