Introduction
I needed a website to come along with my internship report, and I decided to start it from scratch. My objective was to demonstrate that is was possible to separate efficiently content and layout through standards. And I must admit, I'm jealous of Haran's designs :p, and I really want to improve my work up to his level. A hard task though.
St.ndard Bea.er was made in less than two days, using jEdit, and the W3C validation service.
Key features
Standards compliance
This page validates as XHTML 1.1, and its stylesheet validates as CSS 2.0.
Some people will bug you about validation, telling you it's something overrated, and no so useful. Don't listen to them.
Validation may not be the Holy Grail, but it will help improving the web one page at the time, and will save you some headaches when you don't understand why your page is somewhat broken.
Unified stylesheet
The stylesheet stands for all browsers. Rendering is ok in all standards-aware browsers, and even though it may fail in older browsers, I just don't care.
Well, in fact I do. It's not lazyness that lead me to this descision, but two statements that every web designer should be aware of :
- CSS should be kept simple : hacks make them too complicated, and take us back too the dark days of the "n browsers - n layouts".
- Bad Browsers should die ! And it's a real pain to see that some of them are of the "die
hard" kind. If we don't support old and buggy browsers, we can accelerate their end, and benefit from our beloved standards at last.
Limited content
This layout is intended to display a content split in several parts on each page. I wanted the reader to have an immediate overview of each part. Using the .limited class, you can shrink the height of your content and make it scrollable.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Good semantics
Markup in this design is semantically good. There is no table as there is no tabular data to display. I use headings for titles, and lists when the content is a... list. Wow !
Good semantics are extremly easy to achieve, provided you know what tags are available and what they mean. XHTML is rich enough to create good content, why wouldn't we use it correctly ?
Additionnal styles
The following tags have a style of their own, just try them out : <dl>, <dt>, <dd>, <input>.
Contact infos
You can contact me through my OSWD page. I will try to answer you as much as possible, but I'm extremly busy at the present time, I don't guarantee you will get a reply, sorry.
If you use this design, please let me know, and please don't credit yourself for it. Giving me the credit for the design is the only cost for using it, and you can admit that it is a low one.
A last wish I have is that if you use this design, you agree to produce a standards compliant web page. That's all ;)
Courtesy Open Web Design Thanks to web hosting bluebook