Behaviour, Content and Presentation: why the 3 layer model is wrong
All good web standardistas know that your HTML provides the web content , your CSS provides the presentation, and your Javascript provides the behaviour. Right?
Wrong. Well, it’s right most of the time, but not always…
[Note to self: always start with something that sounds contentious -- it generates more interest]
And it’s these exceptions that I’m going to try and use to prove the rule. Except of course that I mean “prove” in the original sense of “put to the test”. Which makes the saying make a lot more sense, really. After all, is it more sensible that an exception puts a rule to the test, or that a rule isn’t a proper rule unless you’ve found exceptions where it doesn’t work?
So what are these exceptions to the three layer model?
Well m’lud, I submit to you the following prima facie evidence of behaviour being carried out by other layers.
- when you click on a hyperlink defined in the content, it changes the page you are viewing
- when you click on a submit button defined in the content, it sends data to the server and performs actions there
- when you move your mouse over something with the
:hoverpseudo-class applied to it, it changes according to behaviour
So, the first question to ask is are these actually exceptions to the three layered content, presentation, behaviour model. Let’s examine each of our examples in turn (oops, I seem to have gone a bit “Open University” there…)
Firstly, hyperlinks. Are hyperlinks strictly behavioural in the context of a web page? I don’t think they are. Hyperlinks contain the address of another web page. If you click on that, the web site itself does not redirect you to the appropriate page — it is your browser which interprets that as a command to load the new page for you. In this context, hyperlinks aren’t behavioural of themselves, they’re just an address book entry: what happens to that address is up to your browser.
I find hyperlinks not guilty of breaching the 3-layer model.
Secondly, the submit button. When you press submit, it sends off whatever data you’ve input in your form off to the server. Yes, it’s sending the content of the page, but it’s certainly performing an action — it’s usually adding details to a database, or sending an email or something similar. Is that then behavioural? I should jolly well say so.
I find the submit button guilty of breaching the 3-layer model.
Finally, CSS pseudo-classes. Is this behavioural? That probably depends on what you’re doing with it. If you’re replacing one decorative image with another in a rollover, or simply highlighting where a user is on the page, then I’d simply call that “presentational” and argue that pseudo-classes don’t have a case to answer.
But that isn’t all you can do…
There is one situation where I would say that CSS is used to present something in such a way that it exhibits sufficient function to be classed as behavioural. This would be variations on suckerfish dropdowns: ore more specifically those versions which don’t rely on javascript to create their function, such as Thierry Koblentz’s Pure CSS Dropdown Menus, which are fully functional in all modern browsers (needing version 7 of IE). Surely this is an example of CSS providing a behaviour?
Well, here I’d consider the defendant guilty of breaching the 3-layer model only in some circumstances, and maybe just let them off with a caution.
But joking aside, to me it makes more sense to think of a four layer model. There are the three layers we currently understand which are presented to the user, and an optional fourth layer hiding out back known as “server-side processing”.
Considering this as a four-layer process then, it’s obvious that the submit button does not in itself carry out the processing. It simply sends the request for processing (and the information that needs to be processed) along to the fourth, server-side layer, which duly processes it. Server validation, various other security techniques, database accesses and the like are all carried out in this fourth layer.
This is by some considered to be an additional part of the “behavioural” layer (although many people fall into the mindset of just thinking “behavioural = javascript”). However, I think it is sufficiently distinguished from client-side behaviour to warrant a layer in its own right: you can’t switch it off, it’s not exposed to the user, it doesn’t depend upon the user’s system or software, it’s used for application security and so on, and to not give it a layer in its own right is not to do justice to the complexity, power, flexibility and depth of features that it offers the developer.
Hopefully I’ve made a reasonable case for the fourth layer. I just now need to come up with a better name than “the server-side processing layer”. How about the process layer? It reflects the fact that this tends to be the layer which carries out the actual data processing — as well as being the layer in which necessary business processes are encoded…
In this case then, the exception tested the rule to destruction — at least in my opinion. But what about those CSS dropdowns?
To me, they are a presentational-layer implementation of behaviour. That’s not to say that I think they are a bad thing! To me, it’s the presentational layer being extended beyond its true remit in order to cater for the fact that relying on the client-side behavioural layer can cause accessibility problems. It’s therefore providing additional functionality to a wider group of people than would have been if they had used javascript to achieve the same ends.
So that’s why in this case, despite the fact that I consider it to technically violate the intended separation of presentation and behaviour, I’d let this one pass. Because in this case it actually provides a legitimate benefit to breach the standard model…
…but I still want a process layer…!
Cole Henley says:
November 28th, 2007 at 11:10 am
Interesting debate and here are some mumbling, rambling thoughts.
I am involved both in building back-ends of a site in PHP – consuming/processing data from a variety of sources (databases, web services, etc) – as well as the front-end product (HTML), ‘presentation’ layer (CSS) and ‘behaviour’ layer (Javascript). The three-tier referred to in web-standards refers to this front-end but I work in an environment that employs a different three-tier system distinguishing between the data itself, business logic (the processing and delivery of data) and presentation (the consumption and presentation of data). As someone involved in placing these data sources online, all my work is – in the broader scheme of things – considered to be presentational.
Your fourth ‘process’ layer provides a useful interface between the back-end and front-end of the web but isn’t the process a server-sided/back-end thang and therefore part of a different model than the traditional three-layer model which I see as aimed primarily at the front-end of the web. This is not to say I think it isn’t important we adopt standards across the back-end of web development nor that many (most?) of us wear both hats in the jobs that we do. Rather, what takes place in PHP (or whatever your back-end of choice) stays in PHP. The products of that process may be dependent on the user, particularly with form processing, but this process takes place independently of the user and irrespective of whatever device(s) they use to view and interact with a website.
I have always struggled with the idea of Javascript as behavioural. Are we talking about the behaviour of the user or the content? Javascript, in my opinion, is there to add value and a richer experience to a website but that experience still has to be made available without that layer – just as a site still has to be available with CSS disabled or on a device that doesn’t support styling. In this case behaviour has to be functional and therefore becomes an essential means of navigating and interacting with the content – it is not an optional layer draped over the top.
It’s all enough to make my head spin a bit…
Richard Conyard says:
November 28th, 2007 at 12:29 pm
Jack,
You need to split your process layer into more layers; well you don’t have to, but to get a meaningful and maintainable abstraction. Not perfect but in place here is:
Render layer (XSL)
Data Capture and validation (sxForms and a bit of XSD)
Business logic layer – still code unfortunately, but I’m having fun with some BPELesque stuff and playing with XML based languages
Data – XML
Max Design - standards based web design, development and training » Some links for light reading (28/11/07) says:
November 28th, 2007 at 2:48 pm
[...] Behaviour, Content and Presentation: why the 3 layer model is wrong [...]
Mike Cherim says:
November 28th, 2007 at 7:56 pm
Interesting approach — one I’ll have to mull over for a bit.
I would have to say now that the fourth layer was there all along and not form input triggered/dependent. It’s the HTTP request and that’s where it all begins.
zeroanarchy says:
November 28th, 2007 at 9:11 pm
It interesting that this topic has been brought up. I have been trying to find references to the standard implementation of layers eg. PHP and have never been able to understand why it was that layers became common practice and how. The benefits are obvious when working on a site in teams.
In relation to this discussion I have been working on the following layer principal for several years.
Database(Layer1) –> Code Layer(Layer2) –> Design layer(Layer3) –> CSS(Layer4)
The database layer could refer to calls to Oracle function, stored procedures or HTML templated SQL.
Code layer refers to your application code eg.. PHP, Java or ASP.
Design layer refers to your HTML layer or template.
And of course CSS is well straight forward.
In a lot of cases it’s obvious that this layout approach is not adhered to. This is an obvious disaster when working on enterprise level websites that take the following approach.
Database Layer(layer 1) –> Code, design and CSS layer(layer 2)
This is not necessarily the fault of the company or it’s web team but rather in many instances it can be attributed to the CMS they have integrated that does not even meet the basic requirements of W3C compliance let alone developing an adequate layered approach.
Regards
zeroanarchy
Seb Crump says:
November 28th, 2007 at 11:26 pm
I always thought there was about four layers too – but haven’t really tried to formalise/document them as such. I agree with Mike and zeroanarchy that the first layer is the fundamental one that’s always been there, i.e. the server.
However, now I come to think about it I think I would express it slightly differently…
Data (Layer 0 – database and optional hence zero) -> [translate] -> Logic (Layer 1 – all the server response including dynamic coding, if present, but could just be provide plain html etc.) -> [transmit] -> Structure (Layer 2 – yer (X)HTML stuff) -> [transform] -> Style (Layer 3 – CSS, etc.)
Of course the chain could work backwards.
I never really considered JavaScript a ‘behaviour’ layer it mearly implements some client-side stuff already there or in the case of AJAX is a mechanism for handling the server request other than the ‘normal’ browser-triggered HTML related requests.
JackP says:
November 28th, 2007 at 11:37 pm
@all: like I may have mentioned I was being deliberately contentious – but when it comes to online discussions I find that the whole “server side processing” part of it seems to barely get a mention — and to me without that you simply haven’t got a web application. Which is why it deserves at least one layer in its own right…
Mike makes a valid point in that the “server request” has been there all along — the flip side of which of course is “so why do we only consider what gets served to the client?”… because without that fourth layer you’ve got static-only sites.
Anyway, it’s achieved my target: stirring up a debate. Whether the consensus is with me or against me matters less to me than whether I’ve made people think…
garment news daily says:
July 28th, 2011 at 5:34 pm
Read was interesting, stay in touch……
[...]please visit the sites we follow, including this one, as it represents our picks from the web[...]……
1234test.com says:
August 30th, 2011 at 11:10 pm
Queens University Blog…
[...]With the right skills you can be good at many more things and doing almost no mistakes..[...]…
san diego houses for rent says:
September 11th, 2011 at 10:08 am
Resource on San Diego Rent…
[...]If you are conscious when working at your projects you will do more than if you have no ideas..[...]…
penny auction news says:
September 20th, 2011 at 9:37 am
How To Deal With Penny Auctions…
[...]When you know when doing your work you will do more than when you have no ideas…[...]…
Chadwick says:
September 21st, 2011 at 4:38 am
This site rocks !. I continually run into interesting things & unique here. Thanks for that information.
Symptoms Of Low Vitamin D says:
September 22nd, 2011 at 2:05 pm
Symptoms Of Low Vitamin D…
we like to honor many other internet sites on the web, even if they aren’t linked to us, by linking to them. Under are some webpages worth checking out…
sport psychologist says:
September 25th, 2011 at 9:55 am
Blogging About Main Training For Cricket…
[...]This is a new website on this topic. You can see more about it on the site[...]…
bedroom furniture sets says:
September 26th, 2011 at 10:26 pm
What Is Real Hard Work…
[...]]Having the right knowledge you can do quality work at at a lot of jobs and doing almost no mistakes.[...]…
oil paint photo says:
October 3rd, 2011 at 2:28 pm
New Ideas On How To Lose Weight…
[...]When you know when working at your projects you can be a lot more successful than if you have no ideas..[...]…
Kartenquiz says:
October 4th, 2011 at 9:04 pm
Portraits of Famous People…
…We all know that skills come pretty handy when doing something new and even more it if is important to us.[...]…
sunglasses carrera says:
October 22nd, 2011 at 2:22 pm
Carrera Has Been On Top For A Long Time…
[...]It’s a known truth that right knowledge can be very important when doing work for the first time and especially if it is something very important.[...]…
urse valley says:
October 25th, 2011 at 9:09 pm
Purse Valley Shop…
[...]If you know what is your job you can be a lot more successful than when you have no skills..[...]…
plastic surgery internet marketing says:
November 4th, 2011 at 11:37 am
How To Market Plastic Surgery Online…
[...]If you are conscious when working at your projects you can be a lot more successful than if you have no knowledge..[...]…
Business says:
November 9th, 2011 at 9:41 pm
Making Money with Business Online…
[...]It’s a known truth that right knowledge can be very important when doing work for the first time and especially if it is something very important.[...]…
site says:
November 11th, 2011 at 3:06 pm
senior dating…
please visit the sites we follow, including this one, as it represents our picks from the web…
card games olie says:
November 24th, 2011 at 11:24 pm
Find Apple AV Cable…
[...]It’s a known truth that right knowledge can be very important when we are doing something new and especially if it’s important to us.[...]…
Neutrik connectors says:
December 2nd, 2011 at 11:41 am
Find Neutrik Connectors…
[...]When you know when doing your work you will do more than when you have no ideas…[...]…
tom ford ingrid says:
December 3rd, 2011 at 2:22 pm
Carrera Sunglasses For Style…
[...]When you know what is your job you can be a lot more successful than if you don’t have much skills.[...]…
painting from a picture says:
December 5th, 2011 at 6:54 pm
photo to painting…
Can I only as an example what a easing to ascertain someone who actually knows what theyre state from the internet .You unquestionably have learned to make for a thing to easy and make it significantly . More people in the usa should find out pretty mu…
west virginia university mountaineers sweatshirts says:
December 6th, 2011 at 11:27 pm
New Ideas For Shopping…
[...]I think it’s really critical that more folks know about this. It really is great to know a number of people even now care about this[...]…
free articles for websites says:
December 10th, 2011 at 11:11 pm
How To Find A Mentor For Learning…
[...]Awesome data that I’ve been looking for for some time! I’ll check your website inside the long term.[...]…
solglasögon online says:
December 15th, 2011 at 3:08 am
Billiga Solglasögon…
[...]I see you recognize lots about what that you are writing about. Interesting study. I got some fascinating strategies from this[...]…
Latin Ladies says:
December 18th, 2011 at 8:02 pm
How To Organize Romance Tours…
[...]I see you understand a great deal about what you’re writing about. Interesting read. I’ve just had a different concept pop into my mind[...]…
news online says:
December 20th, 2011 at 11:25 pm
What Are The Best Funny Videos…
[...]This is truly cool. I will check your web page inside the long term.[...]…
http://trafficsiphonreview.org says:
December 27th, 2011 at 6:30 pm
What Is An Electric Cigarette…
[...]Awesome information that I’ve been in search of for some time! You can find out more about this topic[...]…
challenge coins says:
January 2nd, 2012 at 6:25 pm
What Are Challenge Coins…
[...]I feel it’s pretty important that extra persons know about this. Thank you for writting this[...]…
Atlanta Roofing says:
January 10th, 2012 at 11:29 pm
How To Get Better Roofing Offers In Atlanta…
[...]I see you know a whole lot about what you happen to be writing about. Fascinating study. I’ll check out your site inside the future.[...]…
cheap fragrances says:
February 4th, 2012 at 12:58 am
How To Choose The Right Fragrance…
[...]The discussion started here that could be help full to readers[...]…