Being the XHTML and CSS freak that I am, I have decided to create a guidebook on developing websites using XHTML, CSS and implementing Web STandards. While this is not a step by step tutorial on making websites, and nor is it a beginners guide to CSS and XHTML, this is a handbook where you can learn from other website examples, and grab insight from my own opinions, and then implement it onto your own website. This guidebook is divided into three chapters, each covering a different aspect of XHTML, CSS, and Web Standards. With out further ado, here starts Chapter 1.
Ultimately the most important aspect of a website, layout is what drives your visitors to your site, what powers your imagination and what people judge you by. With a good layout, comes good traffic. In my opinion on what justifies as a good layout is:
Simplicity
Do not cram your site with thousands of little animated gifs, nor place random links with no apparent structure. The simplest sites often bring out the most potential. A great example is http://monc.se. Let’s take a look at their website.
Monc is displayed through the varied use of contemporary colors, brown, light grays, and white. The site starts off with a bare patterned navigation bar consisting of three links. This gives the user less stress of being bombarded with links and can avoid confusion among which links to click first. As we move down to the white content box, the logo is clearly displayed without any obstruction, letting the user know exactly what site they are seeing and the name of the site. A clear heading bar, “Who We Are” immediately tells the reader what the content will be about, and will provoke them to move to the main content. As we move onto the main content, one can see how the text is not scrunched up and removes the strain on the eyes. The effect that Monc used was the following CSS property:
CODE
font-size: 70%;
line-height: 1.7em;
By shrinking the font size using percentages, the font size will not change through using different OSes of different browsers, therefore implementing a high accessible standard for everyone. The line-height attribute adds spacing between each line of text, making it more readable and spacious. Before I move onto the other aspects of the site, I’d like to note that the site uses the Verdana font for the entire site. Why use Verdana, studies show that we read 0.6 times slower when we are reading text off our computer screen. If you’re using some obscure font, like Comic Sans MS, your readers will take longer to read your text, and it will also be harder for them to read it, either way, Comic Sans MS is still a horrible font. This is why they created Verdana; Verdana was created specifically for websites. It is meant to have increased visibility and speed up the reading process, this is why you see almost all the major websites, like Microsoft, Apple, Sun, all use Verdana. They want their customers to get quick info, without slowing them down.
Now moving onto the sidebar, the links are clearly displayed using borders and a stylish graphic to inform the user. Finally, on the bottom is a subtle yet noticeable footer where all the copyright and accessibility information is displayed.
With these aspects added together, Monc gives us the power of using simplicity to create one of best the designs I have seen.
As a sum up, here’s what implements a good site layout.
- clear navigation
- spacious content area with highly readable text
- clean sidebar navigation
- good use of contrasting colors
- suitable amount of graphics, no over doing
- crisp layout
You may have heard of XML, XML is the “eXtensive Markup Language”. XML is a relatively new markup language. In fact, XML is used to DEFINE mark up languages. And from XML comes XHTML, and new version of HTML derived from XML, this makes the coding more strict, and more readable by those who view or by the browsers that render your coding.
You I’m happy with my HTML.
While that’s what many may say, here are some good reasons to switch to XHTML. To quote Morden Pedersten:
QUOTE
• The browser will warn you immediately if there are syntax errors on your page (no need for validator)
• It forces you to write better and more structured code
• It's cleaner
• Its "the future". Many embedded devices will only play with XHTML, since XHTML is much easier to parse than HTML.
• It forces you to write better and more structured code
• It's cleaner
• Its "the future". Many embedded devices will only play with XHTML, since XHTML is much easier to parse than HTML.
Why establish web standards? Why use the stupid w3.org HTML validator? Isn’t it just a waste of time cleaning up my coding?
The reason why we validate our web pages is because we want them to be accessible through any browser, on any computer, by any means. Sure, Google has roughly 80 Validation errors, and Microsoft doesn’t even care. But what really matters in the validation process is that you can show others that your web site is made of clean coding. Sure, just because your page is valid doesn’t mean it will look any better, but validating them provides a world-wide standard for your website. Also, search engines like valid sites too.
Right now, I’m getting awfully tired, so I’ll finish off chapter three some time this week.
hope you enjoyed reading this,
-whyme
edit:added matching graphic headers.
