Ingeniux Team Blog
Powered by BlogXite

From Concept to Completion: An Ingeniux CMS Site in 7 Days

As any organization implementing a CMS can attest, it takes time, patience and a little bit of humor to launch a site on schedule while keeping peace and sanity in the workplace. Ingeniux has never been one to do things according to the rule, however. Follow along as we create a site for Cinema Italian Style: The 3rd Annual Seattle Italian Film Festival, from wireframes, to design, to specification, to development. Launch date? November 17.

Day 1: Wireframes 

A well-defined concept, clear understanding of use case scenarios, and careful planning is the cornerstone of any successful CMS implementation. A set of detailed wireframes outlining the page types necessary to build the site helps direct this process. Based on the information architecture and content strategy for the site, wireframes help guide the site through all the phases of development, from design, to site specification, to implementation in the CMS. 

While the wireframing process can take weeks, Ingeniux Information Architect Kaitlin Pleas had the afternoon (and well into the evening) of day one of this project to wireframe the site in its entirety. Here is a sample of her work: 

Home page wireframe                 Films page wireframe                  Photography page wireframe

Day 2 - 4: Design and Specification

Sometimes, if a project has a tight deadline, phases need to happen simultaneously. To complete the Cinema Italian Style site in seven days, site design and specification goes hand-in-hand. While Ingeniux partner and go-to designer Michelle Drewien at Zango Creative, Inc. dropped everything to design the site, Ingeniux Project Manager Laurel Check got busy on the site implementation specification document.

A thorough specification is essential to any CMS implementation. This document acts as a map for the site developer. Information contained in the site implementation specification document includes:

- Site-wide conventions such as site navigation conventions, site functional requirements, search engine optimization features, and a site tree outlining the page types and information architecture

- A detailed outline of page types including an image of the page design, special instructions for the page, and a page schema as it will appear in the CMS

- The working environment configuration including content contributors, workflow definitions, and page creation rules 

Design and specification can span weeks, or even months, as all interested parties provide feedback or redefine goals and needs. The Ingeniux worker bees had two days. Here are just a couple of the designs completed today:

Home page design                        Films index page design            Films detail page design          

Day 5: CSS and HTML Development

With four days of planning, design, and specification behind us, we're ready to actually start building the site. Ingeniux Software Implementation Engineer Tim Palac, who has been patiently awaiting PSD files from the designer, starts with the visual framework for the site - the mark-up layer.

The mark-up layer - CSS and XHTML - provides the visual framework for the site display. It's the language used by web browsers for displaying the text, graphics, media, and layout of a web page. It provides a framework into which the CMS will deliver content. In this case, Tim is also doing a mark-up layer for display on mobile browsers as well. 

Progress is slower than expected however. Tim has to develop some complex jQuery scripts for image slideshows and for mobile browser functionality. At the end of the day Tim has the completed the home page and a couple of the lower level templates, but still has three templates to go. He'll have to work over the weekend to try and complete the mark-up by Monday and keep the project on track.

Day 6: Site Implementation

As is often the case in CMS development projects, the best laid plans must sometimes be modified as the project progresses. With design and mark-up taking longer than expected, we adopted a tandem development process that will allow us to deliver this site on time.

As Tim continues to work on the mark-up layer throughout the day on Monday, our lead Software Implementation Engineer, Ashley Christensen, starts developing the site in Ingeniux CMS. The first step is to create the schemas for each of the templates - or "page types" in Ingeniux parlance - for the site. Schemas define the data structure for each of the page types. For instance, the page type for a film may have a very structured set of content - title, director, year, brief description, long description, screenwriter, actors, image thumbnail, trailer URL, etc. Because this information is structured in the CMS, it can easily be re-used on other page templates without having to re-enter the content.

Next, Ashley starts building the site templates in the CMS. These combine the visual mark-up, the structured content provided by the CMS and any specific functionality required for each page. Ashley cranks out site templates as Tim provides just-in-time delivery of the mark-up. 

While the flexibility of the Ingeniux CMS platform allows for this tandem development process, it also simplifies the content entry process. With in-context and forms-based editing capabilities within the CMS, the project manager is able to enter content into the CMS while it is still in the development phase. What would generally be completed in distinct stages of a CMS implementation project, cut-up, development, and content entry has been condensed to days five and six of this project.

Here's what the site looks like in the full screen in-context editing view (a new feature in CMS 7.5) once it has been built out in the CMS:

Home page in the CMS 

Film detail page in the CMS

Day 7: Content Entry and Punchlist Resolution

The pressure is on in the final day of our site development project for Cinema Italian Style. With cut-up and site implementation behind us, the responsibility is now back with Project Manager Laurel to see the site through to completion.

Content entry, which began on day six, continued at a feverish pace today. Laurel spent time tracking down the logos and company descriptions of the event sponsors, images and descriptions of the festival films, and information about the other events held in conjunction with the festival. Taking a brief break from content entry mid-day, the team members, including Laurel, Software Implementation Engineer Ashley, and Software Support Engineer Alex Loescher, convened to review the site, identify punchlist items, and agree on a site deployment plan for the next day. Alex represents the Ingeniux hosted services group and will be responsible for deploying the site once the team completes their work and gives him the go-ahead.

Even after a site is implemented in the CMS issues can arise which require the continued investment of the development team. Site issues can range from a simple technical problem that keeps a site from performing properly to a new site feature that was not part of the initial scope of the project and must be added post-CMS implementation. When issues of this nature are identified, generally by the project manager or customer, they are recorded in a document called the punchlist and given to the site developer for resolution. Luckily, with a small site on a short development time frame, our punchlist was limited and issues were resolved quickly, allowing us to stay on schedule.

Launch Day

Right on schedule, launch day has arrived. With a few remaining content items to enter into the CMS, site deployment was delayed until this afternoon. Once the team was ready to hand-off the site, however, it was Software Support Engineer Alex's turn to take responsibility for the project.

All of the hard work the team put into this site over the past seven days would be for naught if the site never made it into the public eye. And an Ingeniux CMS site never would go live without the support group to help make it happen. The Ingeniux support group is there from site launch throughout the life of the site, helping to resolve any issues that arise once the site has gone live.

Phases of a hosted CMS site deployment include:

- Bringing up a new server in the cloud hosted environment

- Installing CMS version 7.5

- Implementing a content freeze to copy content from the development site to the live site

- Configuring the server and application to ensure the site displays and runs properly

In addition to the launch of the traditional site, developers Tim and Ashley created a mobile version of the site so information is available to festival-goers anywhere, anytime, from any platform. Ingeniux has the ability to develop a mobile version of a site with mobile templates built right into the CMS site tree allowing for 100 percent content re-use and easy integration with external applications.

Here's what the site looks like on a mobile device:

Mobile version of the site 

You can visit the live site now at www.seattleitalianfilmfestival.com. 

Cast of Characters (in order of appearance)

These hard-working Ingeniux employees (and one dedicated freelance designer) made the site implementation for Cinema Italian Style possible. Thank you!

 Kaitlin Pleas, Information Architect, Ingeniux 

 Michelle Drewien, Designer, Zango Creative, Inc. 

 Laurel Check, Project Manager, Ingeniux

 Tim Palac, Software Implementation Engineer, Ingeniux

 Ashley Christensen, Software Implementation Engineer, Ingeniux 

 Alex Loescher, Software Support Engineer, Ingeniux

Cinema Italian Style 
Ingeniux is a proud sponsor of the third annual Seattle Italian Film Festival. Presented by SIFF and Cinecittá Luce, November 16 - 20, 2011, the festival will present a selection of the best new Italian films from international festivals, including Golden Globe and Oscar contenders, at the SIFF Cinema in Seattle, WA.

SIFF
SIFF's mission is to create experiences that bring people together to discover extraordinary films from around the world. It is through the art of cinema that we foster a community that is more informed, aware, and alive. SIFF actively promotes film year-round and presents the Seattle International Film Festival every spring.

Posted by Julie Pederson