The new Alouette Cheese website was built using Umbraco. It takes a great deal of the lessons learned from previous websites and refines them for a well built and structured website.

Overall I feel that this project was a great experience in making use of Umbraco’s doctypes for content storage and the API with Razor views to display this content.

The design determined what kind of data was required: four unique sections with unique pages and content and templates.

This was also the first project that I was able to apply a Agile methodology by creating a backlog of tasks, with assigned story point values. Best of all the estimate was accurate.

Recipes

The core of the site is in the Recipes section.

The recipes are organized under a meal doctype and have plenty of fields to store recipe data.

Ingredients and directions are stored as separate individual nodes to let them be added and organized as needed.

The recipes landing page allows for a list of featured recipes to be displayed. These lists can be created and saved allowing for their reuse in the future.

The recipe search form is the website’s core functionality. The form allows visitors to search through the recipe nodes and their properties.

The select boxes use the same data the recipes use with the exception of the time field.

Sorting recipes required a bit of work because numeric fields were treated as strings and a basic data storage object had to be created to properly sort recipes by time or servings.

I decided to use get rather than post in order to allow the search results to be tracked and shared if necessary.

Printing

Allowing visitors to print recipes in various formats required a lot of thought into execution.

First a print page was created that all print requests would go to. This required setting up URL rewriting and parsing the request data.

The main challenge to printing recipes was how to properly print recipes onto cards sizes: 3x5 and 4x6 formats. The old website allowed recipes to be printed this way but there would be cases where text overflowed a card’s borders.

The solution I came up with was to, when outputting the text, not worry about line length and only worry about the number of lines per card.

I could break lines up in a previous step of the page load and focus just on whether or not a new card was needed if the next line was one over the maximum number of lines per card.

The logic isn’t perfect with regards to line length or lines per card and left over space but we didn’t find cases where the system broke.

Finally the front end had to be implemented via a modal window with Colorbox which builds the appropriate request based on the print options and displays the print page as an iframe.

Other

The website featured a site search that I used Umbraco Examine which was my first experience doing so; Examine allows you to define the doctypes and properties to be indexed, or ignored and makes returning results easy.

The homepage slider uses the NivoSlider. This slider handles custom events on the slide transition to update the left and right images and links.

Along with Colorbox and NivoSlider, other jQuery plugins include: Roundabout for the products landing page, Elastislide for the product category and featured recipes slider, the jQuery Cookie Plugin for remembering the display state of the footer bar, jScrollPane for the custom scrollbars and Uniform to customize the recipe search form select fields.

This project also made use of custom web fonts, one being served from a subdomain and the others being served by Fonts.com.

It also was a opportunity to implement social media sharing features for dynamic pages. Users could share recipes by liking them on Facebook, posting to Twitter and sharing the a image on Pinterest.

This project was all about unique content and how it’s displayed. Umbraco’s separation of content from design and the ability to use Razor to pull the content as you need makes building this style of website easy.

Gallery