Areas of Expertise

  • CMS & Intranets

Industries

  • Education
  • Non-Profits

Technology Used

Challenge

Indiana Historical Society wanted to improve their online presence and launch their new website in conjunction with the Grand Opening of their exhibit 'Indiana Experience'. The new site greatly facilitates content updates, and offers a much more polished look.

IHS Homepage

The Indiana Historical Society had been managing their online presence through a static HTML website, which made updates very time-consuming and required the help of someone from their IT Department. This proved to be a major strategic challenge for the non-profit whose intent was to keep guests connected to both the organization and the historical collections.

Six Feet Up partnered with Abstract Edge and worked with the Indiana Historical Society to design and develop a brand-new content managed website using the open source CMS Plone.

 

Implementation Details

The Indiana Historical Society was looking for a modern way to display information about their various events as it is a key engagement point with their guests. They also wanted to minimize the number of clicks necessary to get to the information.

IHS Event Calendar view 

As a result Six Feet Up implemented a clean UI that presents all the information visitors might want at once but without cluttering the design. Clicking the main calendar tab automatically jumps to the first event in the month. And while the detail of each event is displayed on the left of the page, the system conveniently lists the other events of the month on the right side. This makes it very easy to browse through the various events scheduled that month.

The Indiana Historical Society chose the Plone content management system (CMS) because it allows sites to be updated by the designated personnel without HTML / programming experience required. Administrators can easily update their own content; staff members can write their own blog posts - all to give visitors to the site the most accurate, up-to-date information possible and clearer insight into the mission and work of the non-profit.

Versioning

Administrators can see the history of each piece of content - who updated it when it was updated and can even revert the content to an earlier version.

history-revisions.png

 

They can also see exactly what was changed in a revision:

history-version.png

 

Locking / Unlocking Content

When a document is edited, it is automatically locked, preventing one user from accidentally overwriting the updates of another.

locked.png

Automatic Navigation

Users do not need to be concerned about how to get their new content displayed in the navigation.  When content is added to the site, it is automatically added to the navigation.

navigation.png

Workflows

Administrators can create content without fear of the public viewing the page before it is ready. They simply keep the document in a private state, and only those with the correct permissions will be able to view it when logged into the site until the decision is made to publish it.

Various Design Templates

The Indiana Historical Society (IHS) wanted to be able to easily change the look of their pages by themselves. Six Feet Up implemented a series of templates that allow content providers to choose the most-appropriate design while still maintaining the overall look and feel of the site.

Template 1 is a two column layout.  With the two column layout, IHS can choose to display a Static Image, a Slideshow, or a Video, by selecting the Media Type and adding the Associated Media.

template-ddl.png
Click to view full-size image…

If they prefer to have an additional column of text instead of a slideshow, image, or video, site editors simply remove the media from the page, select the media type to none, and add text to the second column.

template-1-2col.png
Click to view full-size image…

Setting the page to Template 2 creates a one column display, removing the media or the second column of text from the page. This gives Indiana Historical Society layout flexibility without spending a lot of time.

template-1col.png
Click to view full-size image…

Color-coded Pages

The Indiana Historical Society also wanted to make it easy for their visitors to navigate the massive amount of content presented on their website. They opted for a system to color code the main sections of the site. Six Feet Up adapted the templates so as to use blocks of color behind the title, and reverse type for the text. The background style can also be edited using a color palette in the TinyMCE visual editor.

IHS Color Coded Page

Six Feet Up customized its own product EasySlideshow to allow Indiana Historical Society to create beautiful slideshows for their site.

EasySlideshow is simple to use: just create a Folder and add an image to that folder.  The items in that folder will be presented as a slideshow.

slide-edit.png
Click to view full-size image…

Now add the Slideshow to the Media Display of a page, and display it with Template 1:

media-add.png
Click to view full-size image…

Once guests visit the Indiana Historical Society (IHS) website, they will want to come back to see the latest changes and updates.  Six Feet Up has ensured that visitors will never run out of new content to learn what is new at IHS.

By leveraging the product Quills, Indiana Historical Society staff members have the opportunity to write their own blog posts, keeping guests in touch with the very latest happenings in the Society.

blog.png
Click to view full-size image…

The blog landing page supports the display of an image with each specific blog post (a feature that was not previously available in the Quills product). Images may be landscape or portrait orientation and are automatically scaled to fit the width or height of the frame. They are placed flush left against the frame edge for a clean and modern look:

IHS Blog landing page

Six Feet Up also enabled blog pages to support images, slideshows, and movies. This was done by extending the "weblog" entry type to use "mediaSelection" and "mediaReference". Rich media is displayed in the top right corner of the content area via the same macro used on other templates throughout the site.

More recently, the Facebook Social Commenting tool was set up to replace the original blog commenting product. This allows content contributors to moderate and manage comments via a Facebook dashboard.

Finally, guests are able to stay connected with Indiana Historical Society through their favorite social media: Facebook, Twitter, YouTube, and Flickr sites, as well as through an RSS feed of the site:

Videos

The Indiana Historical Society was looking for a way to easily embed videos on their homepage and on specific templates.  To make it happen, Six Feet Up leveraged the add-on product Flowplayer.

Displaying videos is now a breeze: all site admins have to do is upload a .flv file as a standard Plone File and then add it to the homepage or Media Display of a page.

ihsvideo.png
Click to view full-size image…

"InDepth" Feature Slider

Indiana Historical Society needed the ability to easily feature specific pieces of content on any page, including the homepage. Six Feet Up created a slider content type that allows content admins to specify a number of items to display, and a target link for each item:

IHS Feature Slider

IHS Mobile viewIf the number of features that have been added exceeds the number of items set to display, scrolling arrows will automatically appear to allow the viewing of all features.

It's also possible to select "Inherit Features setting" in order to display the features which are showing on the page's parent folder.  This is selected by default and allows Indiana Historical Society to display the same feature-sets on multiple pages, without any additional work.

As more and more people are utilizing mobile and tablet devices, the Indiana Historical Society made it a priority to cater to their mobile users.

In response, Six Feet Up added responsive design templates to their site using Diazo rules. Additionally, since the initial website only supported Flash-based video files, we installed MediaElements.js, which provides support for .mp4 media files.

New template skins were also created to let content contributors embed video files via the TinyMCE visual editor.

Results

This online development has helped further the Indiana Historical Society's mission of connecting people to the past by collecting, preserving, interpreting and sharing Indiana history.

The non-profit especially appreciates the ability to:

  • Easily administer events and blogs in a timely-fashion
  • Engage and retain visitors by keeping a site fresh and easy on the eye through the use of "template magic"

Want to keep visitors coming back to your site for more? Contact us!

Are you ready to start your next project?

Let's Talk