Front End Development Workflow
A cake of 3 layers
The image of a cake consisting of 3 layers is quite accurate to describe this workflow. The markup and content form the base layer, the HTML.
On top of that is a presentational layer, being everything that makes a site look the way it was designed: CSS, images, fonts.
The third layer is actually an optional one. It's the behavioural layer, meaning interactive elements, widgets such as open and close functionality etc.
I consider this layer optional because a website should still work and look right without this layer.
Working this way has a few bonuses:
- search engine friendliness
- work better across multiple browsers
- web content is more accessible.
- mobile or small-screen device ready
- faster loading pages
- easier to maintain therefore lower costs
I have been working in this way for years. And plenty of big agencies work the same way.
And if some don't, they should.
Listed, the workflow looks like this:
- Content
- Presentation
- Behaviour
Every layer is separate from the others, not only in theory but also in the fact that each layer resides in its own file.
Content (HTML) separated from Presentation (CSS) and Behaviour (Javascript).