We are pleased to announce that Friday 10th October will be Boagworld discount day at the Head Conference site. Signup to attend on that day and you will get 20% off!
HTML snippets
Published on: February 18, 2008 by Paul Boag
If you are part of a web design team or skip constantly between projects, then you might want to consider an alternative approach to writing your HTML.
At Headscape efficiency is king. If you are efficient, you increase profit margins and keep prices competitive. You can only charge as much as the market allows. If you want to increase your profits you need to complete projects faster, while avoiding lowering quality.
As part of our efficiency drive we identified 4 problems...
- Designers have to work with each others markup. We all code in different way and this creates a learning curve when a project gets passed between designers.
- Integration HTML markup into server side applications was time consuming. Because designers coded in a different way and change their markup for each project, it was time consuming to apply that code to web applications like our in-house content management system.
- Designers were constantly reinventing the wheel. Each project was built from the ground up with little reuse of markup across projects.
- It was confusing switching between multiple projects. In order to ensure the most efficient use of time, designers are expected to work on several projects simultaneously. Unfortunately, switching between project is confusing because each had different markup.
We required some way to standardise tour markup.
Templating doesn't work
At first, we produced templates for the different types of pages. For example, we had news listing, text and FAQ templates. Although this worked, they were not very flexible. As soon as the content or functionality began to deviate from the norm the templates had to be heavily customised. This undermined the benefits they provided. They also didn't allow flexibility of design. Although content and design should be separate, it rarely works that way. Sometimes content needs to be marked up up in a particular order. Other times extra divs are required. The templates didn't accommodate either scenario.
We needed a more flexible approach.
Using snippets
The solution was HTML snippets. Content such as news listings, forms, navigation and FAQs appear in a vast majority of websites we build. By coding these in a consistent way each time they appear, we solve all of the efficiency problems mentioned above.
Take for example news listings. Most news listings look the same. They have...
- Title
- date
- link
- description
- and sometimes an image
Because of this consistency you can code in the same way each time. Content will change, each will have its own unique id and sometimes an element might be dropped (e.g. the date or image). However, fundamentally the snippet is consistent
This consistency allows...
- A designer picking up the code to instantly understand what is happening.
- A developer to quickly integrate it with server side code because the integration is consistent every time.
- Pages to be built faster because you are dropping in pre-generated markup
In affect all the designer has to do is build an HTML framework. This consists of the overall containers (main content, secondary content etc.) He then drop snippets into that framework in whatever order he requires.
However, the benefits don't stop there. You can also associate CSS with each snippet of HTML.
CSS fragments
If your HTML snippets are consistent, you can also build up a library of CSS fragments to support them. Take for example our news listing. Not only does it often contain the same content it is also often laid out in the same way. The image sits to the left while title, date and description sits next to it on the right. Because we know what the markup looks like, we can create this layout as a CSS fragment that can be dropped in whenever this HTML snippet is used.
We are not limited to a single CSS fragment per HTML snippet. Over time you can build up a variety of different CSS layouts for each snippet that can be used as the design dictates.
This approach provides a huge productivity benefit as the HTML and CSS can be built up in a 'pick and mix' fashion. However, you can also take the principle one step further and apply it to Javascript.
JavaScript functions
Each HTML snippet can have associated Javascript functions. These can be dropped in just like CSS fragments. These functions carry out common behaviour associated with that HTML snippet.
Take, for example, a FAQ snippet. A common behaviour with this snippet is to only display the answer when a question is clicked. Because we have consistent code in the snippet, it is easy to build a function that works with it and can be dropped in as required. Where possible keep your functions generic and not tied to a particular HTML snippet. However, where that cannot be done, we have standard HTML that allows us to reuse functions across projects with no editing.
Conclusions
In many ways this approach is a cross between microformats and frameworks and so in itself is not groundbreaking. However, from an efficiency standpoint, the impact is overwhelming. Without a doubt it will speed up development times and allow you to turn around projects quicker.
Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Post by Mark Ford on February 18, 2008 4:49 PM
Post by paul Boag on February 18, 2008 5:08 PM
Post by Matt McCabe on February 18, 2008 10:05 PM
Post by Josh Walsh on February 18, 2008 10:18 PM
Post by Mark Ford on February 19, 2008 3:25 PM
Post by David Mead on February 19, 2008 10:01 PM
Post by Rozario Chivers on February 20, 2008 11:05 AM
Post by Darren on February 20, 2008 11:33 AM
Post by Jonas Flint on February 24, 2008 6:01 PM