DWSN Quarterly Forum Thursday, October 19, 2023

Bringing together digital product

managers, designers, and engineers.

cdt.ca.gov/dwsn

DWSN Quarterly

Forum

Thursday, October 19, 2023

Digital Web Services Network

• Welcome to the DWSN forum, we will begin shortly.

• For the best experience, please use your computer to join the

meeting.

• Mute your audio.

• Turn off your video.

• Use the raise hand button or the meeting chat for comments

and questions.

DWSN Forum Agenda

Opening Remarks……………………………………………………………………………………………Koji Kumpulainien (1 minutes)

Conference Take-Aways…………………………………………………………………………Panel (10 minutes)

CA Digital Strategy ……………………………………………………………………………………………Jonathan Porat (20 minutes)

In-house web development…………………………Sarah Letson (ODI) & Zakiya Khabir (ODI) (10 minutes)

Analytics………………..……………….…................................................................Linda Tracy (10 minutes)

CA State Web Template Figma UI Kit…………….…….…….…….….…….… Christina Florente (20 minutes)

Statewide alert

……………….…………………….…………………….……………....………Carter Medlin (10 minutes)

Accessibility ……………………………………….……………………

...…….……...Greg Duncan (5 minutes)

Suggested Future Topics / Closing Remarks……….…………………………. Koji Kumpulainien (1 minutes)

Opening Remarks

Koji Kumpulainien

State Web Services Manager

California Department of Technology

cdt.ca.gov/dwsn

Conference

Take-Aways

Harvey Dhillon

Pia Lomboy

Sharon Rabang

Greg Duncan

Web Services

Office of Digital Services

Department of Technology

Conference Take-Aways

Smashing Conference 2023 and Config 2023

Conference Take-Aways (1 of 3)

New features

References

• The Anatomy Of Themed Design System Components

• Una Kravets on CodePen | Jeff the bug in Flight Mode

• Keynote session: Figma product launch session

• What's New from Config2023: Design and development, reimagined

Conference Take-Aways (2 of 3)

Serving the public

References

• Cascading

Styles: CSS Deep Dive

• Designing

for the evolving needs of society

• Putting

accessibility at the heart of design and code

• Using

color at scale for aesthetics and accessibility

Conference Take-Aways (3 of 3)

Inspiration

References

• Leading through uncertainty: Navigating uncertainty

• Josh W Comeau: Meaningful Motion with Action-Driven Animation

Sample "Like" button: Under the "Table of Contents", go to the gray heart face,

then hover and continuously click on it to see it change

Conference Take-Aways:

Questions

CA Digital Strategy

Jonathan Porat

Chief Technology Officer

Office Of Technology Services

California Department of Technology

cdt.ca.gov/dwsn

In-house

web development

Sarah Letson

(Researcher)

Zakiya Khabir

(Engineering Manager)

Office of Data and Innovation (ODI)

cdt.ca.gov/dwsn

California Office of Data and Innovation

In-house

web development

How’s it going?

October 19, 2023

How easy is it for you to

access the tools,

permissions, or other

technology you need

to do web development at

the state?

ODI web development discussion at DWSN

My department creates an

environment that enables

developers to do their jobs

well

ODI web development discussion at DWSN

How is your development

environment set up?

● Do you develop locally, on a separate laptop, a virtual

environment, local virtualization, etc.?

● What tools, applications, or languages do you use?

ODI web development discussion at DWSN

If you had a magic wand,

how would you make

development easier at

your department or at the

state?

ODI web development discussion at DWSN

California Office of Data and Innovation

https://innovation.ca.gov

@californiaODI

Have more thoughts?

Reach out to Sarah Letson or Zakiya Khabir

sarah.letson@innovation.ca.gov

zakiya@innovation.ca.gov

cdt.ca.gov/dwsn

Analytics Update

Linda Tracy

Analytics and Insight Specialist

California Department of Technology

GA4 Analytics Contract

• If you’re managing your own analytics contract, you will need a new

contract due to a new pricing formula with GA4.

• We are available to manage your account.

• Existing accounts/properties can be transferred under our analytics

organization.

GA4 JavaScript Code Snippet (1 of 3)

• We’ve updated our GA4 code snippet to address security guidance:

• Secure flag

• SameSite attribute

• Cookie domain

• The update restricts the GA4 measurement ID to its specific domain

• GA4 ID won’t travel across ca.gov sites

GA4 JavaScript Code Snippet (2 of 3)

• Original code

• gtag('config', ‘G-XXXXXXXXXX’); // statewide GA4 measurement ID

• Updated code

• gtag('config', ' G-XXXXXXXXXX ',

{cookie_flags:'secure;samesite=lax;domain='}); // statewide GA4

measurement ID

Custom Reports

• We will be creating two custom reports for all accounts we manage:

1. File downloads

2. Site Search Terms

• We will not notify your agency once this is complete.

• The reports will appear under:

• Reports > Life cycle > Custom Reports

GA4 JavaScript Code Snippet (3 of 3)

• Updated GA4 JavaScript code:

• Add analytics to your site page

(https://webstandards.ca.gov/add-analytics-to-your-site/)

• Go to Agency managed websites and find it under our Custom

template setup collapsible.

Custom Reports Demo

• Analytics Mania

• How to Build a Site Search Report in Google Analytics 4:

https://www.youtube.com/watch?v=EBdWH_LOZso

• To request a GA4 account/property that is managed by our team,

reach out to us at analytics@state.ca.gov

• For more information, visit https://webstandards.ca.gov/analytics/.

State Web Template

V6.3 Updates

Figma UI Kit

Christina Florente

Web Design and Development

California Department of Technology

cdt.ca.gov/dwsn

Topics for today

•V6.3 updates

•Starter site

•UI kit

•Q&A / feedback

V6.3 updates

• Optimized color scheme files

• Updated social media icons

(Twitter/X, etc)

• Updated starter site

• UI Kit

Full list: Template updates

Optimized color files (1 of 2)

Optimized large color CSS files. They're more than 100 times smaller.

What this means

• Color theme file super small (only 1K)

• Adding color theme CSS file is now optional

Optimized color files (2 of 2)

CSS color variables

Converted all SASS color variables into CSS color variables

BEFORE: color: $color-p1; NOW: color: var(--color-p1, #fdb81e)

New: Moved all color related styles from separate color theme

CSS file into core CSS file

New: Oceanside theme is default

Customizable color theme. Change color variables:

• Three primary colors

• Three secondary colors

Get the starter site

from the state

template site

Download and setup page

• Files on GitHub

• Live demo in GitHub

Starter site

HTML site contains

• State template CSS and

JS files

• Sample

department website

content

• Code comments to

make it easy to identify

structural components

Links to live demo

[Download]

How it can help departments

1. Jump starts development

• Provides functional starting point

• Includes only what you need to get started

2. Test template and components

• How it works with your custom CSS

3. See how something looks or works in the live demo

• Components

• Colors

4. Provides common page patterns for content creators

Poll / Discussion 1

How would you use the starter site? Check all that apply:

 Check out the state web template

 Test the template

 Create a website

 Use the page patterns

 I wouldn't use it

 Other

UI Kit

in Figma

Where to get it

1. Go the state template site

2. Select the Visual design

menu dropdown

3. Select UI kit

Figma community link:

CA State Web Template UI kit

What comes in the kit

• Using this UI kit

• Branding (typography, color)

• Components and patterns

• Icons

• Page templates

• Starter site templates

What is this UI kit?

• Uses Figma (software)

• Contains

• State template components, patterns, and styles

• Starter site page templates

• Uses

• Usually for writers, designers, comms

• Create digital webpage mock-ups

• Add and edit content (text, images, etc)

• Hand over the design to developer to code

UI Kit Tour

and Demo

How it can help you

• Saves time (create a mock-up without coding)

• Use for reviews and approval for a design/concept

• Communicate expectations with project team/developer

• QA/validate after something is developed

• Can send to vendor to align with CA web standards

Sample UX workflow using Figma

1. Research and finalize content

2. Use the UI kit to mock-up design

3. Show design to developers for feasibility

4. Show design to project team for review and approval

5. Make edits to the design

6. Send approved design to developer

7. Developer codes the design

8. QA against the design and go-live

Poll / Discussion 2

How do you / your department prototype? (select all that apply)

• Figma

• Sketch

• Adobe XD / Photoshop

• InVision

• MS Word

• MS PowerPoint

• Whiteboarding tool (Miro, Mural, etc)

• We don't prototype

Statewide Alert

Update

Carter Medlin

Web Design and Development

California Department of Technology

cdt.ca.gov/dwsn

Statewide

Alert

Try it on your site

Document.head

.appendChild(document

.createElement('script'))

.src='https://alert.cdt.ca.gov/sample/sample-alert.js';

Installation

Verification

"No Code" Option

https://alert.cdt.ca.gov/alerts.json

For more information

CA Alerts Website Embeddable Code

https://github.com/Office-of-Digital-

Services/ca-alerts-frontend-

component#readme

cdt.ca.gov/dwsn

Accessibility Updates

Greg Duncan

Web Consulting Manager

California Department of Technology

WCAG 2.2 UPDATE

• Its official

• Has 6 new A-AA requirements

• Working on adding the new requirements into the

testing documents.

• Waiting on vendors to update their tools