I spend a lot of time thinking about what it means (and takes) to build a high-quality, professional web site or application. I consider the whole spectrum, from macro concepts like Graded Browser Support, Separation of Concerns, and Progressive Enhancement to micro rules like never employ href="#" and always use the label element to bind text to form controls.
It’s difficult to compose a prescriptive list of all the issues a "perfect site" must satisfy. So, lately I’ve been think from a different perspective. Instead of "what it takes to be great," I’ve been asking myself "what does a great site NOT do? More specifically, I’ve been assuming a perfect site gets 100 points initially and then loses points for shortcomings.
Here are a few examples that I could use to measure a site:
- -1 point for each instance of href="#", (max of -5).
- -5 points for redirecting old browsers to a "you must upgrade" page instead of letting them see the plain linear content at least.
- -2 points for design degradation at +/-1 font-zoom level; -1 for degradation at +/-2 zooms.
- -1 for each form element missing an associated label element.
- -2 for a missing (or malformed) doctype
It’s too early to debate the mechanics (should it be -1 or -2 points), but I like the approach in general and am going to keep playing with it this week. One good way I’ve found to discover the list of things is to find a nice modern page, hit view-source, and start giving it a code review. Each thing that catches my eye probably belongs on the list, somewhere at least.
I’m quickly building a longish list — and will publish it before too long — but right now I want to ask: What would you put on the list?