HomeMy WebLinkAboutRequest 5.71
Website Training 101
Editing and providing content for slocity.org
2
Today’s Training
1.Introductions
2.Website Policy Overview
3.Website Style Guide Overview
4.Website Content Management System (CMS) Instructions
3
Introductions
1.Name
2.Role/title
3.Experience with website content or editing
4
Website Policy Overview
1.Purpose, target audience
2.Roles & Responsibilities
3.Design & Content Principles
4.Maintenance & Implementation
5
Purpose, target audience
1.Purpose: Provide easy access to public records, be used as a public communications tool and
provide services; Think:
a.Public information
b.Public engagement
c.Connection to staff, resources, processes
2.Audience: The information on the website will be directed toward five primary groups:
a.General public
b.Tourists
c.Students
d.Businesses
e.Other governmental agencies
6
Roles & Responsibilities
1.Departments:
a.Budgets resources for web page maintenance;
b.Provides current and timely information on the website;
c.Keeps content and links updated on Department webpages.
d.Defines main objectives in developing department/program content.
e.Reviews other comparable websites for inspiration/best practices
2.City Admin & IT:
a.Provides multimedia, messaging and graphic design support;
b.Assists with strategic redesign or restructuring;
c.Maintains SLO City News Center and homepage and Admin/Clerk/Council pages;
d.Maintains and supports City CMS; works with Granicus to provide new tools and
fix issues;
e.Registers and maintains domain name addresses;
f.Applies for and renews any needed Secure Socket Layer (SSL) certificates;
g.Manages user access to website administration and training;
3.Information Technology (IT) Steering Committee: Approves domain name
addresses & website policy changes.
7
Design & Content Principles
1.Use consistent unified or common themes.
2.Provide a user-friendly site.
3.Provide links relative to City.
4.Provide navigational tools.
5.Allow for interactivity.
6.Value of material should be relevant and timely.
7.Graphic files should be relative to site.
8.Allow for search capabilities.
9.Track analytics per department.
10.Simplicity.
8
Maintenance & Implementation
1.Identify information providers and editors
2.Adhere to a process for periodic review of its web pages for relevance
and user interest. Keep info current by updating it regularly.
3.Provide accurate and relevant information that is applicable to users.
4.Maintain a consistent look with the page layout.
5.Develop and monitor feedback and make necessary changes
9
Website Style Guide Overview
1.Colors
2.Typography (text/font)
3.Buttons and icons
4.Images (captions and dimensions)
5.Widgets
10
Website CMS Instructions
1.Logging in
2.Help for pages
3.Tutorial videos
4.Components overview
5.Editing pages
6.Adding images (required: alt tags)
1
Website Training 101
Editing and providing content for slocity.org
2
Today’s Training
1.Introductions
2.Website Policy Overview
3.Website Style Guide Overview
4.Website Content Management System (CMS) Instructions
5.Monsido: Tool to help you make your content accessible and readable
3
Introductions
1.Name
2.Role/title
3.Experience with website content or editing
4
Website Policy Overview
1.Purpose, target audience
2.Roles & Responsibilities
3.Design & Content Principles
4.Maintenance & Implementation
5
Purpose, target audience
1.Purpose: Provide easy access to public records, be used as a public communications tool and
provide services; Think:
a.Public information
b.Public engagement
c.Connection to staff, resources, processes
2.Audience: The information on the website will be directed toward five primary groups:
a.General public
b.Tourists
c.Students
d.Businesses
e.Other governmental agencies
6
Roles & Responsibilities
1.Departments:
a.Budgets resources for web page maintenance;
b.Provides current and timely information on the website;
c.Keeps content and links updated on Department webpages.
d.Defines main objectives in developing department/program content.
e.Reviews other comparable websites for inspiration/best practices
2.City Admin & IT:
a.Provides multimedia, messaging and graphic design support;
b.Assists with strategic redesign or restructuring;
c.Maintains SLO City News Center and homepage and Admin/Clerk/Council pages;
d.Maintains and supports City CMS; works with Granicus to provide new tools and
fix issues;
e.Registers and maintains domain name addresses;
f.Applies for and renews any needed Secure Socket Layer (SSL) certificates;
g.Manages user access to website administration and training;
3.Information Technology (IT) Steering Committee: Approves domain name
addresses & website policy changes.
7
Maintenance & Implementation
1.Identify information providers and editors
2.Adhere to a process for periodic review of its web pages for relevance
and user interest. Keep info current by updating it regularly.
3.Provide accurate and relevant information that is applicable to users.
4.Maintain a consistent look with the page layout.
5.Develop and monitor feedback and make necessary changes
8
Website Style Guide Overview
1.Colors
2.Typography (text/font)
3.Buttons & Icons
4.Images (captions and dimensions)
5.Widgets
Style Guide elements
9
Website Style Guide Overview
Colors
10
Website Style Guide Overview
Typography (text/font)
11
Website Style Guide Overview
Buttons & Icons
Interior Image Button Example from Utilities webpage
12
Website Style Guide Overview
Images (captions & dimensions)
Calendar Tile
300 x 225 px
or
230 x 170px
Featured
Page Image
900 x 300 px
13
Website Style Guide Overview
Widgets
Interior Page Spotlight
Image Size:364w x 250h px
News & Events widget
14
Design & Content Principles
1.Use consistent unified or common themes.
2.Provide a user-friendly site.
3.Provide links related to the City and its services.
4.Provide navigational tools.
5.Allow for interactivity.
6.Ensure relevance and timeliness.
7.Follow brand standards.
8.Allow for search capabilities.
9.Track analytics per department.
10.Keep it simple.
15
Content Accessibility Basics
1.Provide alt text for images
2.Caption video and audio
3.Ensure text content is grammatically correct
4.Do not rely on color as a navigational tool or as the sole way to
differentiate items. Provide sufficient color contrast
5.Use built-in headings properly
CDD Pages with failing accessibility checks: 88
16
Content Accessibility Basics
1.Provide alt text for images
2.Caption video and audio
3.Ensure text content is grammatically correct
4.Do not rely on color as a navigational tool or as the sole way to
differentiate items. Provide sufficient color contrast
5.Use built-in headings properly
17
Current Readability Score: CDD Content
Citywide score: 50.1% at college level
18
Analytics – Last 90 Days
Most Viewed CDD Pages
1.CDD Homepage
2.Cannabis
3.Planning & Zoning
4.Zoning
5.Permit Forms & Applications
6.Building Safety
7.Affordable Housing
8.Environmental Review Documents
9.Housing
10.Documents and Codes
Least Viewed CDD Pages
1.Miscellaneous CDD Documents
2.Four Creeks Rezoning Project
3.Lead and Asbestos Information
4.Technical Appendices
5.Mid Higuera Area
6.Avila Ranch Draft EIR
7.Zoning Regulations Update Workshop
8.Dalidio Annexation
9.Foothill Area
10.Madonna Area
SW1
Slide 18
SW1 [@Iriarte, Juanita] please flesh this out
Szentesi, Whitney, 2024-01-16T18:01:16.505
IJ1 0 [@Szentesi, Whitney] will do!
Iriarte, Juanita, 2024-01-16T18:06:02.108
19
Website CMS Instructions
1.Logging in
2.Help for pages
3.Tutorial videos
4.Components overview
5.Editing pages
6.Adding images (required: alt tags)
137-1
Web Policy
OVERVIEW
Purpose. The City’s web site will provide easy access to public records, be used as a public
communications tool and provide services by:
Providing easy electronic access to public information for use by the target audience.
Providing the public with an alternative means of communicating with City officials and
staff.
Enhancing delivery and awareness of public services and facilitate a process for public
inquiry.
Providing an electronic forum for discussions.
Providing a 24-hour City Hall.
Keeping current with changing technology.
Providing a web site that includes a page for all City departments.
Establishing guidelines to ensure a unifying theme to the web page while allowing for
different departmental information needs.
Target Audience. The information on the web site will be directed toward five primary groups:
the general public, tourists, students, businesses and other governmental agencies.
Contents. A broad range of information will be accessible through the City web site including
(but not limited to):
General information about City government
Department information
City employment information
Economic development opportunities
Emergency information
Agendas, minutes, and staff reports
Municipal code
General plan
Financial plan, comprehensive annual financial report, and other fiscal information
Major policy documents (Parking Plan, Urban Water Plan, etc.)
Advisory body information (summary, members, openings, applications)
Links to: Chamber/Visitors Bureau, other government agencies, library, transportation
information and news.
Web Policy
137-2
POLICY ORGANIZATION
The web policy is comprised of four key components:
Design
Development
Implementation
Maintenance
DESIGN
The design component is the conceptual development of look and format; it includes scope of
information and identification of how page will be accessed. It is the vision as well as the
specifications. The City will strive for the highest degree of professionalism and the best use of
current technologies in its web sites. Departments should use a variety of resources (information
and technology) and should apply the following basic design principles:
Content
Use consistent unified or common themes. Bring all pages in sync with the entire web site
while allowing some level of individuality and/or functionality between
departments/divisions. The City will develop a basic shell with modestly sized banner
graphics or logos, signature icons and action buttons as base design.
Provide a user-friendly site. Use logical and intuitive links. Design to use on both major
web browsers and keep in mind non-graphical browsers as well. Do not overwhelm the user
with clutter.
Provide links relative to City. This includes internal as well as external links:
• External. Links to other web sites should be chosen for their ability to provide
information that is consistent with the purpose and mission statement of this policy and to
address the target audience. Links must have a clear City business related purpose and
should be made only to other governmental agencies or 501c-3 non-profit organizations.
Exceptions require City Manager approval. Providing links to web pages of other
independent organizations does not equal an endorsement of that organization, its web
page or its mission.
• Internal. Include link to City home page on every page. Minimize the number of links
on each page.
Provide navigational tools. Include graphic navigation buttons or bars leading forward, back
and to the original index on deeper-level pages.
Web Policy
137-3
Allow for interactivity. Include e-mail response, surveys, feedback, forms, etc.
Value of material should be relevant and timely. Keep all text reasonably short and to the
point. Proofread and edit carefully.
Graphic files should be relative to site. Design with care to allow for quickest loading.
Allow for search capabilities. Use existing search engines and/or create City database
within home site.
Track page hits per department. Locate hit counter unobtrusively at bottom of page.
Simplicity. Keep page address (URL) short and simple.
Responsibilities
Department Heads. Ensure that all links are relevant and appropriate, and within the
guidelines established by other City policies.
Information Technology (IT) Steering Committee. Approves domain name addresses.
Information Providers Group. This is a new ongoing support group with representatives
from each department who will assume the duties of webmaster and perform at least an
annual review of the site.
IT. Maintains and supports City web servers; registers and maintains domain name
addresses; applies for and renews any needed Secure Socket Layer (SSL) certificates; and
manage user access to website administration.
DEVELOPMENT
This area defines the process of creating the web pages using design guidelines and level of
professional assistance needed.
Content
Development of the City’s web site should cover some basic components that will have purpose
and information relevant to what the site users are looking for.
Responsibilities
Each City department should have information available on the web.
Each departmental or division site should define their main objectives in developing their
site.
Web Policy
137-4
Departments are encouraged to contact other comparable web sites in other municipalities for
methods on user feedback, staff responsiveness, etc.
Any applications that provide services via the City’s website must be reviewed and approved
by IT during the development stage of the application and before integration with the City’s
website.
Community Needs
Assessments should be accomplished to determine the value of what should be on the web page.
Information should be relative, easy to find, timely, interactive (if possible), accessible and easy
to navigate.
Site Development Issues
This includes identification of department services; documents that are frequently requested by
the public can be made available for downloading by users; launch departmental surveys; and
other related needs.
Other Resources
Local agencies – Downtown Association, Chamber of Commerce, Convention and Visitor’s
Bureau, Cal Poly, County of San Luis Obispo, Cuesta College – should be contacted for their
participation on the site either through information or linkages.
IMPLEMENTATION
The Implementation phase identifies a schedule and process for completing the web page
project; who is responsible for what aspects; administrative reviews; and priorities for
implementation.
Promotion. Promoting the City’s domain address needs to be accomplished as close to or at the
time implementation occurs. Suggested methods include use of the City’s web address on
letterheads, business cards, correspondence; City mailings/publications (utility bills, parks &
recreation brochure); news releases, etc.
Budget. Budgetary considerations for the City’s web site should include initial costs of creating
site files; initial and ongoing costs of domain name ownership; costs of any licensing or images,
trademarks, name hosting, etc. These costs will be funded through the organization-wide web
account along with initial training for each department. Departments are responsible for
ensuring that adequate resources are available in their department budgets to develop and
maintain their web pages.
Responsibilities
Department heads will need to identify who will be serve as their Information Provider to
provide the new site HTML files; structure and archive files; upload files to the site; clean-
Web Policy
137-5
up site when completed; how the design will be determined to link to the City’s main home
page; add the departmental site to the City’s main home page; and when needed, contract for
technical assistance.
Each department will assume responsibility for the content on their web page and keep the
information current and timely.
Authority
Department heads are authorized to approve information that goes on their department’s web
pages.
City Manager approval is required for items on the City’s main web page.
Response. User activity should be tracked at each department site in the form of number of raw
hits, registration of home pages with search engine providers, number of e-mails received and
number of files downloaded by users.
Testing. All pages should be tested for compatibility with multiple platforms before
implementation.
MAINTENANCE
The maintenance component of the City’s web policy establishes and clarifies on-going
responsibilities for departments with web pages. However, no one component of the policy
(design, development, implementation or maintenance) stands alone. While performing
maintenance/monitoring-type activities, which may be more clerical in nature, it may become
apparent that the web page appearance or character needs to be “refreshed,” which would
necessitate re-designing a page. The City will provide software to make updates simple.
The following establishes the key components of the maintenance function:
Responsibilities. Each department is responsible for maintaining their own web page.
Information must be kept current by updating regularly and timely.
Accuracy and relevance of information provided is essential.
All information updates should contain the current date so both the user and provider can
easily determine its applicability.
Information added to a web page must maintain a consistent look with the page design.
A professional consultant will provide initial maintenance training and a specified level of
on-going technical support for each department.
Web Policy
137-6
Budget. Each department is responsible for adequately budgeting resources for web page
maintenance.
Each department will designate staff with web page maintenance as a part of their regular
workload.
Each department must commit to providing adequate financial resources for training staff to
obtain and maintain technical expertise for on-going web page support.
The organization-wide account will be used to fund initial maintenance training and the on-
going technical support provided by the professional consultant.
Review. Each department should develop a process for periodic review of its web page for
relevance and user interest.
Pages that are visited infrequently should be revised or eliminated.
Links should be periodically reviewed for relevance and tested for operational accuracy.
Feedback. Maintaining the department’s web page includes monitoring the interactive feedback
vehicle.
User surveys or other interactive methods should be developed to receive opinions on
relevance of web page information, or other information requested.
Each department is responsible for identifying, extracting and directing the user comments
received to the appropriate individuals for follow-up.
• Approved by the City Manager on February 19, 1998
• Revised by the City Manager on January 20, 2010
govAccess- CMS Training Reference Guide
Your training session may have been conducted on one of your sites Dev or Staging or Live
To login, type your web address domain into a web browser and add (/admin)
o EXAMPLE- http://stagec10.visioninternet.net/Admin/
o Use your username and password
The CMS Basic Training session consists of these three objectives: Client will have
o Ability to Navigate and Locate content on the CMS
o Ability to Edit, Build, Save and Publish content within your Content Group
o Ability to Organize content in the components so the content flows to the front-end widgets
The Basic Agenda:
o Dashboard and administration interface overview
o Support Menu and Help buttons
o Intro and overview of Homepage
o Interior page overview
o Site Content tab
Pages
How to find pages in the back end of the CMS
Adding, editing and deleting
Saving, Archiving and Publishing
Image Library- How to Upload
Document Central- How to Upload
Calendar- Overview of the component and how to Create an Event
News- Overview of the component and how to Create a News Story
o Review of Concepts / Discussion
Reminders:
Google Chrome is the preferred browser to use while editing content in the CMS
“Site Preview” shows a functional “Preview of what your content would look like if it is in Published
mode”
To get a site visitor/user experience: Log out, or use an “Incognito” tab in Chrome: ctrl + shift + N
A Basic User can edit content built by and for other users in their Content Group
A Super User can build and edit content for any Content Group
If you delete something, Super Users can restore it by locating it in the Trash
The Image Library and Document Central are NOT filing cabinets
Upload documents in a way that your site visitors would understand (folder, names, key words)
When building content in many components -> Check in the “Show all options” purple banner for more
settings
In the settings tab, assign Tags – Categories, Departments that push your content to the correct pages
(keep in mind: widgets, eNotifications)
A Super User can modify an existing page by dropping a new Widget within the Page Layout
o When added an orange box briefly appears, hover over it immediately and “Rename the Page
Template” or you will have many Page Templates called Basic Page (copy) in your Page
Templates section
Use the Help button, Support Tab, CMS Videos, Online Reference and http://help.visioninternet.com/
before reaching out to Support@granicus.com
govAccess- CMS Training Reference Guide
Glossary of Terms:
Approval Cycle The CMS allows a user to create or edit content, then pass it to another user for
approval before it’s published or live on the site. Once approved, it goes live.
Approvals can be done in one step (that is, a content contributor can create or edit
a piece of content and then also directly publish to show up on the front of the
website) or in 2 or more steps. Workflow is part of the Approval Cycle, meaning a
piece of edited content can also be rejected by an approver preventing the content
from being published.
Category Most content types (Calendar, News, etc.) can have its own set of categories, which
can be created by a user with the proper permissions, and then can be applied to
individual pieces of content (event, News article, etc.) for several purposes.
Categories factor into 1) widget filters (constraints) and 2) which subscription lists
receive certain eNotifications.
Component A section of the CMS designed to manage each CONTENT TYPE respectively, such as
Pages, Images, Documents, News, Events, Directories, Jobs, RFPs, and so on. When
you want to add an event to a page, you must build the event in the Calendar
Component under the Site Content drop down in the back end of the site.
Content Group Every piece of content is built within a Content Group. This indicates which group of
CMS users have oversight permissions, to edit, delete etc. Each Content Group can
have a specified Workflow/Approval Cycle for publishing content too. Content
Groups are generally a department title that designates what group of users can edit
this content. Users can be built to have access to a single content group, or multiple,
but a piece of content (a page, event, or news article) can only belong to a single
Content Group.
Content Review Most items of content can be given a review date (the Parks and Recreation Pool
page must be reviewed 1x a year for updates to the monthly schedule) when a
review date is applied the CMS will notify the designated user, within the CMS and
optionally through email.
Content Type For example: Pages, Images, Documents, News, Events, Jobs, RFPs, and so on.
Department Often misused, this is a tag feature for filtering purposes. The department tags are
universal across components unlike a Category tag which is specific to an individual
component.
eNotifications Site visitors can subscribe to email notifications for news, events, job posts, and RFPs
based on available categories. After content is published a 15-30-minute period to
make edits or cancel before automated distribution (emails sent). If it is January and
you are publishing an event that will happen in March, the CMS will send the
eNotification automatically 6 days in advance of said event unless scheduled
otherwise.
Layout The designated amount of sections to a page. These are options for building a new
Page Template: One Column, Reverse Two Columns, Three Columns, Three Equal
Columns, Two Columns, or Two Equal Columns. The Layout of a Page can’t be
changed.
Locked Content A piece of content remains locked to a CMS user until it is sent forward in the
Approval Cycle/ Publishing process. This prevents multiple users from opening a piece
of content simultaneously. The content can be unlocked by either a Super User or the
most recent editor of the content (the user it is locked to).
Main Navigation The main menu consists of pages built and managed within the Pages component. If
your CMS has an “Advanced Mega Menu” it is possible to nest various widgets in the
Menu drop down.
Publish/Expire Date Any item of content can be automatically published to or expired from the front end
of the site, based on dates assigned. Published date is when it goes live, expired is
when it is removed from the front end and available only to CMS users.
govAccess- CMS Training Reference Guide
Side Navigation A box widget often placed on the left side of a page which displays the navigation
name of other pages and subpages in the same menu.
Page Template Each Page Template is used to build 1 or more Pages in the CMS. A CMS User with the
proper Security Role or a Super User is able to Edit an existing or build a new Page
Template in 2 different ways. There will be a number of default page template options
CMS Users can use to build a new page. Page Templates are available to users based
upon content group, and this access can be adjusted by editing the individual Page
Template. The best Practice way of adjusting Page Templates is in the Configurations
> Page Templates component.
Widget Sections on the pages of the website contain various content blocks called widgets.
These content blocks, or widgets, pull information from components in the back-end
of the website to display it on the front-end website. They can be set to include
specific posts. When creating or editing Page Templates, you will be able to create a
custom combination of widgets to display different types of content, organized on
the same page. Then that template is available for use throughout the site. Each site
widget serves a different purpose and function, and many of them provide numerous
settings that will customize the look and function to meet an individual need. To make
changes to what is displayed in a widget you must > Edit the page where the Widget
Exists > Select the White Wrench of the widget > Adjust the settings > Save and
Publish.
Workflow Set of steps or states (Workflow States) that are applied to a piece of content. These
are linear steps that must be completed in order, and all steps must be completed for
the content to go live on the website. As the content makes its way through the steps,
it may be approved to go forward, or it may be rejected backwards to an earlier
step.
govAccess- CMS Training Reference Guide
Image Scaling – Use .jpg or .png
USE DESKTOP PHOTO EDITOR APPLICATION TO SCALE IMAGES BEFORE UPLOADING TO IMAGE LIBRARY
Content Area Widget 200-500px width – Consider the purpose of the picture
*** When adding image to the Content Area- use % of Content Area instead of
PX size***
Page Banner,
Image Widget
One column page layout: 1024px width
Two column page layout: 500-900px width
Aspect ratio is flexible so decide and crop before uploading.
Photo Album Minimum 640px width by 480px height; Maximum 1024x768px
Aspect ratio: 4x3
Thumbnails,
visionSocial (optional)
Customize text in the
message composer, title
and subtitle sections as
well as switching to a new
image.
Facebook
Large image dimensions – 600 x 315
Small image dimensions – 120 x 120
"Invalid Image" dimensions – less than 120 x 120
Twitter
Large image dimensions:280 x 150
Small image dimensions:120 x 120
"Invalid Image" dimensions: less than 120 x 120
Home Collage/Hero
Image and
1920px wide, height and width depend on your design
Other Specific Need If photos are meant to be viewed full size or downloaded, scale accordingly
Steps to build a responsive and compliant data table:
1 Insert the table and add data; you may need to work with the generated table to adjust size
2 Right-click any cell and open Table Properties
3 On lower left column, for css class, on the dropdown menu, select: TableData
4 i. Click “Accessibility” tab, type number of heading row(s) and/or column(s);
ii. If necessary; Add a Caption about the table;
iii. Verify that “Associate cells with headers” box at bottom is selected;
iv. Click OK
Web Content Accessibility Guidelines (WCAG 2.0 AA)
Your CMS framework is WCAG compliant, it is up to YOU to maintain compliant content
The top 5 things that will cause your site to depreciate in a compliance spectrum:
o Heading Styles
Use the proper order
o Lists- Number Lists and Bullet Lists
Do not copy and paste lists from Word into your website
o Data Tables
Build using the steps outlined above
o Links
Link text should be the subject of where you will go or what you will do when you click
the link
ALL DOCUMENTS AND THE CONTENT THEY CONTAIN MUST ALSO BE COMPLIANT
o Images
Use Alternative Text (ALT Tag) A short description of what is occurring in the image
Icons/images with text- must have an accurate description of the text within the Alt Tag
For examples, guidelines and updated information visit: https://www.w3.org/WAI/standards-
guidelines/wcag/
govAccess- CMS Training Reference Guide
Using the Basic Page Template and editing the Content Area Widget
1. Most Basic Page Templates have 3 sections and 4 widgets built into it:
i. Main Menu
ii. Side Navigation
iii. Page Title
iv. Content Area
Main Menu widget
Side
navigation
widget
Page Title widget
Content area widget
2. To change the content in a
widget, click on wrench icon
on right end of its title bar.
*Note: if the wrench is gray, the
widget cannot be altered.
**Note: If you don’t see the
widgets, make sure you are in
“Edit mode.” You may need to
click (at the top, if
on front end) or (on
purple bar, if on “Review
mode” from back end)
a. If it’s a Content Area
widget, you will be able
to enter text, images,
links, etc. with the
design text editor.
You can also toggle to
HTML if you need to
place an embed code
on the page.
b. If not a Content Area
widget, there will be a
variety of settings to
customize which posts
come from the
components.
3. Beyond the Basic Page Template, if you want another type of content on your page, such
as: news; events; job posts; an eNotifications sign-up; photo albums; or any of the other
components (i.e. Dashboard > Site Content > ), you can add a widget for any of those,
BUT you have to use another template, NOT Basic Template. (You can swap templates
later.) The other templates come with everything on the Basic + a widget for another
component. For example: You want a photo album on your page… A Photo Album
Template has all the basics widgets + Photo Album widget. If you want to further
customize the combination of widgets on your page, you may need to build a Page
Template to include those widgets you want; and swap your page or create your page
with that template.
govAccess- CMS Training Reference Guide
Image Properties
For specifications about scaling images before uploading, refer to “Reference Guide: Image Scaling.”
This guide explains:
How to add an image to through the Image Library shortcut on the Toolbar of the Editor Tool;
How to use Image Properties to change the way the appearance and layout of the image.
You can adjust image display settings, such as dimensions, border, alignment, padding (space around it),
border (optional), alt tag/text, etc.
Note: Thumbnails are designated from a separate selection field, not from within the Editor Tool.
1. The Editor Tool is in one of two places, depending on the component / content type:
a. Pages component — open the Content Area widget (white wrench) to access the Editor Tool
b. Other components — the Details area is the Editor Tool.
2. Note: wherever your cursor is placed in the Editor Tool is where the image will be placed .
On the Toolbar, there is an icon called “Image Library.” It opens a box called Image Manager.
This is a shortcut to the folders and files contained in the Image Library component.
3. On the left column, select the corresponding folder for your image.
4. In the middle column, select the desired image
already stored in that folder. If your image isn’t
there, you can directly upload an image from your
computer to that folder, by clicking Upload New
Images.
5. On the right column, there is a Preview of the
image. (Sometimes browser variables cause this
column to be blank. There’s a workaround ahead
on step 7.) If it is not blank, you can also switch the
tab from Preview to Properties, where you can
adjust the image immediately (details are below), or
you can access the Image Properties as described in step 7.
6. When you click Insert, the image will be shown within the Editor Tool.
7. To access the Image Properties and adjust the image appearance, right-click on the image.
[Right-click means use the right – not left – mouse button to click.]
govAccess- CMS Training Reference Guide
The Properties… are:
a. Choose Image – shows folder path within which image is contained in Image Library. If you need a
different image, do not use this Image Library icon. Instead, cancel and delete this image, and start
over, because changing the path here could force the properties as written to apply improperly to
newly chosen image.
b. Width and Height – set width size in % of Content Area
space. Chain-link icon represents locking / retaining
dimensions ratio. Using px will distort Image in mobile view
c. Image Alignment – click the box containing the tiny
triangle to reveal and select from the five options for
alignment. Text will automatically wrap around the image
on the opposite sides of its alignment.
d. Border Color, Border Width – options to build and display a
border around the image. If you want a border, the width
must be > 0px to display.
e. Top, Bottom, Right, Left – refers to the padding of negative
space between image and text.
f. Alt Text – must be set for content accessibility. If the
image has words in it - the words must be in the Alt Text as well. The Alt Text should be a short description
of the image.
g. Title Text – aka Tool Tip- not necessary for WCAG compliance
h. Long Description – additional details indexed into search engine algorithms for search results. not
necessary for WCAG compliance
i. CSS Class – pre-set design styles can be applied for specific page elements. Generally, there is no need
to apply a CSS Class on the image properties.
govAccess- CMS Training Reference Guide
Swap Page Template
1. Find your page. Click in the yellow. On the Action Menu, select Edit Page Design.
2. Open the Content Area widget – by clicking the white wrench.
3. Toggle the editor view from DESIGN to HTML.
4. Copy the entire HTML text. So as not to rely on the Clipboard (text recently copied and stored)… Paste into a
plain text editor, like Windows Notepad. – NOT Microsoft Word, as it adds formatting.
It’s smart to save the .txt file, too, in case your computer shuts down spontaneously.
5. Save or don’t. Return to the Pages component. Find your page. Click in the yellow.
On the Action Menu, select Swap Page Template.
A reminder message appears:
If you saved the HTML text, click Continue.
6. Choose the Page Template you want. Click Save.
govAccess- CMS Training Reference Guide
7. On the Action Menu, select Edit Page Design.
8. Open the Content Area widget – by clicking the white wrench.
9. Toggle the editor view from DESIGN to HTML.
10. Paste the copied HTML text into the text editor. Click Save.
11. Complete your page. As available, click Save, Save & Approve, or Save & Publish.
govAccess- CMS Training Reference Guide
List of Components
All Components have corresponding widgets. CMS User access and abilities to these Components is based
upon Content Groups, Workflows, Content Roles and Security Roles. Most of this is taken care in the building
blocks of your site/custom built by your PM.
Found in the Site Content drop down. Some will NOT be available for ALL clients
Pages
Image Library
Document Central
Calendar
News
Business Directory
Enotifications
Facility Directory
FAQs
Forms
Forms and Surveys
Job Posts/ Application Manager (not available for all Clients)
Online Payments (not available for all Clients)
Online Polls
Photo Album
RFP Post
RSS Feeds
Service Directory
Service Requests
Social Media
Staff Directory
List of Widgets
Some of these Widgets will NOT be available for ALL clients
Site Basics- All widgets exist on the Basic Page Template already (no need for the Redirect)
Content Area
Main Menu
Page Title
Redirect- Not necessary to add to a Page Template- Redirect already exists as an option in Page Details
Side Navigation Menu
Widgets A-E
Accordion
Blog Archives- Only Available if you have visionPulse
Blog Related Posts- Only Available if you have visionPulse
Blog Two-Column List- Only Available if you have visionPulse
Business Directory Box
Business Directory List
Calendar Advanced Grid- Can display events with a color scheme if Categories have set colors
Calendar Box
Calendar Grid
Calendar List
govAccess- CMS Training Reference Guide
Calendar Meeting List
Calendar Mini Grid
Calendar Tile
Content Filter Widget- Accessory widget for searching within other widgets added to Page Template
Custom Content- Useful for building own custom design- Advanced Users
Document Folder
Document Folder Box
Document List
Document List Box
eNotification-Could be a Standalone widget on a page or an “Accessory” widget added to a page
displaying Events, News, RFPs or Job Posts
Widgets F-I
Facebook Feed
Facility Directory Formatted List
Facility Directory Multi Select Categories Map
Facility Directory Standard Map
Facility Directory Table List
FAQ Box
FAQ List
Form Builder Detail- Display a single Form built in the Forms Component
Form Builder List- Displays a List of Forms built in the Forms Component
Form Detail- Display a single Form/Survey built in the Forms and Surveys Component (could be named
Surveys)
Form List- Displays a List of Forms and Surveys built in the Forms and Surveys Component (could be
named Surveys)
Full Width Banner- Display Images at the top of your interior pages
Image Random
Image Rotate
Interior Collage with Captions
Interior Image Buttons
Interior Page Spotlight
Widgets J-Q
Job Applicants- Only available for clients with Application Manager
Job Posts Box
Job Posts List
Meeting Archiver- Only available for clients with Meetings Manager
Meeting Box- Only available for clients with Meetings Manager
Meeting Items Box- Only available for clients with Meetings Manager
Meeting Items List- Only available for clients with Meetings Manager
Member Login Bar (For AD Only)- often already applied to a custom page built by your PM
News Box
News List
News Tiles
Online Polls Details- Displays a single Poll built in the Polls component
Online Polls List- Displays a list of Polls
Photo Album
Photo Album List
Widgets R-Z
Recent Topics- Only Available if you have visionPulse
RFP Post Box
RFP Post List
RSS Feed List View
govAccess- CMS Training Reference Guide
RSS Feed Viewer
Search- A standalone widget. Unnecessary to add to a new page template- search should already be
set up by your PM
Service Directory Box
Service Directory List
Service Request- A standalone widget. Unnecessary to add to a new page template
Site Map- A standalone widget. Unnecessary to add to a new page template
Staff Directory Box
Staff Directory List
Tabbed Widget
Tag Cloud Widget- often only Available if you have visionPulse
Topic Grid- Only Available if you have visionPulse
Twitter Feed
Vision Search-
Vision Search Home Widget-
Website Login Bar- Member Group access point
Yahoo Weather Javascript Widget
CMS Training Reference Guide
1
Your training session may have been conducted on one of your sites Dev or Staging or Live
• To login, type your web address domain into a web browser and add (/admin)
o Example: http://dev7.visioninternet.com/Admin
o Use your username and password
• The CMS Basic Training session consists of these three objectives: Client will have
o Ability to Navigate and Locate content on the CMS
o Ability to Edit, Build, Save and Publish content within your Content Group
o Ability to Organize content in the components so the content flows to the front -
end widgets
• The Basic Agenda:
o Dashboard and administration interface overview
o Support Menu and Help buttons
o Intro and overview of Homepage
o Interior page overview
o Site Content tab
▪ Pages
• How to find pages in the back end of the CMS
• Adding, editing and deleting
• Saving, Archiving and Publishing
▪ Image Library- How to Upload
▪ Document Central- How to Upload
▪ Calendar- Overview of the component and how to Create an Event
▪ News- Overview of the component and how to Create a News Story
o Review of Concepts / Discussion
Reminders:
• Google Chrome is the preferred browser to use while editing content in the CMS
• “Site Preview” shows a functional “Preview of what your content would look like if it is
in Published mode”
• To get a site visitor/user experience: Log out, or use an “Incognito” tab in Chrome: ctrl +
shift + N
• A Basic User can edit content built by and for other users in their Content Group
• A Super User can build and edit content for any Content Group
• If you delete something, Super Users can restore it by locating it in the Trash
• The Image Library and Document Central are NOT filing cabinets
• Upload documents in a way that your site visitors would understand (folder, names, key
words)
• When building content in many components -> Check in the “Show all options” purple
banner for more settings
• In the settings tab, assign Tags – Categories, Departments that push your content to the
correct pages
(keep in mind: widgets, eNotifications)
CMS Training Reference Guide
2
Glossary of Terms
Approval Cycle The CMS allows a user to create or edit content, then pass it to another user for
approval before it’s published or live on the site. Once approved, it goes live.
Approvals can be done in one step (that is, a content contributor can creat e or edit a
piece of content and then also directly publish to show up on the front of the
website) or in 2 or more steps. Workflow is part of the Approval Cycle, meaning a
piece of edited content can also be rejected by an approver preventing the content
from being published.
Category Most content types (Calendar, News, etc.) can have its own set of categories, which
can be created by a user with the proper permissions, and then can be applied to
individual pieces of content (event, News article, etc.) for several purposes.
Categories factor into 1) widget filters (constraints) and 2) which subscription lists
receive certain eNotifications.
Component A section of the CMS designed to manage each CONTENT TYPE respectively, such as
Pages, Images, Documents, News, Events, Directories, Jobs, RFPs, and so on. When
you want to add an event to a page, you must build the event in the Calendar
Component under the Site Content drop down in the back end of the site.
Content Group Every piece of content is built within a Content Group. This indicates which group of
CMS users have oversight permissions, to edit, delete etc. Each Content Group can
have a specified Workflow/Approval Cycle for publishing content too. Content
Groups are generally a department title that designates what group of users can edit
this content. Users can be built to have access to a single content group, or multiple,
but a piece of content (a page, event, or news article) can only belong to a single
Content Group.
Content Review Most items of content can be given a review date (the Parks and Recreation Pool
page must be reviewed 1x a year for updates to the monthly schedule) when a
review date is applied the CMS will notify the designated user, within the CMS and
optionally through email.
Content Type For example: Pages, Images, Documents, News, Events, Jobs, RFPs, and so on.
Department Often misused, this is a tag feature for filtering purposes. The department tags are
universal across components unlike a Category tag which is specific to an individual
component.
eNotifications Site visitors can subscribe to email notifications for news, events, job posts, and RFPs
based on available categories. After content is published a 15-30-minute period to
make edits or cancel before automated distribution (emails sent). If it is January and
you are publishing an event that will happen in March, the CMS will send the
eNotification automatically 6 days in advance of said event unless scheduled
otherwise.
Layout The designated amount of sections to a page. These are options for building a new
Page Template: One Column, Reverse Two Columns, Three Columns, Three Equal
Columns, Two Columns, or Two Equal Columns. The Layout of a Page can’t be
changed.
Locked Content A piece of content remains locked to a CMS user until it is sent forward in the
Approval Cycle/ Publishing process. This prevents multiple users from opening a piece
of content simultaneously. The content can be unlocked by either a Super User or the
most recent editor of the content (the user it is locked to).
Main Navigation The main menu consists of pages built and managed within the Pages component. If
your CMS has an “Advanced Mega Menu” it is possible to nest various widgets in the
Menu drop down.
CMS Training Reference Guide
3
Publish/Expire Date Any item of content can be automatically published to or expired from the front end
of the site, based on dates assigned. Published date is when it goes live, expired is
when it is removed from the front end and available only to CMS users.
Side Navigation A box widget often placed on the left side of a page which displays the navigation
name of other pages and subpages in the same menu.
Page Template Each Page Template is used to build 1 or more Pages in the CMS. A CMS User with the
proper Security Role or a Super User is able to Edit an existing or build a new Page
Template in 2 different ways. There will be a number of default page template
options CMS Users can use to build a new page. Page Templates are available to
users based upon content group, and this access can be ad justed by editing the
individual Page Template. The best Practice way of adjusting Page Templates is in the
Configurations > Page Templates component.
Widget Sections on the pages of the website contain various content blocks called widgets.
These content blocks, or widgets, pull information from components in the back-end
of the website to display it on the front-end website. They can be set to include
specific posts. When creating or editing Page Templates, you will be able to create a
custom combination of widgets to display different types of content, organized on
the same page. Then that template is available for use throughout the site. Each site
widget serves a different purpose and function, and many of them provide numerous
settings that will customize the look and function to meet an individual need. To
make changes to what is displayed in a widget you must > Edit the page where the
Widget Exists > Select the White Wrench of the widget > Adjust the settings > Save
and Publish.
Workflow Set of steps or states (Workflow States) that are applied to a piece of content. These
are linear steps that must be completed in order, and all steps must be completed for
the content to go live on the website. As the content makes its way through the
steps, it may be approved to go forward, or it may be rejected backwards to an
earlier step.
Image Scaling – Use .jpg or .png
USE DESKTOP PHOTO EDITOR APPLICATION TO SCALE IMAGES BEFORE UPLOADING TO IMAGE LIBRARY
Content Area Widget 200-500px width – Consider the purpose of the picture
*** When adding image to the Content Area- use % of Content Area instead of PX
size***
Page Banner,
Image Widget
One column page layout: 1024px width
Two column page layout: 500-900px width
Aspect ratio is flexible so decide and crop before uploading.
Photo Album Minimum 640px width by 480px height; Maximum 1024x768px
Aspect ratio: 4x3
Thumbnails,
visionSocial (optional)
Customize text in the
message composer, title
and subtitle sections as
well as switching to a new
image.
Facebook
Large image dimensions – 600 x 315
Small image dimensions – 120 x 120
"Invalid Image" dimensions – less than 120 x 120
Twitter
Large image dimensions:280 x 150
Small image dimensions:120 x 120
"Invalid Image" dimensions: less than 120 x 120
Home Collage/Hero Image
and
1920px wide, height and width depend on your design
Other Specific Need If photos are meant to be viewed full size or downloaded, scale accordingly
CMS Training Reference Guide
4
Steps to build a responsive and compliant data table:
1 Insert the table and add data; you may need to work with the generated table to adjust size
2 Right-click any cell and open Table Properties
3 On lower left column, for css class, on the dropdown menu, select: TableData
4 i. Click “Accessibility” tab, type number of heading row(s) and/or c olumn(s);
ii. If necessary; Add a Caption about the table;
iii. Verify that “Associate cells with headers” box at bottom is selected;
iv. Click OK
Web Content Accessibility Guidelines (WCAG 2.0 AA)
• Your CMS framework is WCAG compliant, it is up to YOU to maintain compliant content
• The top 5 things that will cause your site to depreciate in a compliance spectrum:
o Heading Styles
▪ Use the proper order
o Lists- Number Lists and Bullet Lists
▪ Do not copy and paste lists from Word into your website
o Data Tables
▪ Build using the steps outlined above
o Links
▪ Link text should be the subject of where you will go or what you will do
when you click the link
▪ ALL DOCUMENTS AND THE CONTENT THEY CONTAIN MUST ALSO BE
COMPLIANT
o Images
▪ Use Alternative Text (ALT Tag) A short description of what is occurring in
the image
▪ Icons/images with text- must have an accurate description of the text
within the Alt Tag
• For examples, guidelines and updated information visit:
https://www.w3.org/WAI/standards-guidelines/wcag/
Working with a BASIC PAGE TEMPLATE
5
1. Most Basic Page Templates have 3 sections and 4 widgets built into it:
i. Main Menu
ii. Side Navigation
iii. Page Title
iv. Content Area
Main Menu widget
Side
navigation
widget
Page Title widget
Content area widget
2. To change the content in a
widget, click on wrench icon on
right end of its title bar.
*Note: if the wrench is gray, the
widget cannot be altered.
**Note: If you don’t see the
widgets, make sure you are in
“Edit mode.” You may need to
click (at the top, if
on front end) or (on
purple bar, if on “Review
mode” from back end)
a. If it’s a Content Area
widget, you will be able
to enter text, images,
links, etc. with the
design text editor.
You can also toggle to
HTML if you need to
place an embed code
on the page.
b. If not a Content Area
widget, there will be a
variety of settings to
customize which posts
come from the
components.
3. Beyond the Basic Page Template, if you want another type of content on your page, such as:
news; events; job posts; an eNotifications sign-up; photo albums; or any of the other
components (i.e. Dashboard > Site Content > ), you can add a widget for any of those, BUT
you have to use another template, NOT Basic Template. (You can swap templates later.) The
other templates come with everything on the Basic + a widget for another component. For
example: You want a photo album on your page… A Photo Album Template has all the basics
widgets + Photo Album widget. If you want to further customize the combination of widgets on
your page, you may need to build a Page Template to include those widgets you want; and
swap your page or create your page with that template.
Quick Guide: IMAGE PROPERTIES
6
For specifications about scaling images before uploading, refer to “Reference Guide: Image Scaling.”
This guide explains:
• How to add an image to through the Image Library shortcut on the Toolbar of the Editor Tool;
• How to use Image Properties to change the way the appearance and layout of the image.
You can adjust image display settings, such as dimensions, border, alignment, padding (space
around it), border (optional), alt tag/text, etc.
Note: Thumbnails are designated from a separate selection field, not from within the Editor Tool.
1. The Editor Tool is in one of two places, depending on the component / content type:
a. Pages component — open the Content Area widget (white wrench) to access the Editor Tool
b. Other components — the Details area is the Editor Tool.
2. Note: wherever your cursor is placed in the Editor Tool is where the image will be placed .
On the Toolbar, there is a tool called “Image Library.” It opens a box called Image Manager.
This is a shortcut to the folders and files contained in the Image Library component.
3. On the left column, select the corresponding folder for your image.
4. In the middle column, select the desired
image already stored in that folder. If your
image isn’t there, you can directly upload
an image from your computer to that folder,
by clicking Upload New Images.
5. On the right column, there is a Preview of
the image. (Sometimes browser variables
cause this column to be blank. There’s a
workaround ahead on step 7.) If it is not
blank, you can also switch the tab from
Preview to Properties, where you can
adjust the image immediately (details are
below), or you can access the Image
Properties as described in step 7.
6. When you click Insert, the image will be shown within the Editor Tool.
7. To access the Image Properties and adjust the image appearance, right-click on the image.
[Right-click means use the right – not left – mouse button to click.]
Quick Guide: IMAGE PROPERTIES
7
The Properties… are:
a. Choose Image – shows folder path within which
image is contained in Image Library. If you need a
different image, do not use this Image Library icon.
Instead, cancel and delete this image, and start
over, because changing the path here could force
the properties as written to apply improperly to
newly chosen image.
b. Width and Height – set width size in % of Content
Area space. Chain-link icon represents locking /
retaining dimensions ratio.
c. Image Alignment – click the box containing the tiny
triangle to reveal and select from the five options for
alignment. Text will automatically wrap around the
image on the opposite sides of its alignment.
d. Border Color, Border Width – options to build and
display a border around the image. If you want a
border, the width must be > 0px to display.
e. Top, Bottom, Right, Left – refers to the padding of negative space between image and text.
f. Alt Text – must be set for content accessibility. If the image has words in it-the words must be in
the Alt Text as well. The Alt Text should be a short description of the image.
g. Title Text – aka Tool Tip- not necessary for WCAG compliance
h. Long Description – additional details indexed into search engine algorithms for search results.
not necessary for WCAG compliance
i. CSS Class – pre-set design styles can be applied for specific page elements. Generally, there is
no need to apply a CSS Class on the image properties.
Quick Guide: SWAP PAGE TEMPLATE
8
1. Find your page. Click in the yellow. On the Action Menu, select Edit Page Design.
2. Open the Content Area widget – by clicking the white wrench.
3. Toggle the editor view from DESIGN to HTML.
4. Copy the entire HTML text. So as not to rely on the Clipboard (text recently copied and stored)…
Paste into a plain text editor, like Windows Notepad. – NOT Microsoft Word, as it adds formatting.
It’s smart to save the .txt file, too, in case your computer shuts down spontaneously.
5. Save or don’t. Return to the Pages component. Find your page. Click in the yellow.
On the Action Menu, select Swap Page Template.
A reminder message appears:
If you saved the HTML text, click Continue.
6. Choose the Page Template you want. Click Save.
Quick Guide: SWAP PAGE TEMPLATE
9
7. On the Action Menu, select Edit Page Design.
8. Open the Content Area widget – by clicking the white wrench.
9. Toggle the editor view from DESIGN to HTML.
10. Paste the copied HTML text into the text editor. Click Save.
11. Complete your page. As available, click Save, Save & Approve, or Save & Publish.
Szentesi, Whit
Public Communications Manager
Making Your Content Accessible
How do you get star ted?
Accessible communication is an umbrella term to describe communication that is
clear, direct, easy to understand and that can be made available in multiple formats
so that all users have equal access. Accessible communication benefits all audiences
by making information clear, direct and easy to understand. It takes into
consideration the various barriers to accessing information, and provides
opportunities for feedback.
ACCESSIBILIT Y TRAINING VIDEOS
The following links are to videos offered by section508.gov and provide City staff
with training
Watch: Creating Accessible Media
Duration: 5m 41s | 1-Part Video Tutorial
Get a brief overview on how to develop high quality audio, video, and multimedia
that is accessible to users who cannot see visual information, or hear information
conveyed using sound. Learn about text-based equivalents, captions and
synchronized audio descriptions.
3/20/26, 9:51 AM Making Your Content Accessible
https://slocitycloud.sharepoint.com/sites/SLOHub/Administration/Communications/SitePages/Making-Your-Content-Accessible.aspx 1/3
Watch: An Introduction to Universal Design for Content Creators
Duration: 18m 21s | 4-Part Video Series
This four-part video series provides an introduction to Universal Design for content
creators, developers, managers and procurement professionals. It includes resources,
tips, and tricks for designing products and environments to be usable by all people,
to the greatest extent possible, without the need for adaptation or specialized
design. Get more helpful information on universal design.
Watch: Accessible Name & Description Inspector (ANDI) Tool Over view
Duration 31m 11s | 18-Part Video Series
Get a basic overview on how to use the Accessible Name & Description Inspector
tool (ANDI) to test websites and web-based applications for accessibility. ANDI is a
free tool developed by the Social Security Administration.
Watch: How to Test Color Contrast using the Color Contrast Analyser
Duration 2m 33s | 1-Part Video Tutorial
Learn how to use The Paciello Group’s Color Contrast Analyzer (CCA) to ensure the
contrast ratio between text, and images of text, and it's background is sufficient. CCA
is used to inspect color contrast when contrast cannot programmatically
identified by ANDI
Accessibility for Microsoft Applications
Watch: How to Make an Accessible Document in Microsoft Word
Duration 59m 21s | 14-Part Video Series
The Accessible Electronic Document Community of Practice (AED CoP) created this
series of videos to explain and demonstrate the minimum steps needed to ensure
your Microsoft Word document is Section 508 conformant.
Watch: How to Test and Remediate PDFs for Accessibility Using Adobe Acrobat DC
Duration 63m 51s | 5-Part Video Series
The Accessible Electronic Document Community of Practice (AED CoP) created this
series of videos to explain and demonstrate the minimum steps needed to ensure
your PDF is Section 508 conformant.
Watch: How to Author and Test Microsoft PowerPoint Presentations for
Accessibility
Duration 43m 54s | 14-Part Video Series
The Accessible Electronic Document Community of Practice (AED CoP) created this
series of videos to explain and demonstrate the minimum steps needed to ensure
your Microsoft PowerPoint presentation is Section 508 conformant.
3/20/26, 9:51 AM Making Your Content Accessible
https://slocitycloud.sharepoint.com/sites/SLOHub/Administration/Communications/SitePages/Making-Your-Content-Accessible.aspx 2/3
Watch: How to Make an Accessible Spreadsheet in Microsoft Excel
Duration 30m 50s | 12-Part Video Series
The Accessible Electronic Document Community of Practice (AED CoP) created this
series of videos to explain and demonstrate the minimum steps needed to ensure
your Microsoft Excel spreadsheet is Section 508 conformant.
3/20/26, 9:51 AM Making Your Content Accessible
https://slocitycloud.sharepoint.com/sites/SLOHub/Administration/Communications/SitePages/Making-Your-Content-Accessible.aspx 3/3
Web Content 101 Attendance_032024
Name Status
Initiative
Name Progress Work Email Manager
Assignment
Date
Completion
Date
Recommendation
Category
Christine Brocco Completed 0 / 0 cbrocco@slocity.org Jennifer Rice 03/18/2024
03/18/2024
8:23 PM UTC
Geraldine Seng-Talbot Completed 0 / 0 gseng@slocity.org Matthew "Matt" Anderson 05/07/2024
05/07/2024
4:12 PM UTC
Geraldine Seng-Talbot Completed 0 / 0 gseng@slocity.org Matthew "Matt" Anderson 05/07/2024
05/07/2024
4:12 PM UTC
Geraldine Seng-Talbot Completed 0 / 0 gseng@slocity.org Matthew "Matt" Anderson 05/07/2024
05/07/2024
4:12 PM UTC
Web Content 101 Attendance_042623
Name Status
Initiative
Name Progress Work Email Manager
Assignment
Date
Completion
Date
Recommendation
Category
Alexander "Alex" Fuchs Completed 1 / 1 afuchs@slocity.org Jennifer Rice 04/13/2023
04/26/2023
4:00 PM UTC
Adam Fukushima Completed 1 / 1 afukushi@slocity.org Jennifer Rice 04/13/2023
04/26/2023
4:00 PM UTC
Hannah Hanh Completed 1 / 1 hhanh@slocity.org Rachel Cohen 04/13/2023
04/26/2023
4:00 PM UTC
Lisa Russell Deleted 0 / 1 lrussell@slocity.org Lily Honer-Hollstien 04/19/2023
Keith Schwanemann Completed 1 / 1 kschwane@slocity.org Christopher "Chris" Lehman 04/14/2023
04/26/2023
4:00 PM UTC
Whitney Szentesi Withdrawn 0 / 1 wszentes@slocity.org Gregory "Greg" Hermann 04/12/2023
Web Content 101 Attendance_051723
Name Status
Initiative
Name Progress Work Email Manager
Assignment
Date
Completion
Date
Recommendation
Category
Jacqueline "Jacqui" Clark-Charlesworth Not Started 0 / 1 JClark@slocity.org Laura Fiedler 05/08/2023
Andrea Colunga Lopez Completed 1 / 1 AColunga@slocity.org Teresa Purrington 04/17/2023
05/17/2023
4:00 PM UTC
Rebecca Cox Not Started 0 / 1 rcox@slocity.org Joshua "Josh" Erquiaga 04/13/2023
Amy Fletcher Completed 1 / 1 afletche@slocity.org Kate Auslen 04/19/2023
05/17/2023
4:00 PM UTC
Lisa Russell Withdrawn 0 / 1 lrussell@slocity.org Lily Honer-Hollstien 04/19/2023
Luke Schwartz Completed 1 / 1 lschwart@slocity.org Brian Nelson 04/13/2023
05/17/2023
4:00 PM UTC
Robin "Mika" Timpano Completed 1 / 1 mtimpano@slocity.org Randall "Randy" Harris 04/13/2023
05/17/2023
4:00 PM UTC
Meghan Tolley-Burger Withdrawn 0 / 1 mtolley@slocity.org Gregory "Greg" Avakian 04/26/2023
Christine Wallace Completed 1 / 1 cwallace@slocity.org Aaron Schafer 04/13/2023
05/17/2023
4:00 PM UTC
Daisy Wiberg Withdrawn 0 / 1 dwiberg@slocity.org Tyler Corey 04/15/2023
Web Content 101 Attendance_092023
Name Status
Initiative
Name Progress Work Email Manager
Assignment
Date
Completion
Date
Recommendation
Category
Rachelle Paris Not Started 1 / 1 rparis@slocity.org Shawna Scott 08/31/2023
Lisa Russell
Pending
Seat
Acceptance 0 / 1 lrussell@slocity.org Lily Honer-Hollstien 08/31/2023
Meghan Tolley-Burger Not Started 1 / 1 mtolley@slocity.org Gregory "Greg" Avakian 08/04/2023
Hayley Weidler Not Started 1 / 1 hWeidler@slocity.org Gregory "Greg" Cruce 08/31/2023
Justin Wong Not Started 1 / 1 jwong@slocity.org Luke Schwartz 08/31/2023
S T Y L E G U I D E
0 1 . C O L O R P A L E T T E
Arial Bold 22px #151515Heading 3
Heading 2 A rial Bold
26px #151515
H e ad ing 1 H olland Title
R egu l ar 32p x #151 5 1 5
Body Arial Regular 16px #555555
Links
Hover Links
Arial Regular #003E7E
Arial Regular #003E7E
Widget Title Arial Bold 15px #151515
Widget Body Copy Arial Regular 14px #555555
W i d g e t H e a d i n g A r i a l B o l d 1 8 p x #F F F F F F
#003E7E #566423 #F8D26A #F18522 #455560
Aa Aa Aa
Holland Title Regular Arial Bold Arial Regular
0 2 . T Y P O G R A P H Y
Current Section » Subsection »
Font Size: Share & Bookmark Feedback Print
C urre nt P age Title
Ex ample Subtitle Go es He re
Justo ipsum condimentum nisi, id hendrerit elit turpis eu
enim. Aliquam arcu. Cras facilisis, justo in sollicitudin
porttitor, nigh eros dignissim massa, a euismod arcu
enim cursus kwam. Aenean lorem.
Sed ut perspiciatis unde omnis h eros dignissim massa,
Justo ipsum condimentum nisi, id hendrerit elit turpis eu
enim. Aliquam arcu. Cras facilisis, justo in sollicitudin
porttitor, nigh eros dignissim massa, a euismod arcu enim
Example Subtitle Goes Here
Link example
Hover Link example
Welcome to San Luis Obispo
The hero space is a full width image that will
adjust proportionately depending on the
screen's width. It will include this optional
caption box, which can be used to
communicate important public information.
ONLIN E
PAYME NT
REPORT AN
I SSU E
REPORT AN
I SSU E
Max Icon Size:
100 x 100 px
Max Icon Size:
90 x 90 px
Max Icon Size: 88 x 88 px
Homepage Hero Image
Recommended Size
1920 x 660 px
(not to scale)
Department Banner
Recommended Size
1920 x 350 px
(not to scale)
0 4 . I M A G E S
0 3 . B U T T O N S & I C O N S
Label: 2 Lines Max
Icon: #FFFFFF
Background: #566423
Icon: #151515
Background: #F18522
Homepage Buttons Hover State
Background: #F8D26A
Hover: #F18522
Buttons
Social Media Icons
Label: 1 Line Max
Icon: #FFFFFF
Background: #566423
Background: #435016
Interior Buttons Hover State
Title: 1 Line Max
Description: 5 Lines Max
Caption Area
Export icon AND the background
as one file
Icon: #FFFFFF
Background: #364550
Button 1 Button Hover
M O R E N E W S
M O R E N E W S
2
29 30 31
5 6 7
12 13 14
19 20 21
26 27 28
2 3 4
T F S N O V C i t y C o u n c i l M e e t i n g
9:30 AM - 10:30 AM03
C i t y C o u n c i l M e e t i n g
L i n e 2
All Day Event
N O V
14
C i t y C o u n c i l M e e t i n g
01:30 PM - 04:30 AM
N O V
25
uncil Meetin g
10:30 AM
0 5 . W I D G E T S
Image Size:
164w x 103h px
Image Size:
364w x 250h px
Title: 2 Lines Max
Summary: 2 Lines Max
News
Title: 2 Lines Max
Time: 1 Line Max
Events
Joi n T he In C row d
Stay updated on what goes on — giving you access to loads of
important information in the form of e-notifications. Of course, you will
always have this information available to you via our City/ County's
website - but now it can be more convenient than ever.
Are you in?
Title: 2 Lines Max
Description: 5 Lines Max
Spotlight
ssion Public Hearing
nning Commission will hold a
nesday, May 11, 2022
nis Courts Now
nnis Courts just became more
with a new smooth, paved
City Council Meeting Recap
The San Luis Obispo City Council covered a variety of
important topics that impact the community
COVID-19 Cases, Hospitalizations
Increase Slightly in SLO County
San Luis Obispo County health officials say a small but
notable increase in COVID-19 cases
About Us Departments I - W
Departments B - H Information Technology
Legal
Legislative
Library
Parks & Recreation
Planning and Community
Development
Police
Public Affairs
Special Events
Transportation
Water Resources
Budget & Evaluation
Coliseum
Development Services
Lorem ipsum dolor
Sit amet, consectetur
Sit amet, consectetur
Adipisicing elit
Guilford Metro 9-1-1
Human Relations
Human Resources
Hover style
BUSINESS LICENSE
EXPANDED WITH CHILDREN
MORE LINKS
COMMUNITY PROGRAMS
SUBMITTING COMPLAINTS
LAW ENFORCEMENT AGENCIES
Newsletters & Reports
Expanded with children
Mayor ’s Message
Current Page
HOVER STYLE
Header background: #003E7E
Background: #F5F5F5
Current page background: #F8D26A
Hover background: #F18522
Side-Navigation
Background:
#FFFFFF
Megamenu
0 5 . W I D G E T S C O N T I N U E D
Appliance Pick Up City collects and recycles large home
appliances. View accepted items and
schedules.
REQUEST…APPLIANCE PICK UP
L E A R N M O R E
Description: 4 Lines Max
Service Finder
M O R E N E W S
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
N e w s
News Event Title Here
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
First Event
Hover Event
TA B L E
1000 San Pablo Avenue
1000 San Pablo Avenue
• Pages and Templates: https://support.granicus.com/s/article-
group/a8C4w000000Xbq2EAC/pages-and-templates
• Components and Widgets: https://support.granicus.com/s/article-
group/a8C4A000000XaoiUAC/components
• FAQs: https://support.granicus.com/s/article-group/a8C4A000000XalQUAS/frequently-
asked-questions
1. Navigating the dashboard (04:24): https://player.vimeo.com/video/179253458
2. Add or edit page content (03:35): https://player.vimeo.com/video/233531943
3. Editor tool and accessibility guidelines (12:05):
https://player.vimeo.com/video/227490056
4. Widgets (03:17): http://player.vimeo.com/video/68877707
5. Image Library (07:45): https://player.vimeo.com/video/227490067
6. Document Central (07:57): https://player.vimeo.com/video/227490052
7. Creating a calendar event (04:22): https://player.vimeo.com/video/230644347
Access all CMS Tutorial Videos here:
https://www.slocity.org/Admin/Components/OnlineReference?referenceID=503
• Recorded Webinars:
https://www.slocity.org/Admin/Components/OnlineReference?referenceID=620
o CMS Webinars, recommended webinars to watch include:
▪ CMS Overview
https://www.slocity.org/Admin/Components/OnlineReference?referenceID
=620#CMSOverview
▪ Page templates
https://www.slocity.org/Admin/Components/OnlineReference?referenceID
=620#PageTemplates
▪ E-notifications and email campaigns
https://www.slocity.org/Admin/Components/OnlineReference?referenceID
=620#eNotificationsAndEmailCampaigns
o Power Hour Sessions
o Educational Webinars, recommended webinars to watch include Web
Accessibility at
https://www.slocity.org/Admin/Components/OnlineReference?referenceID=620#1
8MinsPt1, which covers:
▪ What is web accessibility?
▪ Why is web accessibility important?
▪ Who is responsible for web accessibility?
The City uses a tool called Monsido, which scans our website for broken links, readability
issues, and accessibility issues. It is recommended that staff review their department’s section
of Monsido and the related reports to fix issues at least once a month. It is the department
staff’s responsibility to make sure that any broken links are resolved, the content is readable at
an appropriate level for the community, and the content on our website is accessible to all.
If you have an account, you can log in via https://login.monsido.com.
If you would like an account to get reports for issues with your department’s pages, contact
communications@slocity.org and request an account. NOTE: You must be able to edit our
website via the govAccess content management system. If you do not have user permissions to
edit our website, you will not be given access to Monsido.
Sign up for training to learn how to best use Monsido by logging in, finding your user profile
information in the top right corner, and selecting “Book Online Training”.