Recently, we worked with a graphic designer (arranged by the client) to provide

Question

Recently, we worked with a graphic designer (arranged by the client) to provide the skin for a Django+Bootstrap application we had built. The designer provided a series of static images of the new layout, along with a document describing some technical attributes (font sizes, colours, a few dimensions etc).

It turned out to be incredibly time consuming to implement this. Although the whole site was basically a front page, an index page, and half a dozen detail pages, I spent at least 5 days just implementing the CSS and HTML changes. So I'll go out on a limb and call this The Wrong Way.

My basic approach was:

Compare the static image and current rendering, and notice a difference.

Guess what change would be need in the CSS/HTML

Make that change

Go to step 1.

Some of the particular issues were me not understanding that the design included a change from 8 columns to 12, some images provided in the wrong format (.png's can render differently on different browser/platform combinations), hassles trying to undo Bootstrap's styling, the usual CSS wrestling to achieve pixel perfect rendering etc. And occasionally I had to reorganise the HTML templates to get a certain behaviour.

What's the right way?

Explanation / Answer

In my company, there are a few people specialized in this job.

They are designers. And they know HTML. They can be a bridge between the designers and the front-end engineers; which they usually are. This way, we just have to integrate their HTML.

This is a hard job. There's a reason sites like "PSD to HTML in 24h" work well. The solution in our company is to have people specialized in doing this. For us, working with the HTML is a breeze.

There's no silver bullet.

Related Questions

Navigate

• Browse (All)
• Browse R
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.