State of California

Introducing the new CA Cannabis website

A new department and a new approach to building state websites

Blue background with white text that reads 'A new department and a new approach to building state websites'

Cannabis.ca.gov is live! 

We’re proud to have led the months-long collaboration to build this site in partnership with the Department of Technology and in active collaboration with the Department of Public Health, the Department of Food and Agriculture, the Bureau of Cannabis Control, and the brand new Department of Cannabis Control. 

Our teams have applied a lot of new and really useful technology solutions and approaches on the site. In this post and successive posts, we’re going to highlight some of the major ones that we’ve put into practice.

The first one we are focusing on is the actual web design, content editing and publishing environment. We needed to ensure that our partners at the new Department of Cannabis Control could create and update content quickly. They would need an easy way to keep updating the code of the site every time there was a change in policy or guidance. They would need to be able to see how their changes would appear in the final version while they were editing so they could make adjustments on the fly. And they would need to know that whatever updates or additions they made, the site would still be fully accessible, fast and good-looking. 

So we built our own WYSIWYG (What You See Is What You Get) design tools in WordPress.  WordPress transformed web page design a few years ago when they created the Gutenberg editor and content blocks. Each block is a self-contained unit of text, media or even a mini web service. ODI created our own custom Gutenberg blocks that follow the standards and guidelines of accessible, clean and engaging web design that we’ve been creating, using and refining over the past two years, and which build on our earlier work with alpha.ca.gov and covid19.ca.gov. These standards and guidelines mean that our stakeholders have the same experience whether or not they use assistive technology, and whether or not they are using the fastest phone or computer. 

These magic (ok, if not magic then at least very cool) blocks also allow state teams to design content and build webpages without any code know-how. Unlike other WordPress plugins, the custom blocks output leaner markup by tightly controlling the HTML delivered to the user so they only get the tags required by our design system. And they are specifically designed and coded to make the content fully accessible without added work. All that makes for a leaner, faster user experience. New content can be added or updated without having to change any code. Because the Gutenberg blocks have been pre-coded with the right styles and layouts, pages look good right out of the gate. And because the editor is WYSIWYG, it’s easy to see what the page will look like as you add or change content.

There is a potential downside to this. While having each block with the right styles and appearance pre-coded takes a lot of the burden off of having to make each element look good each time, it also constrains folks who want more control over the visual look and feel of the content they create. Instead of trying to guess if this approach would work for content creators, we asked them. 

We tested our new approach with our partner, the newly created Department of Cannabis Control, asking, “If this editing interface uses custom blocks which intentionally limit your design choices, do you think that might be problematic?” 

Our main stakeholder in this process, Christina Dempsey, DCC’s acting Deputy Director of External Affairs, offered a very thoughtful and gratifying response: “I personally value consistency in all organization’s materials. The goal is to have templates and to avoid wasting time creating a different design for every document. Templates help people seeking information; the consistency in look and feel means they don’t have to reorient themselves and can focus instead on the content itself. In managing a communications team, I generally reiterate that the focus should be on the information being shared and design should be fairly uniform. I like the constraints because it helps maintain that consistency.”

We are excited to continue exploring with our state partners these new digital publishing tools that allow state staff to easily create and update digital content and result in fast, accessible and engaging websites from day one. 


Follow us on Twitter and collaborate with us at GitHub.

Back to news home