One of the basic principles in visual design of things that go on the screen, is creating a consistent look and feel througout the entire experience. EPiServer is a typical web based application, and it has its look and behavior. It has its colors, button styles and behaviour. When making plugins/modules that integrate with EPiServer's own user interface, you should follow these "guidelines". It's really not that hard, and those extra 15 minutes spent on a plugin will make life better for developers, editors and webmasters around the world.

Consider the following image. It's from the pre-today version of Intergen's multipage selector from EPiCode. It had some styles for CMS5 applied, but has seemingly not been updated to use new looks after CMS6 was released. And the result? It looks weird and half-done.

Today, I spent something like twenty minutes fixing up all this. I removed all the old CMS5-styles, and added in the default stylesheets of CMS6. I also did all the basic formatting which I believe should be required by such a plugin, which I see is button styles, background colors, body padding and table styles. Those few things will at least cover 95% of what's needed.

Below, I have listed a few tips for when writing new plugins (or updating old ones!).

With those few, tiny changes, the updated Intergen Multipage selector looks like this:

...or in other words: It now looks like the rest of EPiServer.

To many developers, this might seem like a tiny change, but I guarantee you: This will without a doubt increase the feel of quality with your plugin.

And if my list above does not cover all possible application states in EPiServer, you should really just have to find similar interfaces that's already been built into the various parts of edit and admin mode and inspect the code with any web developer tools. All browsers have them these days.

And to clarify, I'm not trying to mock Intergen for not updating their plugins. After all, it's open sourced, and we're all human etc. I used it as an example because it simply was a really good example of what I'm trying to get through with this.

Complete list of EPiServer button styles