How To Create a Company Website Once and Properly?

During the creation of our Drupal Droopler distribution, we took into account several years of experience in building corporate websites. We noticed that one of the most important requirements for creating large websites is to use the "once and properly" principle. 

Once created, the software should be easy to use and update, and should not require major rebuilding to introduce new features. Here are some tips on how to create websites that we can share with you. They will be useful especially in the context of working with Drooper.

Do not take shortcuts

In programming single goal can often be achieved in many ways. Remember that the fastest and easiest way is not necessarily the recommended one. A good example are changes in the appearance of websites. 

Certainly, you have encountered poorly written CSSs containing "rattled off" code, without delving into the documentation and the existing structure of styles. The abuse of the important directive and the hiding of unnecessary elements using the display: none property is characteristic for such modifications. The prospect of making quick changes can cloud the right judgement to the point that the code lands in the wrong place. Inexperienced programmers often edit compiled files without even noticing the SCSS and JavaScript source files. The effects of such actions increase the cost of possible taking over the project by another team.

Another example of taking a shortcut is overwriting entire page templates to change individual parts. This can be often seen in the case of Drupal and the Twig files it uses. The selected page can be overwritten without any visible problems, but a wrong design decision can have far-reaching consequences.

To sum up: what are the disadvantages of quick solutions? They are cheap and effective in the short run, but they make it difficult to maintain and update the website in the long run. It is also difficult to hand over a code full of thoughtless modifications to other programmers.

Take care of details 

First, I would like to tell you about the broken windows theory. This is a sociology issue that describes a case where visible devastation in the environment may lead to the conclusion that there is no law. Prof. Philip Zimbardo conducted an experiment in which he abandoned two cars, one in a poor and one in a rich neighbourhood. The car left in a poor neighbourhood has been quickly destroyed, the car left in a rich neighbourhood has remained in a pristine condition. However, after its window has been deliberately broken, it has also been completely devastated with time. It seems that visible neglect triggers the loss of moral inhibition in man.

This theory can be applied directly to the work of a programmer. If he notices that changes in a given project are being introduced sloppily, he will not be motivated to write solid code. The metaphorical "broken windows" will cause the subsequent modifications to be no better than the previous ones.

This is why it is extremely important to take care of the smallest details. When developing software at Droptica, we check the code very carefully, and do not allow for even the slightest shortcomings; in this way, we encourage others not to leave their guard and to maintain the quality of their work at a high level. We recommend you adopt this approach. By paying attention to even small typos in the comments to the code, you will raise the bar for the whole team.

Attention to detail is directly linked to the previous point, i.e. not taking shortcuts. Work solidly. Since the beginning of the project, use versioning and check the code carefully. As Drupal and Droopler users, always use Composer and do not succumb to the temptation to download modules via ZIP files. Plan your actions and apply the modular approach, in which individual functionalities are separated from each other.

Use tools as intended

The need for flexibility when designing websites never decreases. We know from our experience that no editing solution can cover all possible applications. This usually leads to using the software in a way not fully consistent with the intentions of its creators.

Looking from the perspective of the creators of Droopler, we provide a dozen or so ready-made types of paragraphs (elements from which you can build a page) with our distribution. Sometimes it is necessary to obtain functionality that we did not foresee. For example, users paste scripts from other websites into the content of text boxes or change the colour scheme of paragraphs in a manner different from the official instructions.

Why is such an approach ineffective? When we release a new version of Droopler, we try to test the existing functionalities and ensure the continuity of websites' operation to all users. However, we are not able to check custom and unsupported uses. 

This note applies to virtually all software. When using tools contrary to their intended purpose, you have to reckon with the fact that in the future they will cease to operate in accordance with our assumptions.

Limit the number of tools used

Drupal is a system being developed by the community and based on external modules. Their great number means that one effect can often be achieved by completely different methods. For example, you can add content through an ordinary WYSIWYG editor, Paragraphs elements, and the Gutenberg project known from WordPress. Blocks on the page can be arranged in an advanced way through Layout Builder or Context modules. You can search for content using Views, the built-in Search or the external Search API.

All modules mentioned in the examples above can work in parallel and complement each other's functionalities. It should be borne in mind, however, that every subsequent solution used on the page complicates its configuration and negatively affects the performance. When starting the creation of a page, select the tools you want to use and stick to them all the time. In the case of Droopler, some methods of operation (such as adding content via Paragraphs) are predetermined by the distribution's architecture.

Maintain the visual consistency

Maintaining visual order is very important for every website. This is not just about ensuring the right look, however. The method of introducing modifications is equally important. A website being displayed absolutely correctly for an external user may also contain serious design defects.

In the case of Droopler, before making changes to SCSS, we recommend reviewing the documentation contained in the official repository. It is going to take a while but will greatly speed up your work. We have prepared an SCSS architecture in which the variables are arranged in a kind of a dependence pyramid. The use of variables at the top of the pyramid affects all variables below, but it is also possible to block such "succession" of values and overwriting every element. It is an extremely flexible and effective approach that allows you to change the entire colour scheme of a page in just a few minutes.

If you introduce modifications outside of the described system, you will not be able to take advantage of our architecture – your code will become more difficult to update and less understandable.

Summary

The "once and properly" principle has four advantages that are extremely important from a business point of view:

• Making the updates easier – you can be sure that you are ready to install future versions of the software and thus – are able to quickly respond to any critical patches being released.
• Ability to take over the project – if you need to change the development team or contractor – it can be done without the need for painstaking code analyses.
• Securing the application – introducing changes in the recommended way and avoiding solving problems sloppily leads straight to a higher level of security.
• Saving time for the future – it should be kept in mind that a quickly written code and hastily taken design decisions sooner or later begin to generate serious costs (e.g. refactoring and updating).