Writing Style
WRITE FOR YOUR CONSTITUENT FIRST, ALWAYS
Have an idea of who you want to provide the information to before you start. What you are writing should be like a conversation with a friend.
REMEMBER TO USE THE ACTIVE VOICE
For example, instead of writing, “The bill should be paid by the property owner,” we would write, “The property owner pays the bill.” It is much simpler and more direct. An easy way to tell if you are using the active or passive voice is to add “by zombies” after the verb in the sentence. If the sentence still makes sense after adding “by zombies,” it is in the passive voice. If not, it is in the active voice. For example:
Passive: The town was attacked (by zombies). Still makes sense.
Active: Zombies attacked (by zombies) the town. Does not make sense. There are trickier versions of the passive voice, but this is an easy tip to keep in mind.
BE SHORT AND TO THE POINT
If a headline is longer than 11 words, it is probably too long. Use full names and titles in headlines. Paragraphs should be two to three sentences at most. Aim for a sentence length of 15 to 20 words. For example:
“Perhaps more important than firefighting itself in many modern industrial countries is fire prevention,” could just be: “Fire prevention is important.”
Brevity can also increase readability and make the site more friendly for people using smartphones.
WRITE FOR SMALLER SCREENS
The more text, the more scrolling someone does on their smartphone or tablet.
CONSIDER A BULLETED LIST
Do you find yourself with a big paragraph? By breaking down your points into a bulleted list instead of a huge block of text, you will increase readability and comprehension. For example:
“The Fire Prevention Division, in the STLCO Fire Department, directs fire prevention activities. It handles the more technical fire prevention problems, maintains appropriate records, grants permit, investigates the causes of fires, and conducts public education programs,” could just be:
“The Fire Prevention Division:
handles more technical fire prevention problems
maintains appropriate records
grants permit
investigates the cause of fires, and
conducts public education programs.”
Just remember, you do not have to bullet everything on a page. Only use bulleted lists when they make sense.
PERSONALIZE THE EXPERIENCE FOR OUR CONSTITUENTS
Do not be afraid to say "we" instead of “The County.” Instead of "residents" or “applicants,” consider saying "you."
CAN WE USE A PHOTO WITH THE CONTENT?
Photos add depth to what you are talking about and may provide greater context for users struggling with reading comprehension.
BREAK UP CONTENT INTO BLOCKS OR CHUNKS
This allows readers to digest the content more easily. Ideally, you should separate these blocks of text with headlines and bullet lists of information.
WRITE AS YOU TALK
This is a common rule in writing. The content that you create should be like a conversation between two people. Stuffy language can get in the way. One of the easiest ways to write as you talk is with contractions. People talk in contractions — like cannot and don’t — and using them helps people relate to what you’re writing. The important thing to remember, though, is not to overuse them. Only use them when they sound natural.
What to Avoid
JARGON AND GOVERNMENT LEGALESE
We should be writing to the person with the least amount of knowledge on the topic. See a list of plain English words to use instead.
RUN-ON SENTENCES AND MULTIPLE COMMAS IN A SENTENCE
Use periods where you can, to help a reader digest the content.
WORDS LIKE “MAY” AND “SHALL”
When something needs to be done to complete a task, make sure a resident knows by using strong words like “must.”
ACRONYMS
A human-centered website does not require a government reference guide. Explain what it is you are talking about in detail.
SYMBOLS
While symbols — like “&” and “@” — can shorten your text, please spell out what you’re writing. Symbols like these will only confuse your readers, especially those who may be learning English as a second language.
REPETITION
If the full title of person or place has been used already as a first reference on the page, we don’t have to repeat that full title. “County Executive Dr. Sam Page” would simply become “the County Executive” down the page.
Associated Press Style
ASSOCIATED PRESS STYLE
While there are some exceptions, we are using Associated Press, or “AP,” rules to guide our writing on the new site. A general Google search that includes “AP style” in the question will usually give you the right answer. Here are some common tips pulled directly from the AP stylebook:
ADDRESSES
Use the abbreviations Ave., Blvd., and St. only with a numbered address: 1600 Pennsylvania Ave. Spell them out and capitalize when part of a formal street name without a number: Pennsylvania Avenue. Lowercase and spell out when used alone or with more than one street name: Massachusetts and Pennsylvania avenues.
All similar words (alley, drive, road, terrace, etc.) are always spelled out. Capitalize them when part of a formal name without a number; lowercase when used alone or with two or more names. Always use figures for an address number: 9 Morningside Circle. Spell out and capitalize First through Ninth when used as street names; use figures for 10th and above: 7 Fifth Ave., 100 21st St.
DATES
Always use Arabic figures for dates, without st, nd, rd, or th. For example: We were married on July 1, 2013.
On September 5, we celebrate Labor Day.
HEADLINES
For text used as a headline, only capitalize the first word and proper nouns. Use single quotes for quotation marks. For example:
Neighborhood Development joins federal housing program
County Executive Page names new director for Animal Control
‘Prepare for the storm,’ County Executive Page says
NUMERALS
In general, spell out one through nine: The Cardinals finished first. He had nine months to go. Use figures for 10 and above, and whenever preceding a unit of measure or referring to ages of people, animals, events, or things. For percentages, use numerals with “percent,” not “%”. For example:
We picked more than 20 apples at the orchard. The County Council is revising the 8-year-old laws. We want you to spend 50 percent of your time on reading.
TIME
Use figures except for noon and midnight. Use a colon to separate hours from minutes. You do not need the “:00” when referring to an hour of the day. For example: The meeting took place at 11 a.m., but we plan to meet again at 3:30 p.m. When referring to a time span, please use a hyphen instead of the words “to” or “through.”
For example:
A typical workday for most people takes place from 9 a.m. - 5 p.m.
If you are writing about a time span in the afternoon, evening, or in the morning, you don’t need to write out the first a.m. or p.m. For example: We plan to discuss the proposal from 9-11 a.m. We should also set some time aside from 3-5 p.m.
TITLES
Capitalize formal titles when they are used before one or more names: Pope Francis, President George Washington, Vice Presidents John Jones, and William Smith. Lowercase and spell out titles when they are not used with an individual’s name: The president issued a statement. The pope gave his blessing.
Lowercase and spell out titles in constructions that set them off from a name by commas.
For example:
The vice president, Joe Biden, was re-elected in 2012. Pope Francis, the current pope, was born in Argentina. Titles should not be over 25 characters.
YEARS
Use figures, without commas, for years: 1975. Use an s without an apostrophe to indicate spaces of decades or centuries: the 1890s, the 1800s. Some examples:
January 1972 was a cold month. January 2 was the coldest day of the month. His birthday is May 8. February 14, 1987 was the target date. She testified that it was Friday, December 3, when the accident occurred.
Website Policies
CONTENT RETENTION AND REVIEW
All content on the website must be reviewed, at minimum, every 6 months.
Content should be reviewed for relevancy and accuracy. Content that is not relevant or accurate should be removed or revised immediately.
The website will not serve as a repository for any outdated and irrelevant content.
Webpages with short term content such as news, blogs and relevant items should be taken down on or before 90 days from publishing date.
Website Content
Images
Images should be no larger than 250kb in size. To compress images, we recommend the use of https://squoosh.app/ to compress and resize images. Resize should be less than 1000 px in height and width. Only use images with the file extension .png, .jpg, or .jpeg.
Each image is required to have an alt attribute set. This alt attribute will allow screen readers to read a description of the image to a user.
Do not name any image files with a . (dot) for example st.louiscountybanner.jpg will return an error. Rather name it as stlouiscountybanner.jpg
Images need to align correctly in mobile view.
Images should be related to the content on the page.
Use images that are royalty free or images that your department has the rights to use.
Do not use images from Google search.
Please inquire with webdev for sources of pictures that can be used. All images used on our website must be documented with webdev so we can prove that we have the rights to use the photo.
The image on the page should be located near the relevant content.
IMAGE BANNERS
Image Banners are mandatory for all website pages including Level 1 Pages and Subpages.
All pages should use the ‘Contact Header’ and ‘Contactless Header.’
Different pages can have the same image, but please choose images that relate to the content on the page.
The image on the page should be located near the relevant content.
Images used as banners should be no smaller than 1800px wide and minimum of 500px high and should not exceed 250kb in size.
Make sure the image used is not stretched or pixelated.
Use images that are royalty free or images that your department has the right to use.
Do not use images from Google search.
Please inquire with webdev for sources of pictures that can be used. All images used on our website must be documented with webdev so we can prove that we have the right to use the photo.
ICONS
Standard frame size for all icons is 256 x 256px
All pages are required to have icons.
All icons must be consistent and selected from smashicons.com
Users select ‘cartoony’ type icons from the website. Users then take a screenshot of the screen and the name of the icon and create a smashicons helpdesk ticket.
CARD SUMMARIES
Keep card summaries short.
Each card should have a maximum of two sentences.
Videos
Videos must first be uploaded to one of the approved video hosts before they can be added to a page. Approved video hosts are YouTube and Vimeo.
Videos cannot be directly uploaded to Mura.
Use the video module in ‘Edit Layout’ and select the appropriate method to add the video. Embed module can also be used to embed videos.
Videos that are the sole content of the page can occupy the full size of the page with a header.
Pages with a video embedded in the content of the page or pages with multiple videos should be appropriately sized.
Pages with multiple videos in a collection should use ‘tight’ spacing as shown in the below image.
Videos should not auto start.
Placement of the video on the page should be close to the relevant content.
Make sure the video is ADA accessible - https://www.section508.gov/create/video-social
Yext Description
The yext description should describe the page in 1 or 2 sentences. The description will display in the search bar and be visible to users. PDFs
NOTICE: We strongly discourage the use of PDFs, or any other document format being posted to any of our websites.
Any static content, i.e., policies, procedures, should be a web page so that the content can take advantage of the website features like the language translator, site search and indexing features.
PDFs should be reserved for content such as data tables, forms, manuals, and booklets.
PDFs under three pages and flyers should be converted into web content.
All non-embedded PDFs must open in new browser window.
Pages with PDFs must have a description of the document for search reasons.
PDFs must be in issuu format using https://issuu.com/. To convert a PDF into issuu format, put in an issuu helpdesk ticket.
Issuus are only to be embed on a page. Do not link to an external url that contains an issuu.
When embedding an issuu, the embed must have a heading and summary just above it on the page to explain the content in the document below.
Documents such as Word, Excel, and PowerPoint are not allowed on the website.
External Links
All hyperlinks that are not pointing to stlouiscountymo.gov should open in a new browser window.
All external links must be in the ‘content type’ – ‘link’ and used as a collection set unless there is a real need to use an inline link or other formats.
All external links will automatically present the user with a warning that they are leaving stlouiscountymo.gov
Hyperlinks
All hyperlinks in text should be bolded. This should happen automatically as the CSS file included in the site specifies this.
Do not use generic verbiage like ‘click here,’ ‘go here,’ ‘send email’ links.
Margins and Spacing
To make content easier to read, insert small vertical spaces between different blocks of content. This is especially important when placing a collection on a page so surrounding text is not right on top of the collection cards.
‘Tight’ is the only option to add margin and spacing as an element on the page. To select the element, click on style on the right menu, then find spacing and choose the most appropriate spacing for your element.
All pages must have a ‘Contact Header’ or ‘Contactless Header’.
Headings
The standard heading on all internal pages must be the “Heading 1” in the rich text editor or <h2> in the source editor.
o Rich Text Editor
o Source Editor Use <h2>Your Heading</h2>
Titles should not be over 25 characters long.
Nest headings by their rank (or level). The most important heading has the rank 1 (<h2>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
Do not use the headings that are available in all modules (i.e. Container, text, video, collection, etc.)
Subheadings
The standard heading on all internal pages must be the “Heading 3” in the rich text editor or <h4> in the source editor.
o Rich Text Editor
o Source Editor Use <h4>Your Heading</h4>
Titles should not be over 25 characters long.
Buttons and Button Groups
Buttons are discouraged from all pages.
Unless otherwise necessary, use of buttons require prior permission from IT.
Buttons will use bootstrap styling. See bootstrap documentation for how to setup a button or button group (https://getbootstrap.com). When setting up a button group, make sure that all buttons in the group are the same height and width.
Alerts and Call to Actions
Use the ‘drawer’ option for informational alerts.
‘Modals’ should only be used for emergencies.
Call to Action is a short-term alert. i.e. Winter Wonderland announcement
The call-to-action module is used to call attention to an event or action that you would like the user to take. These can include signing up for a newsletter or letting the user know that an event is upcoming, i.e. census.
Use the modal or drawer version of the call to action.
To add a ‘call-to-action’ on the home page, also known as home page alert message, the message must be an announcement that affects county-wide operations, ie., holidays, emergencies, etc. or ‘call-to-action’ authorized by the Director or Deputy Director of IT. All other ‘call-to-action’ must be on individual department pages.
Styling
Fonts
There 4 main fonts that we are using on the website.
Montserrat – Used for main headings of pages and sub-headings
Lora – General text content throughout the site
Open Sans – Backup font
Arial – Should be used as a fail-safe font
Phone Numbers & Email Address
All phone numbers and email addresses should be hyperlinked.
All phone numbers and email address should be bolded. This should happen automatically as the CSS file included in the site specifies this.
If phone numbers and email addresses could be added to the header, please do so. Avoid using phone numbers and email address inline if possible.
Italics and Bolding
Do not use italics, bolding, or full capitalization except for headings.
Color
There must be sufficient contrast between the text color and the background color for ADA purposes. Please use https://adasitecompliance.com/ada-color-contrast-checker/ to check the contrast of the colors in question. Ensure the colors that you choose are appropriate and visually appealing.
Font colors and background colors are not permitted at this time except for preconfigured alert messages that are found in the WSYWYIG
Redirects and Vanity URLs
Use redirects sparingly and only when necessary.
For internal redirects - keep the url redirect short handle short and choose ‘Allow alternate URLs for this content node’ the choice Permananet (301) option.
All Vanity URLs must be pre-approved by webdev.
Mura (stlouiscountymo.gov) Specific Guidelines
Page Structure
POST NAV
This section is reserved for items that need to be inherited by child pages.
PRIMARY CONTENT
All content specific to the page being edited should reside in this section.
PRE FOOTER
This section is reserved for items that need to be inherited by child pages.
Collections and Categories
Collections and categories should be named using the following naming convention: (Department Abbreviation) (Page Name/abbreviation) (Name of Collection)
All collections will use the layout ‘Cards-Standard’ except for FAQs and FAQ styled accordion collections or by request.
Public Notices
All notices for meetings will be posted on the public notices page. They will not be posted anywhere else on the website. This will reduce the time needed to both post and maintain public notices of meetings on our website. To have a public notice posted on the website complete with all required information refer to IT Service Management. All requests must be submitted at least 48 hours in advance.
County Calendar
The main county calendar will be a roll up to all department calendars and public notices. Each department calendar will go through a specific approval process that involves the County Executive’s office. They will approve or deny the content before it is posted to the web page.
Meeting Agendas and Minutes
Meeting agendas and minutes will be posted only in iCompass. No agendas, minutes, or board members will be maintained directly in the St. Louis County website. We will be able to display the information entered into iCompass in our website, but the maintenance of that information will occur in the iCompass application. Contact the IT department for more information about iCompass.
File Manager
To ensure that files uploaded to the site are in an organized manner, please upload your files into the correct path as shown:
Departments
Images: User Assets-> images-> departments-> yourdepartment (example: elections)
Governments
Images: User Assets-> images-> government-> yourdepartment (example: elections)
Services & Appointments
Images: User Assets-> images-> services-> yourdepartment (example: elections)
Search Engine Optimization (SEO)
For each page or content node, we need to provide search engines metadata to show in their search results. This will help citizens quickly find information on our site without knowing where the information is located on our site. Mura provides 2 key areas to input this information.
The first is the HTML Title. This setting is in the Basic Tab when editing content. The HTML Title should be 1-5 key words regarding what the page is about. The second is the Meta Description field located in the Summary tab. This should be filled with 1-3 short sentences
describing your page. This will get used as the snippet of the page when users search for your page using a search engine such as Google.
Pages
We need to provide search engines with metadata to show on each page or content node.
All content for the county should be in Page formats.
All FAQs using the accordion format must be in the ‘Article’ format.
Folders
Use of folders are not permitted unless pre-approved by webdev.
Content Expiration Policy
All content online must be reviewed at a minimum of 6 months within each department/agency. All expired content must be removed or replaced with newer information.
All alerts and call to actions must be removed within 24 hours after the set event. This can also be automatically set to expire through the scheduler.
Footers
Webdev will provide a standard footer. The first set of links will be specific to the site that the user is on. The rest of the footer will be standard for every web page.
This document is intended as a general style guide. If you have issues or specific questions, please do not hesitate to reach out to the web team for assistance or further clarification. If you are unable to reach the web team, or you need emergency assistance, please call the Helpdesk at (314) 615-4357.