Categories

Drupal theme: html or psd mockups?

07.05.2014
Author:

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 mockups 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 behaviour under different display resolutions (responsiveness); 

- special elements behaviour: modal windows, slideshows, etc;

- other effects like hovers, mouseovers, interactivity, etc.

Thus the main advantage is that developer does not spend 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 behaviour - 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, mockup 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 globein.com 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 basis of either html-theme or psd mockups 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. 

5 votes, Rating: 5

Read also

1

One can easily be lost in the variety of Drupal themes. Find out information about the best and the most significant of them.

2

It’s not a secret that the most important page of any website is a landing page. How to create a good landing page for your portal - this is the topic of this blog.

3

SASS - is a meta-language based on CSS, intended to increase the level of CSS code abstraction and Cascading Style Sheets files simplification. 

 ...

4

When attending an internet-shop any experienced internet user can easily figure out what he's dealing with – cheap box decision or professional shop with deep development.

The purpose of the...

5

For deleting unnecessary bytes from image files Smush.it uses image optimization...

Subscribe to our blog updates