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:
Every layer is separate from the others, not only in theory but also in the fact that each layer resides in its own file.