DIVless rethinking

18 November 2005, 23:22

This is a follow up to the post made previously: Why a divless page

When I first developed the HTML for this blog, I used no DIVs. Several things have happened to make me reassess this approach since I wrote the HTML and blog entry.

The first was in the development of the HTML, when I realised that I couldn’t put H tags in the DT. This was a big problem as most pages (particularly the homepage) contain a lot of text, and breaking this up into navigable areas for screenreaders should have been my aim. In the end I ignored the problem, and left it as it was. I did have a fairly decent H structure anyhow, although not for the bulk of the interesting bits of the page.

The second thing to happen was a conversation with a work colleague. He suggested that a list of blog entries were not a list of definitions. Now, I’m still unsure about this. The W3C says that a DL...

consist of two parts: a term and a description

A blog post title and the post's text? A recent visit to my workplace by Molly(.com) suggested otherwise, however. Andy Clarke described how he had successfully used a definition list in a product listing. Using the DT as the product heading, then the product’s image and details in DDs. So, I guess this depends on your interpretation of the standard.

I also had an email from a guy called Frank Olieu. He took me up on the statement in which I suggested that you should use some DIVs for the basic layout of a page. Here is what he said...

I just bumped into your divless page, which I found refreshing and inspiring…

But allow me a question...
You wrote:

(...) The solution is to use divs only when semantically meaningful markup is not possible. For example, if a design calls for a fixed width centred design, your going to have to wrap the lot in a div. (...)

... If I get it right, you could achieve the same thing by styling the /body/ element itself, even with borders if required. The only drawback I can think of, is that it would probably not work in anything prior to IE 5.5... I've been making some experiments with divless layout for some time, using a styled body as the main container, and the browsers (*) I tested with could cope with that.

Here is a "quick and dirty" mock up : http://www.design.olieu.net/files/divless.html, where even the /html/ element is styled! (it's partly in Danish but easy to figure out...)

What is your opinion? Would it be "safe" to use in real life?

(*) browsers: Firefox 1.07, IE6, Opera 8.5, Konqueror.

Well, some browser support not withstanding, it seems that you can style up the HTML and BODY tags enough to produce a decently laid out page without the DIVs I guessed you would need. Good work Frank!

Back to his question though - is it 'safe' on a public website? My answer to this was "it depends". If it's your techie focused blog your doing it on, then by all means go right ahead and do it, after testing the hell out of it. It's a nice little tech demonstration. However, I did say that he probably shouldn't use it for any much more than this. If your developing the next Google, a consumer e-commerce site (reliant on sales conversions) or any other kinds of mainstream web resource, then I would steer well clear. Best stick in a few DIVs - the cost of losing 5-10% (at a guess, perhaps more?) of your visitors because the page renders incorrectly (or worst case, not at all!) is too high when the only benefit is a bit less code and the kudos of pulling it off!

So, what was the verdict on this matter? Did I relent and stick some DIVs in? Kind of.

My homepage was getting too big (over 30k of HTML, and growing). I had not really thought out the navigation, and all the blog entries full text was clogging up the page increasing download time and obscuring the content right at the bottom. Because most (all?) of my posts are not timely, as in it doesn’t really matter which order you read then in, I figured this was a bad thing. I also had the screenreader issue mentioned above.

The solution therefore was to leave the 'Blog' section of the page as a definition list and only place the first paragraph on indexes. This, I believe makes the blog list much more like I think a definition list should be. This approach also got around an IE bug where the text was going over the left boundary of the DD if there were lots of long DD’s in the page. Very strange, but no longer happening.

So, no DIVs yet - but I'm certainly thinking about it for the blog entry pages.

Jason Cartwright RSS Feed

about

Jason is a web developer living in London, working for Google and Ferrago Ltd.

links

me

work

colophon