Widgets by Column (in Desktop View)

All Drupal widgets have been designed in adherence with the goals and standards of responsive web design. Responsive web design ensures that web content is rendered and readable regardless of the device used (laptop, tablet, smartphone, digital display, etc.).

With this adaptiveness in mind, everything you need to achieve within Drupal can and should be done by using these widgets properly. By sticking to these guidelines, you help ensure a consistent, quality user experience throughout the UM-Flint website—no matter what platform your audiences use.

Left Sidebar Only

Menu

Drupal menu highlighted in left sidebar

Your website's navigation (a.k.a. menu) is the only widget that should appear in 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

Blurb widgets highlighted in the right sidebar

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

Info sidebar widget highlighted in right sidebar

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

Testimonial widget highlighted in right sidebar

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

Text block widget highlighted in center column

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. From a technical standpoint, large image files mean “heavier” pages and slower load times—which make for a bad user experience. They also eat up data plans, a particular concern for those accessing your site from a mobile network.
  • To optimize image size and weight, use an image editing program like Photoshop and an online image compression tool like TinyPNG (for PNG and JPEG files) or JPEGmini (for JPEG files only) to reduce file sizes while maintaining image quality.

Image Gallery

Quick Image Gallery Tips:
  • Do not use. They create very “heavy” pages, slow load times, and the galleries do not display at all in mobile view.
  • Rather, 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 page, would it be better to spread them out over a few pages, adding images via text blocks as described above?

Catalog Item

Catalog widget highlighted in center column

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

Faculty/staff profile widget highlighted in center column

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 Communications & Marketing.

FormAssembly Form

FormAssembly widget highlighted in center column

Quick FormAssembly Form Tips:
  • If you’re embedding a form into your Drupal page, which is recommended, 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

RSS feed widget highlighted in center column

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 (news.umflint.edu). That would allow you to automatically display all the news stories that have been categorized by your department/unit:

Shows how to find topics/categories within UM-Flint News that can selected and fed via RSS

  • In the example above, the RSS URL one would enter into the widget to automatically display “alumni” news articles would be:

https://news.umflint.edu/category/alumni/feed/

  • Please note that adding a UM-Flint News feed via this method does not include the news article’s thumbnail image. The following method for adding a news feed is a bit more convoluted, but does display a thumbnail image with every article.
  • To ensure a consistent stream of UM-Flint News stories relevant to your area, suggest story ideas to University Communications & Marketing on a regular basis.

UM-Flint News Feed

UM-Flint News Feed widget highlighted in center column

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. Again, the biggest difference is that a thumbnail is included with each article.

  • 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 (as with the previous entry on RSS feeds, see the full list of news categories (a.k.a. tags (a.k.a. topics)) here: https://news.umflint.edu/topics/).
  • Select your topic.

Main (Center) Column AND/OR Right Sidebar

Media Blocks

Media block widgets highlighted in center column and right sidebar

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

Section header widgets highlighted in center column and right sidebar

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.).