Skip to main content

CSS design guidelines for offshore outsourcers


My struggle with outsourcing of design continues.  A couple of weeks ago I told all of you guys about the issues I was having with getting offshore designers.  Some of you told me that I should cut my losses and just find someone in San Francisco who can meet with me and bang out a design in a day.  I figured that I am going to keep working through it because I already had too much vested interest with these fellas. On top of it I am also using Elance Escrow so I already have a deposit that I can’t easily get back.

These guys finally came up with an acceptable design and now it’s time to actually slice it and put it into CSS.  I can already tell that it’s probably going to be amateur and crappy so I figured I’m going to save a few round trips by writing up some guidelines.


I am not a full time web designer, however I’ve been managing engineering teams for close to ten years now so I think that general engineering principles and some basic SEO understanding can be helpful.

Here are the rules I came up with and found on the web:

1) All the text besides the logos should be in text - no text via images.
2) No styles in the HTML files - all styles should be in CSS.  Search for font, color, and alignment; make sure there is nothing like that anywhere besides CSS.  If there is a need leave a comment behind for why that was necessary.  Having those elements without a good reason will result in your work getting rejected.
3) All the logical elements should be together - font information together, height width together within the individual style instructions.
4) Add comments to sections explaining the logical grouping
5) All the values should align for readability using tabs.  For example

.smallBox {
height: 100px;
width: 200px;
background: white;


font-family: tahoma;
font-size: large;
}


6) Do not use tables - just DIVs.  If you had to use a table leave a comment for why it was necessary.
7) Most if not all of the DIVs should have corresponding classes.  If you can't think of a class for the div, then you probably shouldn't have a div for it.
8) Combine elements if they are totally duplicate styles for example:

h2, h3 {
color: blue;
}

9) Test CSS instructions on IE 8+, FireFox 3.5+ , Chrome and Safari 4+, style and XHTML validators.


Of course I tried to leverage as many things on the web as I could.  A lot of these rules are borrowed from the following sources:
http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html
http://wiki.songbirdnest.com/Developer/Articles/Style_Manual/CSS_Guidelines
http://groups.drupal.org/node/6355
http://ngocthuytran.wordpress.com/2011/04/05/30-css-best-practices-for-beginners/

Did I miss anything?  Feedback is welcome.  Post comments here or find me on twitter @mikebz

Post a Comment

Popular posts from this blog

Lessons from my 9 Year Journey with DocuSign

After over 9 years at DocuSign I am taking on a new challenge.  It’s been phenomenal seeing the
company grow from from 25 to 2000 employees.  DocuSign has changed the way the people do business and I am proud of it.  The next chapter is going to be heading up software development at Tempo Automation - a 25 person startup that is changing the way people produce electronics.  While I am extremely excited about the future, this is a good time to reflect on my journey and share the things that contributed to the success and things that I will do differently next time around.
1: Focus on the Customer One of the key things that contributed to the success of DocuSign and my personal career is relentless focus on the customer success.  From the very beginning our CTO has taken meetings, listened and prioritized requests and feedback coming from customers.  People who could not be bothered by customer requests didn’t last long.  As a result over time our engineering team retained and reward…

Highly Effective Software Teams

A few weeks ago our Board of Directors asked me to present my assessment of the state of software.
 I was hired to organize and grow the software team and the directors wanted to know what kind of a team we needed to build.  I was hoping that I can just reference an article somewhere that would give me the answer, unfortunately I didn’t find anything suitable. During my research I did find some great material that will be helpful if your job is to put together a highly effective software team.
A highly effective software team has the following key characteristics: dependable, committed to shared goals, passionate about technology, respectful and compassionate.  These are not limited to technology industry, it can easily apply to finance, medicine, or sports as well.  Below is the summary and references that I found. Dependable If you are creating a software product, you need to deliver your software to your users.  Your users need to know that you are able to solve their problems on …

SDET / QA Engineer Interview Checklist

After interviewing and hiring hundreds of engineers over the past 12+  years I have come up with a few checklists.  I wanted to share one of those with you so you could conduct comprehensive interviews of QA Engineers for your team.

I use this checklist when I review incoming resumes and during the interview.  It keeps me from missing areas that ensure a good team and technology fit.  I hope you make good use of them.  If you think there are good questions or topics that I have missed - get in touch with me!


SDE/T or QA Engineer interview checklist from Mike Borozdin
If you like this checklist you might want to check out these posts:
Emotional Intelligence in Software Teams  and Good-bye manual tester, hello crowdsourcing!