Three separated layers of web development? Think again.
The reactions of the audience at @media, and many a chat afterwards made it obvious to me that the concept of JavaScript adding the behaviour layer above the HTML markup (or structure) and the CSS (or presentation) has become commonly known.
This is nothing new, after all, Zeldman’s book explained that in 1999 with a nice movie metaphor:
If your web page were a movie, XHTML would be the screenwriter, CSS would be the art director, scripting languages would be the special effects, and the DOM would be the director who oversees the entire production.
However, when it comes to accessibility and ease of maintenance, I’ll dare to make things more confusing now, by telling you there are five levels of web development, each of them with its own technologies and methodologies. Only when all of them work properly and are aware of standards and accessibility / usability constraints we can work without breaking a sweat.
The levels are:
* The behaviour layer â Executed on the client, defines how different elements behave (Javascript, Action Script)
* The presentation layer â Displayed on the client, the look and feel of the site (CSS, images)
* The structure layer â Displayed on the client, the mark-up defining what a certain text or media is (xHTML)
* The content layer â On the server, the text, image and multimedia content that are in the site. (XML, DB)
* The business logic layer â On the server, defines what is done with incoming information and determines what is returned (Backend, various environments)
The Business Logic Layer needs to
* provide the different states in a styleable and changeable format
The Content Layer needs to have
* Text that is easy to understand
* Text that makes sense without a visual representation (wrong example: âclick on the links belowâ)
* Alternative text for every image, sound piece or video that is content
* Text that is fit for the web (KISS, structured into headers, paragraphs and lists)
* Explanations of Acronyms and Abbreviations
* Content images need to be unambiguous for the colourblind and text in images needs to have a sufficient size and contrast.
* Information to the users of changes necessary to her environment (example: âopens in a new windowâ or âPDF document, 182kbâ)
The Structure Layer needs to
* provide a consistent document structure with the content available as early as possible
* provide the âinvisible accessibility enhancementsâ like accesskeys, link relationships and table serialisation aids.
The Presentation Layer needs to
* ensure that text can be zoomed without making the site unusable
* ensure that the interactive elements of the site are easy to find
* ensure that images and foreground and background have enough contrast and are unambiguous to the colourblind
* give the site a consistent navigation
* Aid the user through business processes
* Separate content into easily understandable units
The Behaviour Layer needs to
* ensure that all the functionality is available to the user regardless of input device
* make the user experience as easy as possible by cutting down on options until they are necessary
Raising awareness of this might help in the future, and accessibility / usability will not be considered a “plug-in” added in the final week of the project lifecycle any longer.
June 16th, 2005 at 11:55 am
I have been working on this approach with our lead technical developer. We want to see if we can’t standardise the structure (XHTML) of our content managed sites a little to speed up the development process. However I have never considered the business logics layer as being seperate before. Interesting.
June 17th, 2005 at 11:47 am
I don’t disagree with your take at all, obviously when we refer to the three layers we are referring specifically to BROWSER based concerns, not the clearly more complex aspects that content and management bring in.
My main concern with your model is terminology. I would find something different than “business” – maybe architecture or server is better. Business implies something completely different (although still related to the bigger picture thinking you’ve got going here).
Interesting take, Christian. Thanks!
M
June 17th, 2005 at 11:55 am
“Business Logic” is a common term in web application development, that is why I used it here. I do agree that it is really confusing, though :-)
My most confusing project was developing a mortgage application as a web application. Many a meeting with “what application do you mean now” took place there.
June 18th, 2005 at 2:28 pm
Behaviour, presentation, structure and content all belong to the client side (UI), whereas the concept of business logic belongs to the server side. It means that if you include business logic in your model, you must also include data storage and access as the lowest layer, or the model isn’t complete. I hope you will fix this. :)
Edit Feel free to come up with an own one. Personally I don’t see how either data storage or access does interfere with the usability or accessibility of a web product, and would confuse matters.
August 8th, 2005 at 9:15 pm
“The audience at @media, and may a talk made it obvious to me that the concept of JavaScript adding the behaviour layer above the HTML markup (or structure) and the CSS (or presentation).”
I’m having a lot of trouble parsing that sentence. Seems like the first draft might have had a few more words before or after the comma?
January 15th, 2008 at 3:23 pm
Fatalis – content does not belong to the client side(UI); content is what you are presenting at the client and it is stored at the server in simple terms. Or have I missed something?
June 26th, 2009 at 11:36 pm
[...] … 010707.htm- to know more about the five layers see this http://www.wait-till-i.com/2005/06/16/t … ink-again/http://jeffcroft.com/blog/2007/sep/26/n … [...]