5 Tips on Designing for Drupal (or Another CMS)

Many large or complex websites utilize a content management system of some sort to house, display, and maintain all of its content (at Rapid Development Group, we favor Drupal, but there are many others to choose from). When designing for the web, it’s important to consider how a CMS works in order to make more informed decisions about how content is presented. Thinking about this early on can help speed up development and reduce the cost of building your content-managed website.

Identify page regions and how they interact with one another

Although this tip is pretty straight forward, it can sometimes be easily overlooked. Are there regions of your site that are consistent throughout the site? How about regions that change depending on which page you’re on? It’s good to express these similarities and differences in your designs so that your development team can create templates to match.

Common page regions include:

• Header
• Navigation Bar
• Content Area
• Sidebar
• Footer

Identify content types and all view modes for each

This is super helpful, because it gives your development team a clear idea of all of the page types, listings, and other functionality that they will need to build. Designing, or at least wireframing, each of these content types and view modes early on will save the developer a lot of time and energy later on in the development process. 

Some common content types and view modes might include:

Content Type: Basic Page 
View Modes: Full page

Content Type: News Story 
View Modes: Full page, teaser, featured

Content Type: Blog Post
View Modes: Full page, teaser, featured

Stay consistent

Now that you’ve identified your content types and view modes, make sure that the design for each stays consistent throughout your mockups. Changing the way your content displays arbitrarily can create lot of extra work for you developer and, ultimately, a higher cost for you (or your client).

For example, if you have a “Recent News” block that displays in the sidebar, make sure that the same fields are displayed in the same order and configuration on each page that it appears.

Not only does this make life easier for your developers, but it is also a good practice in general to increase usability of your website.

Identify content relationships

One of the most frustrating things that a developer can come across is a design that implies content relationships with no clues as to what those relationships actually are. A common example of this is a “Related Posts” block that displays different content depending on the page it’s on. This raises many questions, including:

• How are these posts related to the page?
• Does a content editor manually curate the posts on this page, or should it be automatic?
• If it’s automatic, how will the site know what posts to show?
• Is there a tagging system involved? If so, is the list of tags defined, or are tags added organically?

Make sure you include answers to these questions when designing related content. Your developer will thank you for it!

Identify any third party services that you’d like to include

Got a Google calendar that you’d like to pull information from and display on your site? How about a feed of YouTube videos? Depending on the type or the level of integration required, using third party services in your project can increase development time and effort.

For example, a simple embedded iframe requires very little effort, whereas importing information from a feed, arranging it, styling it to match the rest of your site is a lot more difficult and requires more effort to accomplish.

Make sure to tell your development team if your project requires any of these integrations so they can include that time and effort into their development estimate.