Recently, we worked with a graphic designer (arranged by the client) to provide
ID: 651570 • Letter: R
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
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.