All UM-Flint Drupal widgets were designed for the following, specific uses. Everything you need to achieve within Drupal can and should be done by using these widgets properly. By adhering to these guidelines, you help ensure a consistent, quality user experience throughout the UM-Flint website—regardless of the device used.

Left Sidebar Only:

Menu

Your department website navigation (a.k.a. menu) is the ONLY widget that should appear your left sidebar.

Quick Menu/Navigation Tips:

• The fewer the number of items in your navigation, the better
• Avoid naming your department homepage “Home.” Use department name.
• Avoid acronyms and jargon (use the term users would be looking for)
• Avoid lengthy navigation (page) names.

Right Sidebar Only:

These widgets should ONLY be used in your right sidebar.

Blurbs

Quick Blurb Tips:

• Designed for short, quick statements
• Icons suggest the type of content appropriate for a blurb
• Should support other content on the page
• Use sparingly

Info Sidebars

Quick Info Sidebar Tips:

• Similar to blurbs in that they are designed for shorter statements
• Cleaner and more professional than blurbs
• Good for contact info, short lists (next steps), a series of buttons, etc.
• Can be made “reusable” within the same department site (not across sites)
• If content links to another page, consider a media block instead

Testimonials

Quick Testimonial Tips:

• Designed to be a direct quote attributed to the individual depicted
• Use a quality, professional photograph (ideal image size = 360 pixels x 360 pixels)
• Keep quote length short and digestible
• If linking to a more in-depth profile, use a media block instead

Main (Center) Column Only:

These widgets should ONLY be used in your main/center column.

Text Block

Quick Text Block Tips:

• Other than for the creation of buttons, text blocks should NOT be used in sidebars.
• For main column text blocks, be sure to use proper heading structures to enhance readability, search engine optimization, and accessibility for individuals who use screen-readers.
• Text blocks are also the best way to add images to a page (via the WYSIWYG editor). Ideal image size for main columns is 600 pixels wide x 400 pixels tall.

Image Gallery

Quick Image Gallery Tips:

• Use sparingly.
• Ask yourself what you hope to achieve with an image gallery? Is there better way to achieve the same effect? For instance, rather than having all images of what your unit does on one part of one page, would it be better to spread them out over a few pages?
• From a technical standpoint, image galleries mean “heavier” pages and slower load times—which make for a bad user. They also eat up data plans, a particular concern for those accessing your site from a device accessing the Internet from a mobile network.
• If you do use an image gallery, make sure to use a smaller sized image for the thumbnail view and an optimized, larger version for the enlarged view. This may require the use of an image editing software program like Photoshop and an online image compression tool like TinyPNG (for PNG and JPEG files) or JPEGmini (for JPEG files only).

Catalog Item

Quick Catalog Item Tips:

• Program/course info is pulled in directly from catalog software.
• Catalog descriptions are procedural, information-focused, and dense.
• Catalog descriptions are not a substitute for descriptions crafted to entice, illuminate, and showcase academic benefits. Users need to know “why” they should consider a program or course (content Drupal users create) before presenting them with “how exactly” (content fed from the catalog).

Faculty/Staff Profile

Quick Faculty/Staff Profile Tips:

• Use this widget for this purpose (don’t recreate the wheel).
• If faculty or staff members want to include more info than space allows, you can use a media block. Include the same basic info as indicated by the fields for the faculty/staff profile widget, then link to another page with the longer profile.
• In either case, use a quality, professional photograph. Make sure to save the image in JPEG format, which is the best for photographs online. Please do not upload them in Bitmap (.bmp) or GIF (.gif) formats, which will degrade the quality of the photo. The ideal size is 320 pixels by 480 pixels or 320 pixels by 533 pixels (a vertical 4:3 or 5:3 aspect-ratio, respectively). If a photo needs to be taken, make arrangements with University Relations.

FormAssembly Form

Quick FormAssembly Form Tips:

• In you’re embedding a form into your Drupal page, don’t have a lot of other content on that page as it will push the form down the page where users might miss it.
• It often makes sense to use a media block or button from a page containing the content describing the event, etc., linking to a separate page containing the form.
• For any form, only ask for the information you need. The easier it is to fill out a form, the more likely it is a user will actually complete and submit it.

RSS Feed

Quick RSS Feed Tips:

• Unless you have a blog that you regularly update, an RSS feed probably doesn’t make sense, as it will show users just how out-of-date your blog is.
• Alternatively, you might consider adding a feed from the main UM-Flint New site. That would allow you to automatically display all stories categorized by your unit.
• To ensure a consistent stream of UM-Flint News stories relevant to your area, suggest story ideas to University Relations on a regular basis.

UM-Flint News Feed

UM-Flint News Feed Directions and Tips:

The process for adding a news feed that will automatically pull in stories relevant to your area is different (and a bit more complex) than the process for adding an RSS feed.

• Click the plus sign over the middle column like you would for adding any widget.
• Scroll all the way down to “View Panes.”
• Select “News by Tag.”
• The menu that will appear contains more “tags” than it should. We aren’t really looking for tags anyway. What you want to find is the “tag” that corresponds with news category for your area (see full list of categories (a.k.a. tags (a.k.a. topics)) at https://news.umflint.edu/topics/).
• Select your topic.

Main (Center) Column AND/OR Right Sidebar:

Media Blocks

Quick Media Block Tips:

• Media blocks are your best friend. They are designed with built-in heading/body structure, space for an image, and a call-to-action. They encourage brevity and clarity of meaning in a single content package. When in doubt, use a media block.
• Ideal image size = 360 pixels x 360 pixels.
• Media blocks work well for summarizing event info, then linking to another page for more info (and/or an RSVP form). Mimic the formatting of event media blocks on the UM-Flint homepage.
• Can be made “reusable” within the same department site (not across sites).

Section Headers

Quick Section Header Tips:

• Section headers divide parts of pages where the content contained in each section is unrelated. This is different than using Heading 1, Heading 2, etc. structures, where content is related (H2 as a subset of H1, etc.).