Streamlining multisite web development with the Sitecore Helix Method

Miranda Singler • 8/29/2017

Sitecore Helix method of web development for Sitecore CMS

What is the Sitecore Helix method?

A New Set of Architecture

Sitecore Helix is a set of best practices for building and distributing a common codebase across multiple sites. Developers can use the Sitecore Helix process to control the uniformity and repeatability of code, ensure government compliance, and save development time. The standardized web components are built with a consistent, compliant functionality that can be distributed to multiple websites, adapting to the brand needs of each site. Instead of having to create, copy, and test code for each new site, the Helix method allows multiple websites to pull from a flexible frontend codebase based on a core set of web components. 

The Sitecore Helix method allows developers to:

  • Save development time through a standardized codebase 
  • Control your HTML, CSS, and Javascript through uniformity and repeatability
  • Ensure government compliance across web components

Atomic Design

In this sense, the Sitecore Helix method relies heavily on principles of Atomic Design as explained by Brad Frost, which approaches web development through the lens of a chemist. Web pages divided into a system of repeating atoms, molecules, and organisms that can stand alone or combine to form the functional systems of the web page. Instead of designing a new web component (such as a table or form) every time you develop a website, with Helix, you should pull from a pre-built set of atoms and molecules, to form the “organisms” of your website.  

Atomic Design principles from Brad Frost

Mobile-Friendly and Compliant for Multiple Websites

To make sure that the Helix “atoms” and “molecules” are reusable across multiple websites, you should develop each component only once within your common codebase. The foundational components should be built to meet web content accessibility guidelines (WCAG) with proper ARIA labels and semantic markup, ensuring accessibility no matter where the component is published. You can also ensure that the web components are accessible on any screen size by building media queries and mobile-friendly design directly into the style templates of your common codebase.

Rethinking the Web Development Process 

This article provides a brief introduction on how to streamline web development for your next Sitecore project. To recap, the Sitecore Helix method should help you:

  • Maintain a common codebase of reusable web components
  • Build accessibility and responsive design into your common codebase
  • Save development time by reusing web components as much as possible

 

If you are interested in learning more about web development best practices for the Sitecore CMS, you can talk with our development team at Symsoft.


Symsoft Solutions is a certified Sitecore Gold Partner with 10 years of experience delivering enterprise-scale websites to clients in California.  Sitecore® Helix is a set of official guidelines and recommended practices for Sitecore Development. 

Miranda Singler

Miranda is a designer with 5 years of experience in facilitating business communications through clear design solutions partnered with engaging visuals. She loves brainstorming and iterating to develop intelligent visual storytelling that enhance and humanize technical communications.

Explore topics:

Other Blog Posts from Miranda Singler