Creating an Effective Web Development Workflow

Written by Ethan Gardner Web Design

As a freelance web developer, offering slicing and coding is a great way to enhance the range of services provided to clients, network with other web designers, and provide a reliable source of work. While I am a web designer in my own right, I recently have been doing a lot of slicing of website comps and front-end code, including work for other web designers and creative firms. Through my experience developing my own sites and working with other web designers, I have developed a workflow that makes this process more efficient for the front-end developer, web designer, and the client.

Web Development Workflow

Understand the Design

Get to know the design and how it meets the technical requirements set by the project team at the beginning of the initial website planning. If you did not design the site personally, it is especially important to be thorough in order to gain an understanding of the site design.

Ask questions on the specifics of the design if something is unclear. Is the large image the web designer put in the design comp supposed to be a static image or is it intended to be a flash component? Are there any specifics about the design in regards to the navigation or widgets such as site search or calendars? Taking the time to do a little research at this stage can save a lot of reworking later on in the site build.

Plan the Code & Site Structure

The easiest way for me to work is plain old pencil and graph paper. While I am not an engineer, using graph paper helps me gain insight on how to design the site grid and other dimensions that may not be apparent from the design comp.

I use the semantic naming conventions for all regions of the page for every site and label the elements on the graph paper to help me visualize the structure of the site markup.

Slice the Design

After the planning is complete, I open Photoshop and begin to make slices for the individual elements of the site design. In order to minimize the amount of time spent changing layer visibility, I create a layer comp (Window > Layer Comps) for the approved design to be used as reference and another for the basic elements which is the foundation for slicing. Images are optimized for web and given descriptive names.

Screenshot of Layer Comps Window from Adobe Photoshop

Assemble the Site

This step is where the planning pays dividends. Code is assembled using the graph paper drawing completed in the "Plan the Code & Site Structure" step. The same classes and IDs on all projects for the sake of expediency. In order to troubleshoot the layout or design the grid, I use a number of browser extensions and bookmarklets. My essential developer tools include:

As the code is being created, the is checked site in Firefox and IE7. As the site nears completion, the site is then evaluated with other browsers such as IE6, Opera, and Safari and any browser specific issues are resolved. The site is tested on a staging server, turned over to the client to review, and uploaded to a production environment once the client has approved the finished website.

Routines such as this one allow for rapid development through repetition and a formulaic approach to turning conceptual design into working websites. Developing a regular workflow, or hiring a developer who follows one, can help you stay on track. Give it a try on your next web development project.