Website Style Guide by STLCOGOV

WEBSITESTYLEGUIDE

SaintLouisCountyGovernment Revision2.0 January9,2023

1 Table of Contents WritingStyle ................................................................................................................................2 What to Avoid......................................................................................................................................................3 Associated Press Style..........................................................................................................................................4 WebsitePolicies............................................................................................................................5 WebsiteContent ...........................................................................................................................6 Images..................................................................................................................................................................6 Image Banners .....................................................................................................................................................6 Icons.....................................................................................................................................................................6 Videos...................................................................................................................................................................7 PDFs & Documents...............................................................................................................................................7 External Links .......................................................................................................................................................8 Hyperlinks ............................................................................................................................................................8 Margins and Spacing............................................................................................................................................8 Headings................................................................................................................ Error! Bookmark not defined. Sub Headings......................................................................................................... Error! Bookmark not defined. Buttons and Button Groups .................................................................................................................................9 Alert Messages.....................................................................................................................................................9 Call to Action......................................................................................................... Error! Bookmark not defined. Styling.........................................................................................................................................10 Fonts...................................................................................................................................................................10 Phone Numbers & Email Address ......................................................................................................................10 Italics and Bolding..............................................................................................................................................10 Color...................................................................................................................................................................10 Redirects and Vanity URLs .................................................................................................................................11 Mura(stlouiscountymo.gov)SpecificGuidelines.........................................................................11 Page Structure....................................................................................................................................................11 Collections and Categories.................................................................................................................................11 Public Notices.....................................................................................................................................................11 Meeting Agendas and Minutes..........................................................................................................................12 File Manager ......................................................................................................................................................12 Search Engine Optimization (SEO) .....................................................................................................................12 Pages..................................................................................................................................................................13 Folders................................................................................................................................................................13 Content Expiration Policy...................................................................................................................................13 Microsite Footers...............................................................................................................................................13

WritingStyle

WRITEFORYOURCONSTITUENTFIRST,ALWAYS

Haveanideaofwhoyouwanttoprovidetheinformationtobeforeyoustart.Whatyouare writingshouldbelikeaconversationwithafriend.

REMEMBERTOUSETHEACTIVEVOICE

Forexample,insteadofwriting,“Thebillshouldbepaidbythepropertyowner,”wewould write,“Thepropertyownerpaysthebill.”Itismuchsimplerandmoredirect. Aneasywaytotellifyouareusingtheactiveorpassivevoiceistoadd“byzombies”afterthe verbinthesentence.Ifthesentencestillmakessenseafteradding“byzombies,”itisinthe passivevoice.Ifnot,itisintheactivevoice.Forexample:

Passive:Thetownwasattacked(byzombies).Stillmakessense.

Active:Zombiesattacked(byzombies)thetown.Doesnotmakesense. Therearetrickierversionsofthepassivevoice,butthisisaneasytiptokeepinmind.

BESHORTANDTOTHEPOINT

Ifaheadlineislongerthan11words,itisprobablytoolong.Usefullnamesandtitlesin headlines.Paragraphsshouldbetwotothreesentencesatmost.Aimforasentencelengthof 15to20words.Forexample:

“Perhapsmoreimportantthanfirefightingitselfinmanymodernindustrialcountriesisfire prevention,”couldjustbe:“Firepreventionisimportant.” Brevitycanalsoincreasereadabilityandmakethesitemorefriendlyforpeopleusing smartphones.

WRITEFORSMALLERSCREENS

Themoretext,themorescrollingsomeonedoesontheirsmartphoneortablet.

CONSIDERABULLETEDLIST

Doyoufindyourselfwithabigparagraph?Bybreakingdownyourpointsintoabulletedlist insteadofahugeblockoftext,youwillincreasereadabilityandcomprehension.Forexample:

“TheFirePreventionDivision,intheSTLCOFireDepartment,directsfirepreventionactivities. Ithandlesthemoretechnicalfirepreventionproblems,maintainsappropriaterecords,grants permit,investigatesthecausesoffires,andconductspubliceducationprograms,”couldjustbe:

“TheFirePreventionDivision:

 handlesmoretechnicalfirepreventionproblems

 maintainsappropriaterecords

 grantspermit

 investigatesthecauseoffires,and

 conductspubliceducationprograms.”

2 This

document will be updated regularly by the IT department

Justremember,youdonothavetobulleteverythingonapage.Onlyusebulletedlistswhenthey makesense.

PERSONALIZETHEEXPERIENCEFOROURCONSTITUENTS

Donotbeafraidtosay"we"insteadof“TheCounty.”Insteadof"residents"or“applicants,” considersaying"you."

CANWEUSEAPHOTOWITHTHECONTENT?

Photosadddepthtowhatyouaretalkingaboutandmayprovidegreatercontextforusers strugglingwithreadingcomprehension.

BREAKUPCONTENTINTOBLOCKSORCHUNKS

Thisallowsreaderstodigestthecontentmoreeasily.Ideally,youshouldseparatetheseblocksof textwithheadlinesandbulletlistsofinformation.

WRITEASYOUTALK

Thisisacommonruleinwriting.Thecontentthatyoucreateshouldbelikeaconversation betweentwopeople.Stuffylanguagecangetintheway. Oneoftheeasiestwaystowriteasyoutalkiswithcontractions.Peopletalkincontractions— likecannotanddon’t—andusingthemhelpspeoplerelatetowhatyou’rewriting.The importantthingtoremember,though,isnottooverusethem.Onlyusethemwhentheysound natural.

WhattoAvoid

JARGONANDGOVERNMENTLEGALESE

Weshouldbewritingtothepersonwiththeleastamountofknowledgeonthetopic.Seealistof plainEnglishwordstouseinstead.

RUN-ONSENTENCESANDMULTIPLECOMMASINASENTENCE

Useperiodswhereyoucan,tohelpareaderdigestthecontent.

WORDSLIKE“MAY”AND“SHALL”

Whensomethingneedstobedonetocompleteatask,makesurearesidentknowsbyusing strongwordslike“must.”

ACRONYMS

Ahuman-centered websitedoesnotrequireagovernmentreferenceguide.Explainwhatitisyou aretalkingaboutindetail.

SYMBOLS

Whilesymbols—like“&”and“@”—canshortenyourtext,pleasejustspelloutwhatyou’re writing.Symbolslikethesewillonlyconfuseyourreaders,especiallythosewhomaybelearning Englishasasecondlanguage.

REPETITION

Ifthefulltitleofpersonorplacehasbeenusedalreadyasafirstreferenceonthepage,wedon’t havetorepeatthatfulltitle.“CountyExecutiveDr.SamPage”wouldsimplybecome“the CountyExecutive”downthepage.

AssociatedPressStyle

ASSOCIATEDPRESSSTYLE

Whiletherearesomeexceptions,weareusingAssociatedPress,or“AP,”rulestoguideour writingonthenewsite.AgeneralGooglesearchthatincludes“APstyle”inthequestionwill usuallygiveyoutherightanswer.HerearesomecommontipspulleddirectlyfromtheAP stylebook:

ADDRESSES

UsetheabbreviationsAve.,Blvd.,andSt.onlywithanumberedaddress:1600Pennsylvania Ave.Spellthemoutandcapitalizewhenpartofaformalstreetnamewithoutanumber: PennsylvaniaAvenue.Lowercaseandspelloutwhenusedaloneorwithmorethanonestreet name:MassachusettsandPennsylvaniaavenues.

Allsimilarwords(alley,drive,road,terrace,etc.)arealwaysspelledout.Capitalizethemwhen partofaformalnamewithoutanumber;lowercasewhenusedaloneorwithtwoormorenames. Alwaysusefiguresforanaddressnumber:9MorningsideCircle.SpelloutandcapitalizeFirst throughNinthwhenusedasstreetnames;usefiguresfor10thandabove:7FifthAve.,10021st St.

DATES

AlwaysuseArabicfiguresfordates,withoutst,nd,rd,orth.Forexample: WeweremarriedonJuly1,2013.

OnSeptember5,wecelebrateLaborDay.

HEADLINES

Fortextusedasaheadline,onlycapitalizethefirstwordandpropernouns.Usesinglequotesfor quotationmarks.Forexample:

NeighborhoodDevelopmentjoinsfederalhousingprogram

CountyExecutivePagenamesnewdirectorforAnimalControl

‘Prepareforthestorm,’CountyExecutivePagesays

NUMERALS

Ingeneral,spelloutonethroughnine:TheCardinalsfinishedfirst.Hehadninemonthstogo. Usefiguresfor10andabove,andwheneverprecedingaunitofmeasureorreferringtoagesof people,animals,events,orthings.Forpercentages,usenumeralswith“percent,”not“%”. Forexample:

Wepickedmorethan20applesattheorchard. TheCountyCouncilisrevisingthe8-year-oldlaws. Wewantyoutospend50percentofyourtimeonreading.

TIME

Usefiguresexceptfornoonandmidnight.Useacolontoseparatehoursfromminutes.Youdo notneedthe“:00”whenreferringtoanhouroftheday.Forexample: Themeetingtookplaceat11a.m.,butweplantomeetagainat3:30p.m. Whenreferringtoatimespan,pleaseuseahypheninsteadofthewords “to”or“through.”

Forexample:

Atypicalworkdayformostpeopletakesplacefrom9a.m.-5p.m.

Ifyouarewritingaboutatimespanintheafternoon,evening,orinthemorning,youdon’tneed towriteoutthefirsta.m.orp.m.Forexample: Weplantodiscusstheproposalfrom9-11a.m.Weshouldalsosetsometimeasidefrom3-5 p.m.

TITLES

Capitalizeformaltitleswhentheyareusedbeforeoneormorenames:PopeFrancis,President GeorgeWashington,VicePresidentsJohnJones,andWilliamSmith. Lowercaseandspellouttitleswhentheyarenotusedwithanindividual’sname:Thepresident issuedastatement.Thepopegavehisblessing.

Lowercaseandspellouttitlesinconstructionsthatsetthemofffromanamebycommas.

Forexample:

Thevicepresident,JoeBiden,wasre-electedin2012. PopeFrancis,thecurrentpope,wasborninArgentina. Titlesshouldnotbeover25characters

YEARS

Usefigures,withoutcommas,foryears:1975.Use answithoutanapostrophetoindicatespaces ofdecadesorcenturies:the1890s,the1800s. Someexamples:

January1972wasacold month.January2wasthecoldestdayofthemonth. HisbirthdayisMay8.February14,1987wasthetargetdate. ShetestifiedthatitwasFriday,December3,whentheaccidentoccurred.

WebsitePolicies

CONTENTRETENTIONANDREVIEW

 Allcontentonthewebsitemustbereviewed,atminimum,every6months.

 Contentshouldbereviewedforrelevancyandaccuracy.Contentthatisnotrelevantor accurateshouldberemovedorrevisedimmediately.

 Thewebsitewillnotserveasarepositoryforanyoutdatedandirrelevantcontent.

 Webpageswithshorttermcontentsuchasnews, blogsandrelevantitemsshouldbetaken downonorbefore90daysfrompublishingdate.

WebsiteContent Images

 Imagesshouldbenolargerthan250kbinsize.Tocompressimages,werecommendthe useofhttps://squoosh.app/ tocompressandresizeimages.Resizeshouldbelessthan 1000pxinheightandwidth.Onlyuseimageswiththefileextension.png,.jpg,or.jpeg.

 Eachimageisrequiredtohaveanaltattributeset.Thisaltattributewillallowscreen readerstoreadadescriptionoftheimagetoauser.

 Donotnameanyimagefileswitha.(dot)forexamplest.louiscountybanner.jpgwill returnanerror.Rathernameitasstlouiscountybanner.jpg

 Imagesneedtoaligncorrectlyinmobileview.

 Imagesshouldberelatedtothecontentonthepage.

 Useimagesthatareroyaltyfreeorimagesthatyourdepartmenthastherightstouse.

 DonotuseimagesfromGooglesearch.

 Pleaseinquirewithwebdevforsourcesofpicturesthatcanbeused.Allimagesusedon ourwebsitemustbedocumentedwithwebdevsowecanprovethatwehavetherightsto usethephoto.

 Theimageonthepageshouldbelocatedneartherelevantcontent.

IMAGEBANNERS

 ImageBannersaremandatoryforallTopLevelPages(Level1).

 Theold‘PageHeader’and ‘PageHeader–Contactless’ moduleswillberetired.

 Allpagesshouldstartusingthe ‘ContactHeader’and ‘ContactlessHeader.’

 Imagesusedasbannersshould benolargerthan1200px (width)by350px(height)and notexceeding250kbinsize.

 Makesuretheimageusedisnotstretchedorpixelated.

 Imagesshouldberelatedtothecontentonthepage.

 Useimagesthatareroyaltyfreeorimagesthatyourdepartmenthastherightstouse.

 DonotuseimagesfromGooglesearch.

 Pleaseinquirewithwebdevforsourcesofpicturesthatcanbeused.Allimagesusedon ourwebsitemustbedocumentedwithwebdevsowecanprovethatwehavetherightsto usethephoto.

 Theimageonthepageshouldbelocatedneartherelevantcontent.

ICONS

 Standardframesizeforalliconsis256x256px

 Allpagesarerequiredto haveicons.

 Alliconsmustbeconsistentandselectedfrom smashicons.com.

 Usersselect‘cartoony’typeiconsfromthewebsite.Usersthentake ascreenshotofthescreenandthenameoftheiconandcreatea smashiconshelpdeskticket

CARDSUMMARIES

 Keepcardsummariesshort.

 Eachcardshouldhaveamaximumoftwosentences.

Videos

 Videosmustfirstbeuploadedtooneoftheapprovedvideohostsbeforetheycanbe addedtoapage.ApprovedvideohostsareYouTubeandVimeo.

 VideoscannotbedirectlyuploadedtoMura.

 Usethevideomodulein ‘EditLayout’andselecttheappropriatemethodtoaddthe video.Embedmodulecanalsobeusedtoembedvideos.

 Videosthatarethesolecontentofthepagecanoccupythefullsizeofthepagewitha header.

 Pageswithavideoembeddedinthecontentofthepageorpageswithmultiplevideos shouldbeappropriatelysized.

 Pageswithmultiplevideosinacollectionshoulduse‘tight’spacingasshowninthe belowimage.

 Videosshouldnotautostart.

 Placementofthevideoonthepageshouldbeclosetotherelevantcontent.

 MakesurethevideoisADAaccessible- https://www.section508.gov/create/video-social

YextDescription

 Theyextdescriptionshoulddescribethepagein 1or2sentences.Thedescriptionwill displayinthesearchbarandbevisibletousers.

PDFs&Documents

NOTICE:WestronglydiscouragetheuseofPDFs,oranyotherdocumentformatbeingposted toanyofourwebsites.

 Anystaticcontent,i.e.,policies,procedures,shouldbeawebpagesothatthecontentcan takeadvantageofthewebsitefeatureslikethelanguagetranslator,sitesearchand indexingfeatures.

 PDFsshouldbereservedforcontentsuchasdatatables,forms,manuals,andbooklets.

 PDFsunderthreepagesandflyersshouldbeconvertedintowebcontent.

 Allnon-embeddedPDFsmustopeninnewbrowserwindow.

 PageswithPDFsmusthaveadescriptionofthedocumentforsearchreasons.

 PDFsmustbeinissuuformatusing https://issuu.com/.ToconvertaPDFintoissuu format,putinanissuuhelpdeskticket

 DocumentssuchasWord,ExcelandPowerPointarenotallowedonthewebsite.

ExternalLinks

 Allhyperlinksthatarenotpointingtostlouiscountymo.gov shouldopeninanewbrowserwindow.

 Allexternallinksmustbeinthe‘contenttype’–‘link’and usedasacollectionsetunlessthereisarealneedtousean inlinelinkorotherformats.

 Allexternallinkswillautomaticallypresenttheuserwitha warningthattheyareleavingstlouiscountymo.gov

Hyperlinks

 Allhyperlinksintextshouldbebolded.ThisshouldhappenautomaticallyastheCSSfile includedinthesitespecifiesthis.

 Donotusegenericverbiagelike‘clickhere,’‘gohere,’‘sendemail’links.

MarginsandSpacing

 Tomakecontenteasiertoread,insertsmallverticalspacesbetween differentblocksofcontent.Thisisespeciallyimportantwhen placingacollectiononapagesosurroundingtextisnotrightontop ofthecollectioncards.

 ‘Tight’istheonlyoptiontoaddmarginandspacingasanelement onthepage.Selecttheelement,clickonstyleontherightmenu, thenfindspacingandchoosethemostappropriatespacingforyourelement.

PageHeader

 Allpagesmusthavea‘ContactHeader’or‘ContactlessHeader’.

Headings

 Thestandardheadingonallinternalpagesmustbethe “Heading1”intherichtexteditoror<h2>inthesource editor.

o RichTextEditor

o SourceEditor

 Use<h2>YourHeading</h2>

 Titlesshouldnotbeover25characterslong.

 Nestheadingsbytheirrank(orlevel).Themostimportantheadinghastherank1(<h2>), theleastimportantheadingrank6(<h6>).Headingswithanequalorhigherrankstarta newsection,headingswithalowerrankstartnewsubsectionsthatarepart ofthehigher rankedsection.

 Donotusetheheadingsthatareavailableinallmodules(i.e.Container,text,video, collection,etc.)

Subheadings

 Thestandardheadingonallinternalpagesmustbethe“Heading3”intherichtexteditor or<h4>inthesourceeditor.

o RichTextEditor

o SourceEditor

 Use<h4>YourHeading</h4>

 Titlesshouldnotbeover25characterslong.

ButtonsandButtonGroups

 Buttonsarediscouragedfromallpages.

 Unlessotherwisenecessary,useofbuttonsrequirepriorpermissionfromIT.

 Buttonswillusebootstrapstyling.Seebootstrapdocumentationforhowtosetupabutton orbuttongroup(https://getbootstrap.com).Whensettingupabuttongroup,makesure thatallbuttonsinthegrouparethesameheightandwidth.

AlertsandCalltoActions

 Usethe‘drawer’optionforinformationalalerts.

 ‘Modals’shouldonlybeusedforemergencies.

 CalltoActionisashort-termalert.i.e.WinterWonderlandannouncement

 Thecall-to-actionmoduleisusedtocallattentiontoaneventoractionthatyouwould liketheusertotake.Thesecanincludesigningupforanewsletterorlettingtheuser knowthataneventisupcoming,i.e.census.

 Usethemodalordrawerversionofthecalltoaction.

 Toadda‘call-to-action’onthehomepagealsoknownashomepagealert message,the messagemustbeanannouncementthataffects county-wideoperations,ie.,holidays, emergencies,etc.or‘call-to-action’authorizedbytheDirectororDeputyDirectorofIT. Allother‘call-to-action’mustbeonindividualdepartmentpages.

Styling

Fonts

There4mainfontsthatweareusingonthewebsite.

 Montserrat–Usedformainheadingsofpagesandsub-headings

 Lora–Generaltextcontentthroughoutthesite

 OpenSans–Backupfont

 Arial–Shouldbeusedasafail-safefont

PhoneNumbers&EmailAddress

 Allphonenumbersandemailaddressesshouldbehyperlinked.

 Allphonenumbersandemailaddressshouldbebolded.Thisshouldhappen automaticallyastheCSSfileincludedinthesitespecifiesthis.

 Ifphonenumbersandemailaddressescouldbeaddedtotheheader,pleasedoso.Avoid usingphonenumbersandemailaddressinlineifpossible.

ItalicsandBolding

 Donotuseitalics,bolding,orfullcapitalizationexceptforheadings.

Color

 Theremustbesufficient contrastbetweenthetext colorandthebackgroundcolorfor ADApurposes.Pleaseusehttps://adasitecompliance.com/ada-color-contrast-checker/ to checkthecontrastofthecolorsinquestion.Ensurethecolorsthatyouchooseare appropriateandvisuallyappealing.

 Fontcolorsandbackground colorsarenotpermittedat thistimeexceptforpreconfiguredalertmessages thatarefoundinthe WSYWYIG

RedirectsandVanityURLs

 Useredirectssparinglyand onlywhennecessary.

 Forinternalredirects-keeptheurlredirectshorthandleshortandchoose‘Allow alternateURLsforthiscontentnode’thechoicePermananet(301)option.

 AllVanityURLsmustbepre-approvedbywebdev.

Mura(stlouiscountymo.gov)SpecificGuidelines

PageStructure

POSTNAV

 Thissectionisreservedforitemsthatneedtobeinheritedbychildpages.

PRIMARYCONTENT

 Allcontentspecifictothepagebeingeditedshouldresideinthissection.

PREFOOTER

 Thissectionisreservedforitemsthatneedtobeinheritedbychildpages.

CollectionsandCategories

 Collectionsandcategoriesshouldbenamedusingthefollowingnamingconvention: (DepartmentAbbreviation)(PageName/abbreviation)(NameofCollection)

 Allcollectionswillusethelayout‘Cards-Standard’exceptforFAQsandFAQstyled accordioncollectionsorbyrequest.

PublicNotices

Allnoticesformeetingswillbepostedonthepublicnoticespage.Theywillnotbeposted anywhereelseonthewebsite.Thiswillreducethetimeneededtobothpostandmaintainpublic noticesofmeetingsonourwebsite.Tohaveapublicnoticepostedonthewebsitecompletewith allrequiredinformationreferto ITServiceManagement.Allrequestsmustbesubmittedatleast 48hoursinadvance.

CountyCalendar

Themaincountycalendarwillbearolluptoalldepartmentcalendarsandpublicnotices.Each departmentcalendarwillgothroughaspecific approvalprocessthatinvolvestheCounty Executive’soffice.Theywillapproveordenythecontentbeforeitispostedtothewebpage.

MeetingAgendasandMinutes

MeetingagendasandminuteswillbepostedonlyiniCompass.Noagendas,minutes,orboard memberswillbemaintaineddirectlyintheSt.LouisCountywebsite.Wewillbeabletodisplay theinformationenteredintoiCompassinourwebsite,butthemaintenanceofthatinformation willoccurintheiCompassapplication.ContacttheITdepartmentformoreinformationabout iCompass.

FileManager

Toensurethatfilesuploadedtothesiteareinanorganizedmanner,pleaseuploadyourfilesinto thecorrectpathasshown:

Departments

Images:UserAssets->images->departments-> yourdepartment(example:elections)

Governments

Images:UserAssets->images->government-> yourdepartment(example:elections)

Services&Appointments

Images:UserAssets->images->services->yourdepartment (example:elections)

SearchEngineOptimization(SEO)

Foreachpageorcontentnode,weneedtoprovidesearchenginesmetadatatoshowintheir searchresults.Thiswillhelpcitizensquicklyfindinformationonoursitewithoutknowing wheretheinformationislocatedonoursite.Mura provides2keyareastoinputthisinformation.

ThefirstistheHTMLTitle.ThissettingisintheBasicTab wheneditingcontent.TheHTMLTitleshouldbe1-5key wordsregardingwhatthepageisabout. ThesecondistheMeta Descriptionfieldlocatedinthe Summarytab.Thisshouldbefilledwith1-3shortsentences describingyourpage.Thiswillgetusedasthesnippetofthe pagewhenuserssearchforyourpageusingasearchengine suchasGoogle.

Pages

 Weneedtoprovidesearchengineswithmetadatatoshowoneachpageorcontentnode.

 AllcontentforthecountyshouldbeinPageformats.

 AllFAQsusingtheaccordionformatmustbeinthe‘Article’format.

Folders

Useoffoldersarenotpermittedunlesspre-approvedbywebdev.

ContentExpirationPolicy

 Allcontentonlinemustbereviewedata minimumof6monthswithineach department/agency.Allexpiredcontentmust beremovedorreplacedwithnewer information.

 Allalertsandcalltoactionsmustberemoved within24hoursafterthesetevent.Thiscanalsobeautomaticallysettoexpirethrough thescheduler.

Footers

 Webdevwillprovideastandardfooter.Thefirstsetoflinkswillbespecifictothesite thattheuserison.Therestofthefooterwillbestandardforeverywebpage.

Thisdocumentisintendedasageneralstyleguide.Ifyouhaveissuesorspecificquestions, pleasedonothesitatetoreachouttothewebteamforassistanceorfurtherclarification.Ifyou areunabletoreachthewebteam,oryouneedemergencyassistance,pleasecalltheHelpdeskat (314)615-4357.