Best Practices for Drupal Website Design

When designing a Drupal website, there are few things you can do during the design process to make your site more user-friendly and consistent while also saving you a ton of time and heartache. It’s important to keep in mind how the Drupal theme structure works and how you want to architect your content so that you can leverage best Drupal website design practices for make your site as efficient as possible. Drupal allows for a ton of flexibility when it comes to customizing how you want your website to look and while this can be great, it is also easier to get carried away with bad design habits that will ultimately hurt you in the end.

Read on for some tips that will help to make designing your Drupal site more efficient and effective.


1. Use careful planning and wireframing

When it comes to building a site in Drupal it is absolutely crucial to take the time for thorough planning and wireframing. Drupal is a powerful and highly flexible Content Management System (CMS) that allows you to present your content in just about any configuration you could imagine. Because of this, it is important that you nail down your content strategy and site architecture before you delve into designing pages. There's nothing worse than designing your website then having to go back to the drawing board because your content strategy was poorly planned.

With all the various regions, content types, blocks, and other elements that are going to be on each page you should have a solid plan of attack for keeping the site's aesthetics consistent. This process gets more difficult when accounting for all of the content to be output while needing to make the relationships between pages and their content intuitive to an end user. Using a grid while structuring your wires and compostions is a great way to keep your pages consistent and aligned. This will save you lots of trouble and frustation further down the line. 

In addition, the increasing demand for responsive web design calls for more concise planning to accommodate browser window breakpoints and different device screen sizes. Because of this, practicing mobile-first design when laying out your site is a great way to make sure your content is going to be displayed efficiently across devices of any size once your website goes live.


2. Design generic to specific

When you are designing elements that are going to be displayed on your site it is better to begin with generic items that are used consistently across the full website and work your way down to the more specific elements that only display on particular pages. The way in which Drupal sites are output, the most generic pieces of content are displayed and then more specific styles are applied to items with further specific class targeting. Making sure that all of your base styles are good to go before focusing on specific pieces of content will save you a ton of time and help you avoid agony later in the development cycle.

For example, focus your styling efforts on your most prominently used headers, buttons, and blocks before dedicating time to something that is going to only appear on a single page.

Make list of all your HTML elements/tags and style them in order of prominence. Some of the items you may want to design first include:

  • Generic content page
  • Generic block
  • Generic content list (view)
  • Expanding content, navigation, pagers
  • Expanding regions


3. Keep site speed in mind during design

Website speed is by far one of the most critical aspects of a successful website design. Even the most beautiful website will turn visitors away if it takes too long to load its pages. There are several things you can do, and keep in mind, during design in order to optimize your website's speed.

With the incredibly vast Drupal community of code contributors, there are countless cool modules available for downloading and leveraging on your website. Modules can be a huge help when you want a certain functionality to work on your site and accommodate a Drupal website design. However, rather than installing every cool module you can find online to implement on your site, stick with the ones that are going to be most helpful and impactful for your site. Having too many modules enabled can slow your website down and hurt the user experience (UX). During the design process, try to get a good idea of which modules and additional files you want to leverage in your design so you can account for them and not end up going overboard later on.

Some other things you can do to keep load times down is to optimize your images using JPEGs rather than PNGs (when you don't need a transparent background), to use sprite images so that less imagery needs to be loaded on the page, and to keep things simple whenever you have the choice. Special effects can be great on your website but when overdone they not only overwhelm the visitor but they also cause more load on the server - resulting in a slower site.


Here are a few addition resources to help you learn more about best practices for Drupal website design:


Here at Unleashed, our team of designers leverage best practices while designing and implementing Drupal site themes to ensure maximum ROI for our clients as well as an optimal experience for site visitors. Contact us today about how we can exercise our website design expertise to improve your website.