The California State Web Template V6 is here

By Artem Khomishen, Information Technology Manager, Data Services and Web Development 

January 11, 2023 – Version 6 (V6) is the final production release of the State Web Template. It marks the close of a 10-year era of state templates and standards and bridges our transition to the California Design System.  

Improvements to V6 were driven by community feedback and research. V6 of the State Web Template represents the latest web design standard ready for implementation on your websites.  

What’s new in V6
Updates in this V6 release are more than aesthetic. While the site itself showcases a brand new look and feel, key changes to the template include:   

  • Technology and code enhancements 
  • An offering of content patterns 
  • A new component and new layout
  • A streamlined getting started process 
  • Improvements to existing components

What’s new in technology 
The template code was updated to modernize your site’s structure and framework. We concentrated our efforts on implementing json files and Eleventy logic to generate side navigation and breadcrumbs. This gave way to smoother, sensible wayfinding. With better wayfinding, developing user-friendly websites is easier than ever. 

We now have content patterns
Over the years, we’ve seen the pitfalls of poor user experience. In this release, we used a human-centered approach that focused on users’ ability to complete tasks. We added content patterns to streamline common digital experiences. This provides an approachable starting point to different content pages for digital teams. Our patterns, or, reusable combinations of components, should help users complete tasks. 

New component and new layout
Navigating government websites can be a real challenge. Whether they are searching for information or trying to complete a task, people are often confused by the language and the navigation. To solve this problem, V6 now features page navigation as a new component. 

Page navigation lists and links to the level 2 headings (H2) of a webpage. It lives at the top of your webpage so people can select a link to go to that section. This makes it easy for people to scan a page and know if they’re in the right place. 

Additionally, we have improved the design and functionality of all our components. In this release, we consolidated all components by functionality and added usage guidelines. These guidelines focus on the enhancement of and advocacy for user experience.   

All new get started
We created a Get started section to streamline web template download and setup. Several frameworks are now available for implementing the web template. We consolidated the CSS classes and shortcuts for easier discovery and implementation.  

 Additionally, we have new guidance content to help people understand how to install the V6 template. Check out Download and setup. 

 Visit our What’s new page for more detail on V6 template and website updates.