Simple Changes to Make Big Improvements to Your Drupal Website

UM-Flint’s Offices of University Relations and ITS are still developing a full-fledged, fully operational Web/Drupal/Content guide. Until that’s ready, you can get some broad, foundational content strategy basics via our first iteration (of many) of a Web Content Guide.

Some specific best practices have surfaced since the launch of the new, Drupal-powered umflint.edu on October 1. Reference this list of “good ways to do things” to help give our users a consistent, quality experience throughout the UM-Flint website:

Drupal Tips and Recommendations:

Use headings and rework content that does not currently use headings

Few things will enhance the readability and overall logic of your site like the correct and diligent use of headings. Here’s a brief overview of how you can begin making headway with headings.

Don’t use widgets or typographic structuring that is not suitable to the context of the content because you “like the way it looks.”

Structuring content in unsuitable ways to satisfy subjective aesthetics is like telling your content to lie to the audience. Examples of this practice:

• Putting a list into a blockquote because there’s a pretty blue box on it. There’s a quotation mark ornament in the upper left any time you use this feature. How does that fit in with the list? Is the list quoted from an external source?
• Putting anything that is not tabular data into a table. Menus, editorial images, adverts, etc., should not go into tables.
• The photo gallery is for archival images only. Please do not use it to create a faculty profile page or a product catalogue.

The following widgets were not structured to fit into the main body column. Using them there will create structural issues as your site scales down to mobile.

• Blurbs
• Testimonials (right column works best, as this example from Graduate Programs shows.)
• Info Sidebars

Put basic office location and department contact information on your homepage

One of the most commonly cited reasons for going to any department’s website is simply to find its location on campus. Make it easy for students, faculty, fellow staff, and others to find this basic info with a (righthand column) sidebar info block, like Graduate Programs’ homepage. It is also a good idea to make urls and email addresses live links within your info block. This can be especially handy for mobile users.

Favor quality, consistent photos over less-than-quality, inconsistent graphics

Show users who we really are and what this place really looks like. Don’t obscure the university behind some graphic interpretation of it. Keep it real! For example, a reusable media block featuring a photo of facilities workers and text explaining how housing residents can contact them would be better than a dated-looking graphic of a “can-do button” (sorry, housing!).

Main column images should be 600 pixels wide by 400 pixels tall (and less than 2MB)

No matter what size image you upload into Drupal, when you insert it into a page’s main column, it should be set at 600 pixels wide. To ensure all pictures used on the site look good on high-resolution displays, while ensuring page load times remain fast (esp. on mobile), it’s a good idea to compress original image files (such as those downloaded from MediaBin) using sites like JPEGmini and TinyPNG.

Default to using page layouts that have 3 columns (2-7-3)

Having a third column encourages units to actually develop and maintain sidebar content (such as testimonials). But even if you don’t have content for your third column, there’s a very strong reason to use the three-column layout anyway: readability. By shortening the line-length of the main column, we reduce the eyeball fatigue that occurs when one must read a long, long horizontal line of text. Experiment on yourself; you’ll notice a difference.

Use Drupal’s faculty/staff profile widget 

It seems every department has their own way of presenting faculty and/or staff profiles. But there is only one right way, and it just so happens to be easiest and best looking way to do it. Don’t recreate (busted) wheels. If you need more space than is allotted by the faculty/staff profile widget, use media blocks on a faculty/staff listing page that take the user to a page you’ve created to be devoted to that faculty member’s full bio, vitae, etc.

If you don’t have a page on your website that can be linked to, you are not ready to send that email/tweet

Your email to campus, your Facebook post, tweet, even your flyer with the contorted logo will be more effective if it contains a link to a webpage with relevant information that can be shared.

In conversation, when someone is interested in, say, the event you just mentioned, they say, “send me a link.” They never say, “forward that email with the attached jpeg flyer so I can download it and then open it to see when, where, and what it’s all about. I might print copies and mail them to all my friends who might also be interested in attending.” Not gonna happen. It makes being an audience member hard work—and an active, empowered advocate of your message/event nearly impossible.

Making and sharing webpages is about effective communication. It’s about conversation. It’s about consideration. It is not about web design, HTML, or “technical stuff.” If you can write an email, you can make a page in Drupal. Make the page! Share the link! Your audience will thank you.

_________________________

That’s all for now! Keep checking the University Relations blog and the evolving Web Content Guide for updates.