Building a Better Web Page

No matter how good a designer you are, if your Web pages fall apart in other people's browsers, all your efforts are wasted. Broken pages can never look good.

Many designers are content to create their pages in Dreamweaver, GoLive, or some other WYSIWYG editor, all without getting their hands dirty on source code. Fine. But although they are referred to as WYSIWYG editors, they most certainly are not. You are lulled into a false sense of security. What YOU see is not necessarily what other people get.

There are all kinds of reasons why the pages that look just fine on your own computer give others a less than enthralling experience. There are different operating systems, browsers, browser versions, monitors and countless other variables. Although the majority of people use PCs with Chrome or Microsoft Edge, there are millions who have made a conscious decision not to! Even within the majority, there are high degrees of variance – monitor sizes, resolutions and colour depths, internet speeds, versions of Windows, Chrome and Microsoft Edge.

The fact is, you can't take anything for granted. You can't expect your designs to look absolutely identical on every computer. Web design is just not like that. There are situations where they can break completely - elements shift to a different place on the page or disappear completely.

So, whose fault is it? Can you blame the WYSIWYG editor or browser manufacturers? Can you blame the computer and monitor makers? Well, put it this way, whose fault is it if someone builds a huge sandcastle on a beach and moves-in with the wife and kids?

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 <blink> tag.

Likewise, Microsoft Edge 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.

Send your suggestions and comments to
Com4tzone • web developer digest © 2019-2023
Copenhagen, Denmark