May 04, 2017
In this article we are going to discuss how to breakdown website wireframes into Sitecore templates and components to create a usable system for website content maintenance.
May 04, 2017
In this article we are going to discuss how to breakdown website wireframes into Sitecore templates and components to create a usable system for website content maintenance.
Wireframes focus on what website pages (or screens) will do. They show how the content, interface elements and navigation will function together in the published page layouts. Wireframes are typically very simplistic and lack typographic style, color, and graphics. This is done so that the functionality, behavior and priority of the content is the focus rather than what it will look like.
Once the wireframes are finalized, then it is time to move into the design phase. This is the phase where the website begins to feel “real”. You will start to see what your site visitor will see when they visit your site and you will also have something tangible to start showing your stakeholders. This phase is very exciting. Your team will love this phase.
This is also the point, at Valtech, where we will begin to draft the development backlog. And this is the phase where I get really excited. The development team gets to start breaking down the wireframes into small pieces that they can start to build. It is sort of like getting to the smallest piece of a Matryoshka (Russian nesting) doll. We are look at each layer to get to the smallest piece (component).
This example is for a case study page on a manufacturer’s website. Let’s ask our questions:
Component |
Default or Optional |
Description |
Breadcrumb | Default |
Breadcrumb truncates at level six (i.e. Level One > Level Two > … > Level Five > Level Six) |
Page Title | Default |
Required. Content author will need to input. This will be displayed as the page Heading 1. |
Subtitle | Default |
Optional. Content author will not have to input. If field is not completed nothing will display to the end user. |
Social Share | Default |
Links to corporate social media accounts. Managed by site administrator. |
Have Questions | Default |
Personalized element. Logged in users will be directed to their corporate contact. |
Body Content | Default | Rich text. |
Customer Profile | Optional | Rich text. |
Client Testimonial Quote | Optional |
Component will include:
|
Imagine/Diagram | Optional | Image |
Related Products | Optional |
Number of items displayed flexible based on the insertion of the component into a column container. The Related Product component will give the content author access to the content tree to pick the correct related items. The display will be based on the page title and teaser that is included on the product template. |
Reviewing this list, we might notice that the Case studies default elements are consistent with another template. If this is the case, we would recommend creating a single template that can be used for the multiple content variations rather than creating unique templates in the content tree. This will provide efficiency for both the content and development team.
Once we complete these processes, we will validate our recommendations with your team to ensure they truly meet the expectations of your content authoring experience.
One final thing to note: This process does not happen without a parallel and deep discussion about your content and its planned structure in Sitecore. See my discussion on this topic.