This toolkit not only sets the standards for Largo.com Content Editors, but is also a tool to create and edit content for consistency. Using this guide can help our interdepartmental content editors maintain the standards of the Largo’s brand to ensure content stays consistent and focuses on a service-oriented digital experience. View Website Accessibility Resources here.
BEST PRACTICES
CONTACT INFORMATION (EMAILS & PHONE NUMBERS)
- Contact Name/Title Bolded (Generic only, no staff names should be used)
- Phone Number listed with area code and dashes. (Example: 727-587-6740)
- Email (Generic only, no direct staff emails should be displayed)
- Capitalize the first letter of the email address (Example: [email protected])
- Specific staff contacts should be listed in the Staff Directory and maintained by the department's Web Admin for updates
- For contacts listed in the center of a webpage, list a generic title and phone number with extension.
- Example: If you need assistance, please contact Largo's Business Assistant at 727-586-7360 Ext. 7206 or email [email protected].
HEADERS
- Break long pages of content with headers
- To apply a header, select your text then go to Styles > Header or Styles > Header or Subheader
- There should be no space above bulleted lists
- Avoid over-bulleting
- Bullets should only go (at the most) two levels deep
- The first letter of each item in a bulleted list should be capitalized
- There should be a break between the bottom of a bulleted list and the next block of text
DATES AND TIMES
- Spell out day and month (example: Monday, December 1)
- Use "am" and "pm" (example: 8am - 5pm)
- Format numbers at xxx-xxx-xxxx
- Email (no dash between "e" and "mail")
- Format phone numbers as clickable links (Watch video)
- Format emails as clickable links (Watch video)
- Format emails with Department/Service (example: Business Services)
- St, Ave, and Blvd are always abbreviated unless used in a paragraph
- Format direction as N, S, E, W, NW, SW, etc.
- First through Ninth are spelled out and capitalized when used as street names and figures with two letters will be used for 10th and above (ex: 7 Fifth Ave. or 100 21st St.)
- Format phone numbers as clickable links (Watch video)
- Format emails as clickable links (Watch video)
- Hyperlinks open in a new window unless the link is to another page on this site
- Don't use the terms click here and under construction
- Underline formatting is only used for hyperlinks
- Rename update files the current file name to ensure links do not break
The main goal of a landing page is to get the user where they want to go next quickly and easily! Consistency is key when formatting landing pages.
- Keep content short and easy to understand by using common words, headers and bullet points
- Upload high quality photos that are resized for the page template
- Use clear call-to-actions to City services, programs and events (See live example)
- Left align images when wrapping around text
- List quick link tiles (circle and square) in threes
Our website offers online fillable forms as well as Service Request Forms. An online fillable form can be created with the CMS editor, while a Service Request Form needs to be created via the Revize Service Portal.
FILLABLE FORMS
An online form created in the Forms Center app can be submitted to specific email addresses. They are a quick and easy alternative for users to communicate with us and provide important feedback or complete actions or tasks online.
WATCH TUTORIAL
SERVICE REQUEST FORMS
Service Request Forms provide similar functions as a fillable form but also allow the benefit of tracking the progress. The majority of Largo's service forms have now been moved to VueWorks. For more information on these forms and how to best use them, please complete a Marketing Request Form.
FILLABLE FORMS
An online form created in the Forms Center app can be submitted to specific email addresses. They are a quick and easy alternative for users to communicate with us and provide important feedback or complete actions or tasks online.
WATCH TUTORIAL
SERVICE REQUEST FORMS
Service Request Forms provide similar functions as a fillable form but also allow the benefit of tracking the progress. The majority of Largo's service forms have now been moved to VueWorks. For more information on these forms and how to best use them, please complete a Marketing Request Form.
Images should be used to enhance the content on your page. Stay consistent with these standards to keep your images on brand. If you have multiple photos that you would like to include on a page, we recommend either using a header slideshow banner or the photo gallery template.
- Only use Largo photos or stock photos with warm, sun-kissed tones and images of people and friendly faces, or use actual photographs representative of the services offered (Example: a stock photograph of building plans)
- All photos must be high quality and not distorted, pixelated or stretched
- Image sizes: 100kb for a large image; 50kb for a medium image; 30kb for a small image
- NO CLIP ART, LOGOS OR ILLEGALLY DOWNLOADED GRAPHICS!
HEADER SLIDESHOW
A header slideshow allows for multiple images to share the same space on a page. Images should be the same orientation and size when embedding a slideshow on the page to avoid images that look like they are "jumping" when the slides change. The standard is 3-5 images as more images will effect the page's load time. Text, logo or other placed graphics should not be placed ontop of the slider image. Image size: 1920x1280
WEB BUTTONS
For interior pages, there are two types of buttons: Circle and Square Tiles. These are found on select templates, and are to only be turned on for use by Web Admin.
A header slideshow allows for multiple images to share the same space on a page. Images should be the same orientation and size when embedding a slideshow on the page to avoid images that look like they are "jumping" when the slides change. The standard is 3-5 images as more images will effect the page's load time. Text, logo or other placed graphics should not be placed ontop of the slider image. Image size: 1920x1280
WEB BUTTONS
For interior pages, there are two types of buttons: Circle and Square Tiles. These are found on select templates, and are to only be turned on for use by Web Admin.
PHOTO GALLERY
Great for showcasing several photos and videos, the Photo Gallery template can help increase online engagement. It also has a slider to scroll through photos and thumbnails for each picture. Photos should be of high quality but there is not a "maximum" amount for the gallery. We ask that you use your best judgment and choose photos that display all that Largo has to offer.
- Upload images to the Revize Imagery Gallery
- Do not drag and drop from your desktop directly into the CMS Editor
- IMAGE ALIGNMENT: Left (Text Wraps) if you'd like to wrap your photo around text.
- The DESCRIPTION (ALT) field must be completed. This is for website compliance and accessibility. Describe your photo and do not leave this field with just numbers.
- Set V Spacing and H Spacing to at least 5 pixels. Adjust as needed.
- Watch this video for step-by-step instructions for uploading images
The Document Center allows you to create and archive documents our site visitors need: applications, brochures, manuals, etc. The Document Center should not be used to house any internal documents for staff, unless preauthorized by the Webmaster. To keep our website intuitive, accessible and consistent, PDFs should be updated with the previous file name. For example, if you are updating a Permit Application, the file name MUST match what is currently on the website. So if the file is PermitApplication.pdf, rename your new file PermitApplication.pdf then upload to the document center.
PDF ACCESSIBILITY
AS OF JANUARY 2019: All new PDFs must be made web accessible/ADA complaint prior to being uploaded. Please visit Largo.com/WebADA for resources and how to create an accessible document.
PDF ACCESSIBILITY
AS OF JANUARY 2019: All new PDFs must be made web accessible/ADA complaint prior to being uploaded. Please visit Largo.com/WebADA for resources and how to create an accessible document.
PLEASE NOTE: Prior to uploading any new PDF, you must first make the PDF accessible. Please visit Largo.com/WebADA for tips on how to do this. Questions? Contact [email protected].
UPLOADING A NEW PDF
UPDATING AN EXISTING PDFUPLOADING A NEW PDF
- Go to Largo.com/Documents and login
- Choose your Category folder
- Click New Document, fill in the Document Name field and click Upload File
- Once in the File Manager box opens, click the "document_center" file folder
- Create a new folder for your documents
- Drag and Drop your document from your computer's file folder to the Upload box
- Check your description (ALT) information - this should include actual words and not numbers for website compliance
- Click Save
- Upload all documents to the main Document Center first then relink
- Do NOT upload PDFs directly to webpages
- Upload ".pdf" file types only, do not upload other file extensions, ie .odt, .odg, etc.
Write in a way that suits the situation. Ask yourself: Who is going to read this? What do they need to know? How might they be feeling? Am I on brand by presenting Largo in the best light? Help people find the information they need quickly and easily. Guide them through the process.
HERE ARE A FEW TIPS...
HERE ARE A FEW TIPS...
- Focus your content on City services, events and ways to engage
- Use plain language and simple sentences
- Choose clarity over cleverness
- Create content for everyone
- Make content web friendly, easy to navigate and find
- Less is more
STRUCTURE
Largo.com is arranged so content is concise, organized and intuitive. Under “Connect” the website focuses on Community Pride and Sustainability, while “Services” highlights our commitment to Public Health and Safety. In addition, content is structured to be collaborative throughout the website allowing quick access to relevant information. Additionally, pages with our left navigation provide a navigational resource. With our design, flexibility is available to change left nav to best match the content and navigation to other sections within the website.
The website is a very visual representation of the Largo brand and needs to align with the City's brand, image and reputation.
Largo.com is arranged so content is concise, organized and intuitive. Under “Connect” the website focuses on Community Pride and Sustainability, while “Services” highlights our commitment to Public Health and Safety. In addition, content is structured to be collaborative throughout the website allowing quick access to relevant information. Additionally, pages with our left navigation provide a navigational resource. With our design, flexibility is available to change left nav to best match the content and navigation to other sections within the website.
- Top Nav: Connect, Services, Things to Do, How Do I?
- Bottom Nav: Mega Menu, Catch All
- Search Bar: Every page!
- No more than "three clicks in"
The website is a very visual representation of the Largo brand and needs to align with the City's brand, image and reputation.
- Voice: Warm, Friendly, Inviting, Inclusive
- Tone: Energetic, Welcoming, Motivated
To keep content understandable, concise and on brand, it should be:
One of the best ways to make content clear and usable is to use plain language. When we use words people understand, our content is more findable, accessible and inclusive. Plain language also helps with indexing content into search engines.
Don’t use formal or long words when easy or short ones will do. Use buy instead of purchase, help instead of assist, about instead of approximately, and so on. Check out this list for shorter, simpler words and this list for words to avoid.
When to use legal and technical terms
Present complicated information clearly so it’s easier to understand. If you need to include legal terms or technical language, include a short, plain-language summary or define your terms up front. It’s fine to use technical terms when they’re appropriate for the audience or the situation, but you need to explain what they mean on the first reference.
- Specific
- Informative
- Clear and concise
- Friendly, warm and inviting
- Use contractions (such as can’t and won’t)
- Use the language people are using (for example: “trash” instead of “solid waste”)
- Use Google Trends to check for common search terms
- Use headers, short sentences and bullet points to make text scannable
Content on government sites often makes a direct appeal to the public to get involved or take action. Address the user as you whenever possible. For example:
USE PLAIN LANGUAGE- You can email us at [email protected] or connect on Facebook, Twitter and LinkedIn.
- Learn more about starting your business in Largo.
- If you need help, please visit our online service request portal or contact the City Manager's Office.
One of the best ways to make content clear and usable is to use plain language. When we use words people understand, our content is more findable, accessible and inclusive. Plain language also helps with indexing content into search engines.
Don’t use formal or long words when easy or short ones will do. Use buy instead of purchase, help instead of assist, about instead of approximately, and so on. Check out this list for shorter, simpler words and this list for words to avoid.
When to use legal and technical terms
Present complicated information clearly so it’s easier to understand. If you need to include legal terms or technical language, include a short, plain-language summary or define your terms up front. It’s fine to use technical terms when they’re appropriate for the audience or the situation, but you need to explain what they mean on the first reference.
As Largo.com Web Editors, we strive to provide a user-friendly, accessible website to all users. To make sure your website is in compliance, visit Largo.com/WebADA for best practices, resources and training opportunities for all things Web ADA. Have questions or need more help? Contact Communications and we'll point you in the right direction.
Largo.com is driven by Google search, meaning that when you search something within our website, it's like searching something on Google. To get more traffic to your webpage, fill out the Meta Data and Keywords on your main landing page. To do this:
- Log into the page you manage
- Click "Edit Meta Data" next to the "Edit Center Area" button
- Type in the Page Title (ie: Website Best Practices)
- Type in 6-10 keywords (these should be similar words or phrases found on your page)
- If you'd like, you can provide a brief description about your page to better help Google search for your page's content
- Leave the "Redirect URL" field (this is a Webmaster function only)
- Click Save
UPDATING CONTENT
Be sure to review the content on your webpage(s) each month or quarterly. Here are a few items you should check:
- Any and all hyperlinks (text links, quick link icons and photo tiles)
- Images loading too slowly
- Content that should be linked on your webpage
- Misspellings
- Any accessibility issues
- Fillable forms sending correctly
- Left navigation column (Contact Info, Related Pages, Documents, etc.)
The Events Calendar is one of the best and easiest ways to keep our community informed about what is going on in and around Largo. Empty calendars will make users question if the website is up-to-date. If you are responsible for maintaining the events calendar, it's your responsibility to ensure events are scheduled timely, at least three months out from the event, if possible. If an event is canceled, editors are to remove the event from the calendar ASAP.
AS OF JANUARY 2019: All new PDFs must be made web accessible/ADA complaint prior to being uploaded. Please visit Largo.com/WebADA for resources and how to create an accessible document.
Documents are to be managed and reviewed by every content provider to make sure the link is working, that the PDF is the current version and that documents are made accessible. Also, even if you delete a document from the live webpage, it will still need to be "hard deleted." This can only be done by the Webmaster. If you have documents that need a hard delete, please send a list with file hyperlinks to [email protected].
Documents are to be managed and reviewed by every content provider to make sure the link is working, that the PDF is the current version and that documents are made accessible. Also, even if you delete a document from the live webpage, it will still need to be "hard deleted." This can only be done by the Webmaster. If you have documents that need a hard delete, please send a list with file hyperlinks to [email protected].
We all know that people change jobs and government officials can change every election. The Staff Directory should be updated whenever a staffing change occurs to avoid confusion. Here's how to update the Staff Directory...
- Go to Largo.com/StaffDirectory and login
- Click the Edit this List button
- To add a staff member, click the blue button at the top right, complete the fields and click Save once edits are made
- To edit a listed staff member, click the green pencil and click Save once edits are made
- To delete a listed staff member, click the red X
