As is often the case, the task of creating or redesigning a website is broken into logical tasks and distributed among a team comprised of people coming from very different backgrounds and possessing very different skillsets. In this article we examine some of the issues and considerations that can help and hinder collaboration between the designer and the developer.

In this article we are examining what designers can do to make life easier for both themselves and the people they hand their mockups over to.

The Web Designer to CSS Coder Handoff

Communication

As will be apparent throughout this article, communication is at the root of most problems and also of most solutions.

Grid / Alignment

I recommend designers work with grids and designing layouts to pixel perfection and making sure that column widths are consistent and thought out before pushed into production; it is unrealistic for the coded to go back and recalculate widths and heights and make the needed alterations to the design after the fact. There are methods for addressing browser incompatibilities and competent coders should be able to ensure your design displays consistently between browsers. There are a lot of good resources for using the grid in web design.

Organization

Make sure to organize your Photoshop layers. It’s best to do as you go but not everyone can get into this habit (author included). The bottom line is if anyone might need to open your .psd for any reason in the present or future the saved file should be organized. This practice is crucial if you’re handing off your .psd to someone else to slice but is a good practice for maintaining source files you can include on source disks for the client at the project’s competition.

Fonts

Make sure to communicate on the appropriate use of non-standard fonts. Depending on your emphasis on accessibility, search engine optimization, and familiarity with image replacement techniques you will have different approaches to when it’s acceptable to use a non-standard font. Regardless, your organizations philosophy on the subject should be in the open.

Gradients

Some types of gradients designers seems to use can be problematic and result in the need for overly complicated solutions in the code. One example is when you have a graduate going say left to right overlaying or masking another graduate going up and down. Though you can use png transparency or in some circumstances large images to accomplish the effect, the effort is usually not worth it and often results in extra, non-semantic code.

Expertise and Project Cost

Just because it’s possible to pretty much accomplish anything you can think of using CSS doesn’t mean that you or your coder can. Understand the level of expertise of your coder and also understand that highly intricate and complex CSS can be time-consuming, keep an eye on your schedule and budget when designing.

Design for Web

The last point is the most important; know your medium! Web is not print and it is crucial to understand the medium and what makes it unique. Keep in mind the following points that many designers struggle with:

• Just because your 900x800 canvas in Photoshop has definite borders doesn’t mean you don’t have to think about what lays beyond them. Think through what would happen if you were to expand your canvas to 1100x1000, and always design the footer of the site.
• The home page isn’t the web site. A web design doesn’t consist of an amazing home page graphic. If the sub-page layouts haven’t been designed prior to working on the design make sure to take them into account in your designs.
• The design should serve the message. Make sure you understand what information and content will be on the site before boxing people down the line into a corner.