Magnolia 5.4 reached end of life on November 15, 2018. This branch is no longer supported, see End-of-life policy.
This page details what is typically involved in creating a website project in Magnolia.
The first step is to create a detailed website specification.
Every specification is different and the content varies depending on project size, complexity, business structure, current resources, manpower and other variables.
The goal is to have a clear understanding of your website needs and a vision of the end result.
Website specifications typically include:
Resources:
Information architecture (IA) is the process of planning your content. How are content types organized, connected, labelled and accessed? How does search work? The aim is to to ensure optimal usability for your target audience. The focus is on user-centered design. This is the stage where you map out website content, content relationships and functionality clearly.
Content strategists UXBooth define information architecture as:
The creation of a structure for a website, application, or other project, that allows us to understand where we are as users, and where the information we want is in relation to our position. Information architecture results in the creation of site maps, hierarchies, categorizations, navigation, and metadata.
The result should be a non-graphically designed representation of what the site will include.
End products typically include:
The following diagram shows an incomplete sitemap of the Magnolia demo site:
Resources:
Content strategy involves planning content creation, delivery, and maintenance. The goal is to define a repeatable system that defines the entire editorial content development process. It answers the "what, where and how" of the content creation process.
Decide where to store and edit your content.
Resources:
Your front-end team creates an HTML prototype. The prototype should include examples of all functionality and content, as well as CSS styling and JavaScript.
There are many differing views on the best way to prototype a website. There are also many tools and frameworks to assist in the process. Many designers choose to create a functional prototype in HTML and CSS. Frameworks like Bootstrap or Foundation allow you to create an interactive prototype that works in a web browser.
The following screenshot shows the html prototype of the Magnolia demo site:
Resources:
Plan your templates by "cutting up" the prototype areas and components and matching them to readily available and to-be-created components.
A quick and rewarding way to start is to bring the pages of the prototype into Magnolia as templates. This way the site looks complete right away. You can then turn the HTML templates into Magnolia templates step by step by "cutting" pieces out of the page and putting them into components within defined areas.
For example, for the Magnolia demo site Tours section, the following component templates were planned:
During this step you typically need to decide on:
Resources:
During the template building process your website begins to take shape and you reap the rewards of your work in the previous steps.
For example, here are the component templates planned in the previous step configured in Magnolia:
Things to consider before starting:
Build process:
Resources:
Build apps for your content. Test any custom components that retrieve content from apps and refine your templates if necessary.
The following screenshot shows the Tours app from the Magnolia demo site:
Resources:
Enter content into your new website. If you don't have available content, use a text generator like BlindTextGenerator or Lorem Ipsum.
Resources:
Test the new website until everything functions as planned. It's always a good idea to have people that haven't been part of the development process, like editors, help with the testing.
Resources:
Launch the website.
Resources: