Reklektik is a team of interior designers who continuously seek creative yet liveable solutions for interiors, whether it’s designing apartments for couples or an office for web developers. We began to work with them when we bought our new office space, which needed to be completely redone. After a successful and exciting renovation, they entrusted us with the development of their new website.
Why did we choose Drupal?
The were two main reasons why Drupal, and specifically Drupal 8, was chosen. One was Drupal’s strength in content management, the other was its multilingual capabilities.
The admin interface of Drupal 8 is easy to use on any kind of device. We find it much easier to manage - create, translate, publish - content on Drupal 8 for content editors. The platform also provides flexible, content and media rich presentation at minimal technical cost to the content creators.
Our task was to create a multilingual site, in English and Hungarian. Drupal 8 core contains every feature necessary to shipping a multilingual product, including content, interface and configuration translation as well. In Drupal 8, there is a default feature which recognizes how to translate content, tags or menu items, even for new users.
When we started the project, there was satisfying coverage of the necessary functionality by core and contributed modules. Drupal has well-known, excellent community support, and it’s worth mentioning that the status of the Hungarian interface translation is always in excellent shape.
Long story short, we found that Drupal 8 perfectly fit what we needed for the MVP, and because of its strong, growing community, we are able to count on long-term support as well.
When a user first arrives at the website, the goal is obvious - to show the world why and how this interior designer studio stands out from the crowd. The large, colorful images and the reference pages that never use the same colors twice ensure visitors will never be bored, and will want to see more of the team’s excellent work.
Our main goal was to have a multilingual website. The client needed the ability to translate content, menu links, block content, and so on. The goal was to be able to translate the same content to various languages - in our case English and Hungarian.
SEO — meta tags
Using social media as a marketing tool is necessary for almost all websites now, so it’s important to give site administrators the ability to control the way content appears when it's shared on social media. Reklektik was no different, so we provided them with meta tag support.
When we start planning a website’s layout, responsiveness is always a topic that must be discussed. In this case, it was obvious that the new Reklektik website must correctly display on tablets and mobile devices, in addition desktops. It was a fun challenge for us because this is a portfolio site, and it is crucial to show content, both text and images, perfectly on all kinds of devices.
Shipping as fast as possible
The client wanted the site to be launched by the end of August 2016, and there was a specific - and wonderful - reason behind this deadline.
In September 2016, Reklektik participated in the Design Week Budapest event, in which the newly renovated, 500 sqm Cheppers office opened its doors to the public with a guided tour. The website was a way to support this event, so we aimed to launch it a few weeks before. The project began in early May 2016 with a UX & UI design phase.
We had some requirements...
Content-specific colors and decorations
Content editors should be able to customize primary page colors of each reference page and use content-specific decorator images for separating content and textual sections.
Modular content – reusable element sets
It was necessary that content could be built from a set of predefined “content elements,” which were as flexible as possible. Some of these elements are general and used in more than one content type, others are content-specific. For example adding text blocks, images and varying the order in which they appear.
We wanted to provide a simple, easy-to-follow frontend for site visitors by the help of a clean structure, strategy and Drupal theme. We also wanted to keep the editorial interface as simple as possible, to make sure it’s easy to use for editors who are not very experienced with content managment systems.
Since we knew that the content of the site would contain a lot of images, we were determined to build a media management feature to help content editors manage and categorize all the images they would use.
And the result...
The client wanted the main colors of a reference page to be customizable for each piece of content. We solved this by providing the possibility to define color as a field value in the content.
This color is used as a primary color, which means that links and specific elements also use this defined color.
Background color is calculated from that color’s lightness by default, to ensure the best contrast for the text. It could remain the original or become white. However, the color of the background could be also set implicitly to “dark” or “light”.
To make the look and feel of the reference work stand out, we implemented custom decorations that can be added to the text. Horizontal elements act as a content separator, while the vertical ones are purely decorative.
These decorators can be used as standalone content blocks or as part of the text. Decorators can be inserted into, and removed from text with the corresponding WYSIWYG editor button.
The site offers predefined content modules, which can be used to build a piece of content. A piece of content can have many types of these sections at the same time, and they’re easily arranged by the content editor.
There are simpler modules which provide only a single field (e.g. a text with WYSIWYG editor) or an “image row” and there are complex ones as well, which maintain layouting as well – for example “two columned content”.
Having an easy-to-handle user interface was extremely important, as the website is very interesting in the way it’s built, and editors have a huge role in that.
To let content editors easily identify content sections, even on the admin interface, we heavily relied on the preview option of the Paragraphs form widget. We also organized content properties into form groups based on their role. For example, the main (default) group, “Content”, contains properties which represent the node’s page. We also defined “Media” and “Meta” groups, and at references there is an additional “Appearance” group, which holds the color related and decorative elements. These groups are accessible by horizontal tabs.
For the administration theme, we chose the Adminimal Theme, because we felt that it improves on the default core interface by saving space and providing slightly more eye-pleasing aesthetics overall.
We chose the Media module to store our media assets. Although we currently only use the Image provider, the Media module is designed to be easily extendable and has a lot of provider modules for different media types.
Images can be added to content with an entity browser modal. Editors can easily select media from the library, if it is already available, or upload new media with the help of the Dropzone extension.
Modules we used
Content Translation (in core)
Although this is a core module, we can call it key module in this project. As mentioned above, this module was the main reason Drupal 8 was chosen. Content translation is easy to configure and easy to use with this module.
To provide the necessary reusable content elements (image-only rows, two-columned sections) we decided to use the Paragraphs module.
Paragraphs has supported content translation in Drupal 8 since the end of 2015 and provides a preview option at its form widget, which allows us to keep the editorial pages as simple as possible. Editors can easily modify and sort the content elements.
Using paragraph bundles results in well-structured content in the end. It also helps break frontend modules into smaller pieces, which helps the front end development and maintenance.
With the help of Media module we were able to provide nice media management for the site. Even if we only use one provider (Media Image), we think that we made a good decision: the project can now be extended with more types of media later, if needed.
To create the media browser we used the Entity Browser module and used Dropzone JS as the file upload widget.
The Field Group module was the key module for simplifying the editorial UI of the site. Using horizontal tabs on the edit forms, we were able to keep content editing simple and self-evident. We used Field Groups to provide the necessary markup for the front end as well.
“Must-have” extensions we’ve used in this project
There are some modules which we use often and are really useful, but are just a step down from “key” modules. Although they can’t be called “key” modules, and only add seemingly minor enhancements to the product, we believe the enhancements they provide are really useful. They elevate the usability of the site to a higher level and extend the user experience. Thank you to - and for - them!
- Adminimal (theme and toolbar)
- Contact Storage
- Dropzone and Dropzone JS
- Editor Advanced Link
- Menu Link Attributes
- Menu Trail Active Path
- Simple XML Sitemap
Community contributions we made
There were quite a lot of issues in the d.org issue queue we made some contribution to, here's our list:
Page title gets too strong AND too general selector, Report + initial fix (trivial)
Google AdWords Conversion Tracking (unused)
Missing getEditableConfigNames() method in GoogleAdwordsAdminSettings.php, Report + fix (trivial)
Typo in Field Group Formatter Plugin HtmlElement::prerender, Report + fix (trivial)
Can't preview a new node, Initial fix (trivial)
Menu Trail By Path
CurrentPathHelper assumes that path components are internal urls, Report + contribution
"Array to string conversion in Drupal" in Forum, Comment