Note: This site might seem inactive… That’s because it is. Don’t worry though, I’m still coding webpages and stuff! If you’re interested, I suggest you get a translator and head over to Qiwi; or you could just check the latest site we’ve been working on: Apotheek Goethals – Debrabandere. Enjoy!
Web Design Canon
A canon is a rule or especially body of rules or principles generally established as valid and fundamental in a field or art or philosophy.
About 1500 years ago, for example, the Greek sculptor Polycletus created Doryphoros, the spear-carrier, which has been considered as the standard figure of perfection for a long time. Pretty much like Leonardo Da Vinci’s Vitruvian Man, indeed.
The only reason I’m telling you this is because it’s stunning that, other than W3 specs, there isn’t such a thing like a “Web Design Canon” yet. In my opinion, there’s more to a site than just a nice design combined with interesting content.
- Cruft-free IRIs
- Not only all question marks and ampersands, but also
index.php,www., and all file extensions in web page IRIs are redundant.[1] And in my opinion, they’re more than that. They also look horrible — at least to my geek eyes. - No underscores in a IRI
- Beware of the mighty hyphen.
- A well-overthought site structure through good IRI design
- By that, I mean nothing more than easy to remember IRIs. Why use
/AllAboutMe.htmlwhen you could use/about? - Relative linking (using relative IRIs with absolute paths where possible)
- Read all about that here. Basically, when linking to a page located on the same domain, including the domain in the link is a redundancy.
- Typographical dashes and slashes
- This and much more can be easily done through the use of a PHP filter like Texturize, of which you can get the code by downloading WordPress. No excuses about not using ’em. Curly quotes, yummy.
- Use of web standards
- I really don’t care whether every page of your site is 100% valid — as long as you’re not using
target="_blank"and doing efforts to separate style from content, I’m happy. - A little bit of PHP and JS magic
- PHP is in this list just because I loooove checkin’ page execution times. Of course, PHP is extremely useful for web developers, but I think it’s obvious that site visitors don’t care about whether a page is parsed through PHP or hardcoded in XHTML.
And through JS, a lot of usability enhancing can be done. Sortable tables are just one example. Of course, funky site effects can be added as well, e.g. LiveSearch. I really like how Dunstan implemented this on his blog. - Anchor-wise in-page permalinks
- On a blog, for example, every comment should have its permalink.[2] So should the comments section, as well as the post comment section. Don’t forget about
rel="bookmark"! titleattributes- I add
titles to every link I place on this site. You should do the same. There are much more tags that can have or are even based on atitleattribute, such as<abbr>. Those are cool, too. - Well-styled
titletags - While we’re at it: it’s not about a site’s name, it’s about the page title. Pick a separator, and go reverse that
titleorder. - Capitalization in headings
- Read all about it here, and make your headings look even more stylish.
Note 1: Web pages
, I said. The point in uncrufting your CSS, JS, or images by virtually removing their file extensions is beyond me, as those aren’t really ment to be viewed separately, nor to be linked to. Maybe that would be a bit too much.
Note 2: Please, don’t go killing this idea.
The funny thing is that one year ago, I didn’t apply to any of these specs :) Maybe, one day, I’ll create a WDC Validator…
Comments (12)
Listed below are the responses for this entry.
Trackbacks & Pingbacks (2)
Listed below are resources on the web that mention this article.
-
- Everyday Thoughts: Website work; touching on web design canon:
Website work; touching on web design canon
Still working on the site. Plus, a look at developing a web design canon.- Trackback made on December 26th, 2004 @ 5:22 am
-
- Everyday Thoughts: Linkage on writing:
[…] e you say this is the the way to write?” (Much like people did with Mathias’s web design canon, come to think of it.) Granule of salt, a nice chill pill, and a bit of p […]
- Pingback made on April 25th, 2005 @ 3:52 am
Good point, mister. There’s a lot on this list that’s so underestimated.
That is one of the things that makes the web a great place. Flexibility. I like to look at it from another point, sometime standards can bring constraints on creativity.
Pretty much all of that makes perfect sense (even if I won’t implement some bits — relative links, for example. I’m just set in my ways), although one point:
Why shouldn’t I use
target="_blank"? I use it for any external links, because I figure people don’t want to lose my page. If links occur in the middle of a piece, it’s a lot better to have people open it in a new window and be able to keep reading my piece. Of course, whenever I visit a link, I just hold ctrl, so it opens up a tab :-DSeriously, if there’s proper reasons for it, I’ll stop using it.
Ah! Someone I can convert!
I think it should be up to the user whether they want to open a link in a new window or not. It’s easy enough to shift-click or right-click the link and choose. Moreover, the
targetattribute is illegal in XHTML 1.1 and XHTML 1.0 Strict.However, there are some more elegant solutions to open external links in new windows:
<a href="http://example.com/" rel="external">Link to external site</a>. This allows some very simple and lightweight JavaScript to essentially work around the popup problem in an elegant and user selectable way. More information about that can be found here.(I hope those who posted on this thread on the WordPress support forums don’t mind me quoting them.)
Whew — I’m using transitional, so technically speaking I’m alright.
Well, the “it’s going to be banned” argument is good enough for me, regardless of the point of view on opening up new windows (I’m still all for it). I guess I’ll have to implement the JS in a future redesign, but for now I’ll just stop using
targetand userel="external"instead.Reckon it’s worth going through my archives? I link. A lot.
Well, you could just run this MySQL query instead of manually editing all posts:
UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, 'target="_blank"', 'rel="external"');My gift to you for switching to the non-
target-ism. :)Lifesaver!
Much as I love reading your blog, your attempt to make it the de facto template for other bloggers (among others) strikes me as rather arrogant. Don’t get me wrong, I agree with most of what you said. You’re just waaay too preachy. Merry Christmas, tho :)
It is not my intention to sound preachy. I just wanted to let the world know what I like in a site. This is my WDC, not the WDC. Merry christmas.
For years I had been using Art and the Zen of Web Sites as my design “canon”. It is getting slightly out-dated however, and tips and rules such as your are definate additions.
Perhaps, with the help of everyone that has commented on this article, we could put together a “Canon of Developing for the Web”. Those with Web site and application design and development could edit it, via the power of a Wiki, and all would benefit.
If Shea’s Zen Garden is a showcase for the “power” of separating content and style, perhaps the CDW could be a reference for anyone beginning a new project.
Oh yeah, and scripting language preference shouldn’t matter — although I prefer PHP as well — others might like other flavors of programming.
A WDC/CDW Wiki sounds like a great idea. As much people as possible commenting or posting their additions on this canon would be a good start, though.
Ideally, every single web developer would make a write-up of his own Web Design Canon. This would be even better than a Wiki, as there is no dogmatic rule to be laid down for what makes a great website (design-wise), apart from of course the use of web standards.