Drupal theme: html or psd mockups?

Drupal theme: html or psd mockups?

Our clients are frequently asking one logical question: “What is a better basis to theme Drupal website: out-of-box html-theme or designers’ psd-mockups?”. Our brief answer is: “HTML is better if its quality is sufficient”. Stay tuned and see our detailed answer though, the devil is in details :)

So let’s assume that html-theme is a full-interactive website projection which provides us with an ability to click each and every element to see how it works. By such theme ‘sufficient quality’ we imply:

  • responsiveness;
  • multi browser support;
  • various visual effects.

Speaking about a high-quality psd-mockups we imply that we have separate image-files for every portal page, not only a homepage. Thus, let’s assume that we have two different elements (html-theme and PSD mockups) for the same portal of the equally high quality.

When receiving PSD mock-ups, the developer sees only a visual picture. But he still has to guess and make assumptions on many small details. With html-theme he may make 20 clicks per minute and see himself all the nuances:

  • site behavior under different display resolutions (responsiveness); 
  • special elements' behavior: modal windows, slideshows, etc.;
  • other effects like hovers, mouseovers, interactivity, etc.

Thus, the main advantage is that web developer does not spend a lot of his time by guessing how the element should work or get this information from manager/designer/product owner. Thus, he is released from the following routine:

  • think about this or that elements' behavior - everything is understandable from HTML and can be adjusted to the website;
  • ‘what-you-see-is-what-you-get’ principle: product owner and developer see the same things. Thus, finally there will be no ‘what-is-this-I-thought-it-will-look-different’ situations :)
  • Drupal-theme implementation will take less resources, from 10% to 70% of development budget (this percentage depends on many factors: design complexity, mock-up quality and its compliance with Drupal structure);
  • photoshop and other third-party software skills are not obligatory;
  • website support is much easier because all visual changes can be first tested in static HTML, not in Drupal theme PHP files. Only after everything is tested the final decision is implemented on the website. 

Nonetheless, one should not stick to a very popular myth that html-theme releases Drupal-developer from all complexities: he simply needs to ‘copy something and to paste it somewhere and voilà - it’s alive!’. Unfortunately, currently things are different. So let’s forget about this myth and stick to the reality. To show what really needs to be done, let’s take our project homepage as an example:

регионы друпал страницы

This image enumerates the respective Drupal-theme files where html-markup should be transferred. Thus, html-markup needs to be sliced and transferred to dozens of files. Add to this the fact that first of all the actual php-code with all its variables and so on should be combined with html-markup as well. Then the final result should be tested and bug-fixed…

And the final claim - in the end, it turns out that Drupal theming on the basis of either html-theme or PSD mock-ups is almost equally time-consuming. Here is a comparison:

But from a real experience view in most cases html-theme based development is easier. 

Summing up, we may say that if you have a possibility to work with html-theme it will be a good solution. It provides client and developer mutual understanding of what is going on and prevents conflicts of ‘how-it-should-have-worked’ type. 

6 votes, Rating: 5

Read also


Often one can see such charges against Drupal: “It is impossible to build a high-load website using this framework”. We will refute this myth on...


One of the main issues after making decision to launch a website is development platform - CMS or custom coding? Let's elucidate Drupal framework advantages.


Very often a lot of developers face the issue of flexible materials sorting on the site. One of the solutions to solve this issue is Radioactivity module. Learn more about this tool.


Previously we presented top of SEO modules recommended for website SEO optimization. Now learn about additional but certainly...


We use "Git Flow" repository operations model quite often in our work. Let’s consider the scheme in detail.

Subscribe to our blog updates