Page = Document + Layout
The old debate of CSS v tables has flared up once again (see here and here). Its the same old arguments over and over. However, the very fact that this keeps coming around is evidence that both tools have problems.
Generally, I think CSS is great at styling content. It was designed to style text based documents, you can see that from the DTP inspired terminology. For example, floats are designed to float paragraphs of text around images, not for making left and right columns on your page. In short, I think layout in CSS is a hack, using CSS for something it was not designed to do, exactly as using tables for layout is also a hack.
So we have to choose between two wrongs right? What would be the ideal situation?
Look at the average website. Most pages have common layout and header elements. Looking at the source code, often only a small fragment of the HTML is actually for content. The rest are ‘layout’ elements that are constant across most pages in the site. So I think, in essence a HTML page is the union of two components, the content (the document in my mind) and the layout (the navigation, header, the search bar thats on every page). Look at this site. Only one small area corresponds to content (the blog post area) and the rest is my overly large sidebar, header and flickr photo stream. Not to mention all the divs or whatever to float the sidebar to the right etc…
Why is this a problem? Many non-standard uses of HTML (screen readers, search engine crawlers) have great problems separating the ‘content’ of the page from other secondary elements. SEO teaches us that we should have our ‘content’ as near to the top of the HTML as possible, and we have great fun trying to hack our CSS layouts so that order is unimportant in the HTML. Search engines also tend to devalue links in ‘layout’ elements (i.e. sidebars) compared to ‘in-content’ links. Why? Because a link in a layout element tends to occur on all pages in the site, where as a in-text link means that I am actually talking about that page there and then.
To me, this suggests that the most semantic solution would be to somehow separate the content from the layout elements. Therefore, each URI on the site corresponds to a small semantically relevant HTML document that is just the content for that URI. Layout elements could either be ‘included’ from external files in a similar way to the CSS @import directive, or marked as being ‘secondary’ content.
You can achieve similar results on the server side by including document fragments in whatever server side programming language you wish. This is not quite the same though as the full document (including layout elements) is sent to the client. I want to be able to do it sending just the content. Interesting, good old fashioned frames actually allowed us to this. I.e. in a frameset I could have one HTML docuument for the content and one for the layout elements. However, frames are awful and have a bunch of usability issues.
Obviously this is a pie-in-the-sky idea as it would require a standard to be defined and incorporated in the browsers. That could take years, even decades in IE’s case. The debate on tables v CSS is centred around which tool is best to use today, not in the distant future.
That said, I am looking at an approach to do this ‘layout functionality’ in javascript on the client before the page is rendered. Watch this space…
UPDATE: I realise I did not actually talk about HOW the layout might be achieved. Here is an idea (and just and idea).
[...] on from the CSS v tables for layout debate that is raging (continuously). As detailed in my previous post I feel that a HTML page is the combination of the content and layout. I.e. layout elements [...]
OneWheeledBicycle » Blog Archive » HTML layouts. Ideal solution, idea 1.
February 5, 2009 at 11:09 am
[...] “Page = Document + Layout”: Supportive of the use of CSS, but with thoughts about how the current state of Web page layout can be improved. [...]
Pinderkent: CSS versus HTML Tables: A summary of this week's discussion.
February 5, 2009 at 2:34 pm
Great post, I agree.
I think you are talking about a back to basics semantic approach to web pages.
I work with server generated pages, and I tend to use one template and one css file for all my layouts. Add a few CSS overides and the template is flexible. That would be very tricky in tables. (simple design: header, 2/3 columns, footer.)
I have never felt that CSS is brilliant for exquisite layouts but it will do for simple pages. I’d say that serving up the same content of your site on multiple pages is a waste of bandwidth and confuses search engines. AJAX and frames or a variant of, could fix this. I read that in XHTML2 frames would be back.
When I look at a site from an SEO perspective, my brain gets numbed, it doesn’t quite work. How is a search engine to know which part of the page are important? You can find the beginning of the main content, by finding the H1, how about the end?
In my eyes the only way to break the page content up into sections without frames is by using h1′s. But then which is deemed the most important? The first?
How about new attributes for divs:
Div grouping, importance, summary. Basically I’m talking about meta tags. Would these be inline? or in a metasheet?
Though maybe frames could fix this.
Like you say at least frame’s give you the ability to have a unique URI on the page fragment. Which could speed up page times with browser caching.
For me, the simpler the page. the easier it is for me to manipulate for me to read it. I find it very difficult reading a website with a white background. I generally override styles and sometimes disable stylesheets. And as a result I’m more into page content and semantic meaning, and document flow, than design.
I was also thinking on my own site, to just use javascript to pull in sidebars. Just making sure that a sitemap and search is there for those without. But still what do you do about sideboxes with some relevance to the page at hand? Do you describe the relationship somehow or ignore them?
Would XML and XSLT provide you with any answers?
grabur
March 4, 2009 at 1:28 am
Sounds like you need a dose of HTML5 =)
Jani Hartikainen
March 30, 2009 at 3:11 am