whitelabel css
I've talked a lot about css already, but I mostly write about stuff happening inside a css file. It is time to broaden our perspective a little bit, so I planned a short series on specific types of css files and how and where to use them. This series will cover whitelabel, blacklabel and reset css files. On top of that, I'll throw in a handy trick to make better use of your blacklabel css. But let me start off easy by explaining a thing or two about whitelabel css files.
whitelabel wha?
I'm not sure how we ever came to naming this type of css file, maybe we stole the name from somewhere else, but chances are that you have no idea what I'm talking about when I mention whitelabel css. To explain what they are, it's best to explain a little more about how they came to exist and why I started making them.
Our company does a lot of wireframing work, but a wireframe is nothing more than an image on a paper. It is more fun to show it live in a browser. This way customers can get a better feel of the proposal, maybe even click through to other sections and see the wireframes in action. To accomplish this, we created standardized html code for all regular page components (like grids, navigation elements, text blocks, etc etc ...), to the point where we could effectively create a static demo site with little extra effort.
This was all very nice, but without css applied the live wireframes are of very little use. So for each html component we added a couple of css rules to make a page resemble a real wireframe when shown in a browser. In short, a whitelabel css is nothing more than basic styling to visualize (standardized) html components.
two feet on the ground
Setting up a whitelabel css will take you some time, as you need standardized html for each component you want to use, and you need to write css for each and every one of these components. On the other hand, once you have all that, producing a wireframe in html is as easy as can be. And once set up, you can use it for all your projects to come.
In some cases the standardized html can be used for the actual implementation of the site. If this is the case, the whitelabel css will be extremely useful for developers as they can already start development and see the results of their work visualized in a browser window. A whole site can be set up like this without an actual design being available. Alternatively, if no design is available yet, you can choose to write a whitelabel css for the actual site html so implementation of html can already start. And even though a css file is not strictly necessary to do this, it will prove a major help for developers.
traps and pitfalls
Beware though, because there are some pitfalls when using a whitelabel css. First of all, you have to make sure that you have a solid understanding of what you are doing. Standardized html is cool, but not always practical for the actual implementation of a site. This is even more true when speaking about css. The whitelabel css might look like a good starting point for implementing the real design, but believe me it is not. At all. Adapting a whitelabel css will often result in leftover css code and haphazard solutions. When implementing a design, it is always better to tackle each problem from a fresh perspective rather than to adapt an existing solution to make it all fit.
Writing css for standardized html is also a lot more difficult than it sounds. There is no set way to handle this but one thing to keep in mind is to use set values for spacing between components. Every component can be placed into every grid possible and if you start mixing paddings and margins the result will be pretty chaotic, resulting in ugly wireframes. Not exactly what we in mind. Additionally, you can make your life a little easier by ignoring IE, but that's a call you have to make yourself and might depend on your client's browser of choice.
Other problems are related to the expectations of your clients. When you show them wireframes in a browser (em-sizing and everything) you can be sure they will consider the templating work almost done, while in fact there is still a lot of work to be done. Be sure to inform your clients well as they will probably have a hard time understanding why some parts need to be re-built to fit into their specific site.
Also make sure your design is a non-design. It's fun to create a whitelabel css that looks nice and flashy, but remember that you are using it for visualizing wireframes and nothing more. Your main goal is to provide a clear blueprint of the site. Not to say you have to make it as ugly as can be, but make sure your client doesn't mistake the wireframe for an actually designed page. Believe me, it can happen.
Finally, live wireframes have the same limitations as Visio or other types of wireframes. A wireframe gives only indications about page layouts and is not a design guide at all. Especially when seeing wireframes in a browser window, a client might be thinking otherwise.
conclusion
A whitelabel css file is a smart bonus to convince your client, but it comes with its own set of dangers. Always make sure your client understands what he's seeing and what the limitations are of what he is seeing. On top of that, don't get cocky and think you can easily reuse standardized html and whitelabel css. In some cases this is possible, but these are only the exceptions to the rule.
If you can cover all that, it's a fun experience that will probably teach you a thing or two about html and css and it will leave you with a pretty neat library of standardized code. It's up to you whether you think it's worth the trouble.