Sophomoric rambling on judging a page by its CSS
I'm really not one for flash or pizazz. I avoid clothes with logos, except logos that I made a choice to wear that day (e.g., a GNOME T-Shirt to a GNOME meeting). The woman who cuts my hair has yet to get me to put gel in it; she also gets mad when I shave my head each spring to keep my head and helmet from getting gamey when I race. I picked my road bike for how it fits and handles, not for how it looks. My car is a 1996 Toyota Corolla Wagon, not for the sleek smooth lines, but because it holds my entire keyboard rig and it gets 33 MPG. For the most part, I guess I'm just a practical guy interested in content and utility, not fluff.
I do want to get some western boots, though, because I like their style. I guess that makes me inconsistent, which puzzles me on days like today where I fall victim to omphaloskepsis. Today's lint chasing is due to the fact that this dinosaur finally started using a style sheet. I guess I've been a CSS hold out because I think styles come and go but good content lasts forever.
Here are two pages:
Which one do you like better? If you have some vision, you'll probably choose the first one. If you have no vision, I'm not sure what your answer will be. The HTML markup for both links is currently EXACTLY THE SAME -- I just copied the about.html from projects.gnome.org to master.gnome.org and didn't make any changes to it. The only difference is that I prevented the second one from finding its style sheet.
I like the first one better. It's visually appealing and doesn't look amateurish like the second one does. But, geesh, the content is identical. In fact, I think I like the second one better. The second one gets rid of all the fluff and lets me focus solely on the content. Then again, because it looks amateurish, it appears that the author didn't spend much time on the page. So, why would I want to spend time reading it? But, I'll wager that I could omit important content and introduce 25 spelling and grammatical errors to the first page and people would still think the first page is better.
I guess for creating and editing a page, I'm better off looking at it without a style sheet, just like I might be better off writing slides in "outline mode" first. In any case, I guess my belly button has spoken: "Just as you should not judge a book by its cover, you should not judge a web page by its style sheet."
To relate this to accessibility, I think it's important to remember your audience includes people who will be accessing your content in a non-visual manner. Don't just beat it to fit and paint it to match with a CSS -- make the content meaningful, organized, and easy to navigate. Easier said than done, but we'll all be better people for trying.
first one, but I'm not vision impaired
Posted by shivan on November 06, 2008 at 02:19 PM EST #
The funny thing is the second is worse even for some handicapped people. Why? Because the headline is much smaller and there is little _visual_ indication which part is which.
So simplicity is not equal to accessibility.
And for U7Y/A11Y guys -- learn from typography experts (not me) for once and for good -- we do not use sans serif font in text (1st link), only serif (2nd link)! How many times this wheel has to be reinvented?
PS. Just to be fair, I don't like the first version because of the right pane. The linear (from top to bottom) pages are far more readable than those multicolumns.
Posted by macias on November 06, 2008 at 02:28 PM EST #
"The woman who cuts my hair has yet to get me to put gel in it"
Heh, same here. Well at least she has stopped trying by now :-)
About the CSS page: I like the first one better as well, because it has the same content but _also_ looks good. Good content is the most important thing for me, but nice style can make a good page even better. I think that's a rule that can be applied to other topics like e.g. application programming as well: most important is that an app works well; but if there are two apps that work equally well, I'd pick the better-looking one (OTOH, good looks can't turn a bad-working app into a good app).
Posted by oliver on November 06, 2008 at 02:48 PM EST #
I certainly think the first one looks better, but I also think the second one is at least as functional. However consider a few things:
Without any css, the page fills to the width of the browser window
Without any css, there's only 2 colours and colours used in images
Especially the first is important. Were I to have a 30 " display with 2560 pixels horizontal resolution, my browser window maximized, I would die before I could read to the end of a line. Of course I'm not a total idiot, so even on my 1680x1050 display I don't maximize my windows.
The second point is also somewhat important. Using colours can give a better overal impression of the page. Lets say I give all strong-tags a nice noticable colour, like red (works well in some designs). I could then with one quick look see everything that's somewhat important.
Css gets very useful when you combine it with semantics in a correct way. Also, you shouldn't overdo css. It's another file people have to load (although usually only once) and most (web)developers are no interface experts, so be careful with what you use and how you use it.
I think simplicity in site design is important, because the focus should be on the data and not the design. There are even people who really use minimalistic designs and assume browsers support a fair level of semantics out of the box. For instance you could specify previous and forward pages within html, and a supported browser would show buttons that exercise those actions. Also UniversalEditButton is a good example of this, it allows you to specify an 'Edit this page' url without actually showing it on the page, and will make you rely on the browser to show the edit button somewhere.
Me, I like simple designs, but I don't want them totally empty. I would really like you to take a look at my site, especially my blog at blog.mycroes.nl (my site is in Dutch, and it's almost totally empty, but the design is the same as on my blog). I think my blog is a great example of focusing on the data, with a personal touch. I do have to mention that it's a blogger blog (with my own home-made template) and thus is far from valid html or xhtml, so I can only hope the visual experience is about the same for all the visitors. You might also notice that the links that usually appear at the right on blogs (for archives etc) are placed at the bottom. The only reason I had for that thus far is that I think there is no such thing as a right place to put them, because they shouldn't interfere with the content. I think putting them at the bottom works ok, but I also think people might not see them this way and thus don't use them either.
Anyway, too much about my design, but I really like to hear your opinion about it. Last note on why you could want css: It allows for professional layout. You can align text (vertically for example), which is totally impossible when just using html. I've spend quite some time reading through articles from css-gurus and there's really more than you notice in the first 5 seconds when you look at a page...
Regards,
Michael
Posted by Michael Croes on November 06, 2008 at 06:08 PM EST #
@macias: not sure what you're seeing, as I see all-sans-serif text on both pages (and AFAICT my stylesheets aren't over-riding anything...)
But regardless... most studies over the years show that, all else being equal, sans-serif body text is more readable on computer screens, and serif body text is more readable on paper. (But of course other factors, such as column width and the font's x-height, do make a difference as well.)
Posted by Calum on November 06, 2008 at 06:11 PM EST #
I wholeheartedly agree with you.
About the content, there are still a couple of ways to make it better for visual impaired people:
* avoid presentation tags; if you need to emphasize something for example, don't use "<strong>" but "<em>" and associate the proper CSS to it (e.g. "font-weight: bold; font-variant: normal;"), or use a "<span>". Presentational infos should *only* be managed through CSSs.
* tables are traditionally hard to read for visually impaired people. If you *really* need to use them instead of a normal list, at least use "thead", "tbody" and mark as "th" the column headers.
For the rest: it's really good.
Posted by Matteo on November 10, 2008 at 07:02 AM EST #