EIT Avionics produces devices for aircraft to increase safety and situational awareness. They needed a new site to showcase their products and introduce their company, and they wanted to be able to edit the site themselves. We built the site with Drupal 8 and a custom responsive Drupal theme.

Why Drupal was chosen: 

The client needed a simple site to start off with, showcasing just three products for now. However, knowing this client and having undergone some discovery, we realized they could be adding more products in the future, and that there would be a need to build out a more involved products section later on.

We chose Drupal 8 because we wanted to start the site off with just the bare essentials for what the client needs at this time, knowing that we can add more content types, fields, and backend functionality as the client's needs grow in the future. We had considered alternative CMSes but we find the lack of real content types / fields to be an issue there even though there are ways of sort of achieving that in those CMSes.

The client already has another site built with Drupal (7) which we also built and maintain. The client familiarity with Drupal was another important factor in Drupal's favor. It meant their staff had no reticence about the editing process being hugely different. We did need to train them a bit just to orient them to the fantastic new Drupal 8 admin interface, but they got the hang of this very quickly. We think the new admin UI is one of the best things to come out of Drupal 8; it looks like it will greatly reduce the pain of training or re-training clients.

Describe the project (goals, requirements and outcome): 

Overall Goals

The client is EIT Avionics, LLC, a new business entity formed by the founder of EIT, LLC, an electronics manufacturer based in Virginia. EIT Avionics produces avionics devices and electronics, and needed a separate, distinct site for marketing and legal purposes. The initial goal for the site was simply to showcase the product offering and provide the client with a way to promote news and upcoming events.

A secondary goal for the client was for the editing process to remain mostly unchanged from what they had been accustomed to in Drupal 7.

Building the site.

Mobile home pageOur customer required a brand-new responsive site showcasing three products, and the first step of this process was deciding on a CMS platform to use. Drupal was an obvious choice since the client was already familiar with it, but we were not content just picking Drupal because it's the obvious choice. We considered alternatives first, but concluded Drupal 8 was a stronger option because of its content types, fields, Views, and built-in web services support. We knew we were starting off with a small site, but small sites grow, and we wanted a platform that could grow with the site's needs over a matter of years. Drupal offers a greater breadth of modular tools than other CMSes that we also work with, and allows the site to grow in an organic way, as new functionality requirements arise.

We started with some mockups. Once those were approved we set up a Drupal 8 development site. This allowed us to get familiar with the new configuration changes, such as the use of YAML files everywhere, the multiple config files used in sites/default, the way modules get installed/uninstalled, field config problems, how blazing-fast the Drupal 8 UI is, etc. Those took some getting used to. Since documentation was not yet all there for Drupal 8, we consulted the Drupal.org forums and other Drupalers' blogs. We did run into field config issues from time to time, which slowed us down some. For example, sometimes a field would insist on enforcing some text length or text filter requirement, even though the settings seemed alright. We solved these problems by re-creating the fields in question, and applying some patches here and there. We knew going in that this would be part of the process, since it was beta6.

Theming was really different when compared to Drupal 7, and took some getting used to. One of the first things we has to get used to was to place our theme within the /themes folder, rather than in /sites/all/themes. Aside from that, the Drupal 8 theming uses Twig - a very good change, but a big change indeed. Lastly, the use of YAML files took some getting used to, in terms of knowing what to put where, exactly. We figured that out by consulting Drupal.org forums and issue queues.

We had also wanted to build our own custom theme or possibly create a sub-theme. In Drupal 7 we often use Zen, Bootstrap, and Omega, but we also often build fully custom themes. Because we started this project during beta6, we were concerned there could be changes to the theming layer of D8 by the time 8 got released, so we decided to create a sub-theme of Stark, which ships as part of Drupal 8. We figured this way we could be assured that whatever we built theme-wise could be assured of working on the site in the long run. The Stark theme is pretty basic, but the site layout is also pretty basic, so that was OK. We built a responsive theme, using SASS as we usually do. The admin area itself is also fully responsive, thanks to Drupal 8 being mobile-first. This was a very cool feature that we knew the client would appreciate. We did not modify the admin UI at all, as there was no reason to.

The end result was a working Drupal 8 installation with a responsive theme, which could showcase their products.

Site features & functionality.

We (and the client too) were concerned about Drupal 8 being so new, mainly due to the small number of modules that supported 8 at the time. However, we quickly determined that we did not need anything other than Views, which thankfully ships with 8 already. We also realized (and explained to the client) that by the time they would be ready for new functionality that might require additional modules, many popular modules would already be compatible with Drupal 8. Fortunately, Drupal 8 was easy to use and had out-of-the-box functionality that we needed, such as:

Responsive design.

The Drupal 8 admin UI is already responsive out of the box, and we built the public theme as a sub-theme of Stark, and did our own CSS work using SASS.

Space to grow.

Using Views (baked into Drupal 8 core), we built a home page and Products page showcasing their three products in a responsive way. This meant a Product content type, plus one home page view and one Products page view. We set up a home page node and a separate products page, each containing a view. We created three product nodes for their three products. This way the client can edit the products and have them change in both places at once. As a result, the home page and Products page now show their products, and the client can edit these themselves without having to actually edit two pages.

Home page product slideshow.

The client expected a home page slideshow that showcased some of their products. In Drupal 7, we often relied on Views Slideshow, but this was not yet available for Drupal 8 and there were no alternatives available yet either. We got around this with ease by creating a simple Unformatted List view, and then wrote our own jQuery Cycle JavaScript implementation to turn it into a slideshow. This was sufficient for this use case, and if we ever needed to revisit this, we figured we could do so once Drupal 8 was more mature. The end result was that the site has a working, good-looking responsive slideshow. An additional advantage to the way we built it is that it allowed us complete control over settings such as transition effects, slide timing, and so on. This helped when it come to revisions, which we were able to quickly accommodate.

Contact form.

Once we were sure the home page slideshow and products view were working, we set up the contact form. We normally use Webform for this, but that was not available for D8 yet. Drupal 8 does come with basic contact form functionality built-in though, and we used this to create the contact form. This was sufficient for the client's needs, for the time being anyway. Eventually they might need or want some of the features Webform offers, and we can switch to Webform if that comes up.

Intuitive editing process.

The client was already familiar with using Drupal 7, so the editing process had to be similar to Drupal 7 or at least as easy. Using the admin UI that comes with Drupal 8 (with zero modifications), the client can edit with ease, without having to rely on duplicating content. The UI is uncluttered, and noticeably faster than Drupal 7's. There were still one or two small issues with certain types of fields not correctly enforcing certain field settings, but these were minor and would be ironed out in the long run once Drupal 8 was released. After initially giving the client access to the backend a few weeks before launch, the client reported back to us that the editing workflow was very intuitive and faster than on their previous Drupal site.

Conclusion:

The site has helped EIT Avionics in promoting their new products, for example at avionics trade shows, since the site is essentially a simple 'brochure' site. The simplicity and speed of the Drupal 8 editing workflow / UI has been really great, and gives certain other CMSes a run for their money.

Technical specifications

Drupal version: 
Drupal 8.x
Key modules/theme/distribution used: 
Why these modules/theme/distribution were chosen: 

Views is fantastic for creating lists of things, so it's great to see it part of Drupal 8 core. We used it to build the front page and product page's displays of products, so that when the client adds products in the future, it will be relatively painless and easy.

We did not use any additional modules, so this site uses only Drupal 8 core, plus a custom theme.

Organizations involved: 
Team members: 
Project team: 

Casper Voogt put the D8 code and config in place and ran through wireframes, mockups, and initial theme creation and theming.
Jesse Voogt helped fine-tune some JavaScript and responsive CSS issues.

Product list page
News page
individual product page
Sectors: 
Manufacturing and Energy
Technology