One of our clients needed a redesign of their website. There are a few important lessons we’ve learned from dealing with external designers, and outsourced html/css implementation.

It starts with the designer creating a new Photoshop design for every page. She does so by clicking through the entire website.

When you have a large website, it’s very likely that not all elements are taken into account. Things to look out for:

• Pages that are missing temporarily. For example, when there are currently no vacancies available.
• Recurring elements should be repeated on every page. For us, it’s logical that e.g. a breadcrumb should be everywhere. For the one doing the html/css, it’s not.
• Are all error messages and notifications designed as well?
• Long words like Vaselinecetomacrogolcrème (yes it’s a real world example) may break up the site.

When all this is done, the psd files are sent to an external company to be transferred into html/css.

Now it gets interesting.

• You want to have haml and sass? It’s probably not going to happen. Hopefully this will change in the future.
• Make sure that elements that are repeated over multiple pages share similar code. Our first design had completely different css per template, resulting in a 6500 line css file. A typical line in that css file looked like:.T02 ul.pagingTop li, .T02 ul.pagingBottom li, .T03 ul.pagingTop li, .T03 ul.pagingBottom li, .T16 ul.pagingBottom li, .T19 ul.pagingBottom li {...}The .T?? numbers represent the template numbers. Needless to say, even a small change required more than a dozen changes all over the css file.
• The previous site used the prototype javascript library, the external guys preferred jQuery. Luckily, there’s a plugin called jrails.
• As usual, the creation of the pages takes much longer than expected. Make sure that they’ll send you new stuff as soon as something new is finished. While you’re waiting, make sure that you have something else to do (like writing a blog)
• Form buttons should be input type="button" instead of a href="#" You don’t want to write extra javascript to get your forms submitted, or redo the html/css of the buttons.
• Check the site in IE6. It’s a terrible, outdated browser but unfortunately lots of people still use it. For transparent png support, we use the DD_belatedPNG fix.
• If some minor elements are missing, rather implement them yourself than ask them to do it. It probably saves you both time and money.
• There’s the language barrier. The new design in the site is in Dutch, which they don’t speak. So ids and classes in css are in Dutch and often misspelled. For example; facturen (invoices) has singular factuur while they spelled as factur. This is actually a minor thing that should make you smile. It’s easily renamed afterward. We prefer to have css classes and id’s in English because we have English employees. Besides that, the site will be rolled out in multiple countries.

It’s quite crucial to have someone in house who understands html and css as well, since putting the new code in the templates and partials is never going to be a simple copy/paste job.