The Art Of Xhtml, Css And Web Standards - Part 1 The Markup and Style Guidebook

[whyme 0]

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/. Lets 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:

	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, Id 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 youre 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, heres 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 Im happy with my HTML.

While thats what many may say, here are some good reasons to switch to XHTML. To quote Morden Pedersten:

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.

Why establish web standards? Why use the stupid w3.org HTML validator? Isnt 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 doesnt 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 doesnt 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, Im getting awfully tired, so Ill finish off chapter three some time this week.

hope you enjoyed reading this,

-whyme

edit:added matching graphic headers.
Edited April 24, 2005 by whyme (see edit history)

[snlildude87 0]

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

[whyme 0]

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

[snlildude87 0]

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).

[Saint_Michael 3]

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

[whyme 0]

There's been some limitations with the DTD validator, so that might have been what's causing the problems.btw, snlildude, nice header graphic.

[snlildude87 0]

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. :lol:Thanks for your compliment on the banner. The next is somewhat not centered, but I'll fix that in a couple of months.

[bjrn 0]

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

 

While that?s what many may say, here are some good reasons to switch to XHTML. To quote Morden Pedersten:

 

? 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.

 

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?

[whyme 0]

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.

[bjrn 0]

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.

[Tyssen 0]

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 doesnt 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 doesnt mean it will look any better, but validating them provides a world-wide standard for your website. Also, search engines like valid sites too.

Not just that - the push is on (being led by the US at the moment I think) to make more & more sites 'accessible' to all users, that means people with disabilities too. If you do it right, redesigning your site for XHTML means that it will be accessible to older browsers, screen viewers, WAP devices etc. So not only will you not be marginalising anyone, you'll also be opening up your site to the widest possible market.

[bjrn 0]

Not just that - the push is on (being led by the US at the moment I think) to make more & more sites 'accessible' to all users, that means people with disabilities too. If you do it right, redesigning your site for XHTML means that it will be accessible to older browsers, screen viewers, WAP devices etc. So not only will you not be marginalising anyone, you'll also be opening up your site to the widest possible market.

139599[/snapback]

Actually, if you want older browsers to understand your site, you should definitely stick to HTML and not use XHTML. If you want to make sure everything works I'd probably go for HTML 4.01 transitional.

 

XHTML forces you to do loads of things older browsers wouldn't understand. Seriously, IE, the most used browser right now doesn't understand XHTML, it just handles it like tag soup (this means IE just says "wow, this looks a bit like HTML, I'll see what happens if I render it like bad html").

[Tyssen 0]

XHTML forces you to do loads of things older browsers wouldn't understand.

And what would those things be exactly? All XHTML forces you to do is mark up your document correctly - every opening tag must have a closing tag and tags/elements that became deprecated in HTML 4.0 cannot be used. The only other thing is that some tags have /> at the end of them which is not going to affect older browsers.

 

Seriously, IE, the most used browser right now doesn't understand XHTML, it just handles it like tag soup (this means IE just says "wow, this looks a bit like HTML, I'll see what happens if I render it like bad html").

 

I'm not sure what you're basing this assumption on so am viewing it with some at the moment, but I do know that IE is losing market share hand over fist to Mozilla, so if you wanna continue living in the past and coding your pages as HTML 4.0, go right ahead.

[bjrn 0]

XHTML forces you to do loads of things older browsers wouldn't understand.

And what would those things be exactly? All XHTML forces you to do is mark up your document correctly - every opening tag must have a closing tag and tags/elements that became deprecated in HTML 4.0 cannot be used. The only other thing is that some tags have /> at the end of them which is not going to affect older browsers.

Okay, perhaps not loads of things, but how many old browsers do you think understand XML? Things like:

<script type="text/javascript"><![CDATA[ ...script commands...]]></script>

Or how about the very simple <br /> tag, which if your older browser is parsing things correctly (which it may or may not do) should make this

<p> Hello <br /> World </p>

look like this

Hello> World

Seriously, IE, the most used browser right now doesn't understand XHTML, it just handles it like tag soup (this means IE just says "wow, this looks a bit like HTML, I'll see what happens if I render it like bad html").

I'm not sure what you're basing this assumption on so am viewing it with some at the moment, but I do know that IE is losing market share hand over fist to Mozilla, so if you wanna continue living in the past and coding your pages as HTML 4.0, go right ahead.

I don't know which assumption you are referring to, but at the moment IE has a market share of about 90%. The other assumption, that IE doesn't understand XHTML, is a fact. IE doesn't understand XHTML, it does parse it as tag soup, and it will totally break down if you send XHTML with the correct MIME type (application/xhtml+xml) instead of text/html.

 

 

I'm not saying XHTML is evil. And I'm not sure how much you really should take old browsers into account, IE6, possibly 5.5, is about as old as I usually bother with. XHTML can be terribly handy if you want to embed things like SVG or MathML into your documents (or perhaps plan on doing so in the future), but if you are mainly serving "normal" content to an IE audience you might ask yourself if it's worth switching.

 

You say that making HTML4 pages is "living in the past", to which I'd reply that I wouldn't be so sure that HTML4 will be replaced by XHTML, in fact chances that a new HTML version will emerge are far from small.

 

Go make XHTML pages, I do that too, as long as you realize that the only benefits you are making is when you are serving it to browsers that understand it, and with the correct MIME type. And that XHTML may not be the next widely used HTML version.

[Tyssen 0]

I don't know which assumption you are referring to, but at the moment IE has a market share of about 90%.

I've seen IE's market share reported as anywhere from 64-83%, but definitely not as high as 90% and falling all the time.

You say that making HTML4 pages is "living in the past", to which I'd reply that I wouldn't be so sure that HTML4 will be replaced by XHTML, in fact chances that a new HTML version will emerge are far from small.

I don't know what you're basing that assumption on, but the W3C HTML Working Group don't appear to be considering a new version of HTML. As far as I can tell (and this is what I thought was the case), HTML has been superseded by XHTML.

The other assumption, that IE doesn't understand XHTML, is a fact. IE doesn't understand XHTML, it does parse it as tag soup, and it will totally break down if you send XHTML with the correct MIME type (application/xhtml+xml) instead of text/html.

Until this thread, I hadn't read too much up on this, but this thread has some useful info on it with both pros & cons. At the moment, it appears you are right about not all browsers interpreting XHTML properly when sent with the correct mime type, so it seems the main advantage is in 'future-proofing' your sites for when all browsers do accept application/xhtml+xml. To me, there doesn't seem to be much dispute about things going this way, so whether you do it now or some time in the future, it's still gonna need doing. To my way of thinking anyway.

Aside from the technical issues, I also think using XHTML/CSS forces you to become a better web designer. I know it has for me.