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:


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:




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.

 

 

 

Reply

Question: will XHTML validate Flash markup correctly? If it does, then I'm switching right away. Validate my website to see what I mean...

Reply

Your site's working properly, and it's HTML 4.01 complaint. I can't seem to find your navigation bar.

Reply

It's gone! But only temporarily as I'm redoing the layout. No big change, just some small touches on the site. You seemed to have validated my blog...try validating on of my pages deep inside the site (backup navigation is at the bottom).

Reply

funny thought when i did the xhtrml 1.1 validation it did not accept flash for some reason, still have to look at getting my website xhtml validated

Reply

There's been some limitations with the DTD validator, so that might have been what's causing the problems.

btw, snlildude, nice header graphic.

Reply

What do you mean limitations with the DTD validator? It seems that everything in my website is correct, but the stinking validator keeps saying my flash markup is wrong....maybe I should just put a button there that says my site is validated just to spite them.

Thanks for your compliment on the banner. The next is somewhat not centered, but I'll fix that in a couple of months.

Reply

Very good post Whyme. I'll just write my thoughts on a thing you quoted.


I'm not sure I agree with those things. Having a XHTML page (if you want to make it valid) will force you to write well-formed markup, but browsers will not warn for well-formed but incorrect XHTML.

There are certain tags that aren't allowed to be nested within each other, or have to be nested in something else (like the <input> tag, which has to be inside a <div> or similar). Such things will not be warned about, because you can write well-formed XML without necessarily having valid XHTML.

And that browsers giving warnings would be a good thing is something I am not certain of at all. Make an XHTML 1.1 (or 1.0) page, which is invalid XML, and send it as application/xhtml+xml and view it with Mozilla/Firefox. You'll get a big ugly syntax error message. Do you really want your visitors to see that?

 

 

 

Reply

hehe, true to that point, only some broswers provide web page debugging, while a majority do not.

hehe, snlildude, try checking out how other sites that are xhtml w/ flash layiout their content, you maybe missing something. Then again, I'm not sure.

Reply

In case anyone wants some further reading about XHTML, I suggest reading Ian Hickson's interesting piece called Sending XHTML as text/html Considered Harmful, in which he talks about the importance of sending XHTML as application/xhtml+xml to get any advantage over "normal" HTML.

It's well worth the read if you are using, or considering using XHTML instead of HTML.

Reply