Design Standards & Guidelines

Every page should have a Contact Us box unless otherwise approved by your Content Manager.

The Contact Accordion portlet should be located at the top of the page and should contain the following information.

• Context Header (optional) - You can use this field to add context to who the contact information is for (a person's name, division, etc.)
• Location URL (optional) - Link to a page with your location(s) information (address, hours) or a map to your location
• Phone number (strongly recommended) - Your department/division phone number
  • Use parentheses for the area code, following the format (941) 123-4567 or (941) 123-4567 ext. 890
• Email (strongly recommended) - General department/division email recommended
• Social media links (optional)
  • Facebook
  • YouTube
  • Twitter
  • Flickr - You may want to link to a relevant album within the County's Flickr account
  • Instagram
  • LinkedIn

Department and division landing pages should have featured hero images. However, subpages are not required to have a featured hero image.

The Featured Hero Image can be changed. Please seek the approval of your Department Content Manager or the Site Administrator first.

View guide on how to add or remove a featured image.

FEATURED HERO IMAGE REQUIREMENTS

• Photo should be 1400x500. NOTE: The top quarter of the image will be covered by the mega menu. Keep this in mind when resizing. Suggested tool: BeFunky.com
• Photo should be compressed. Suggested tool: optimizilla.com
• Text is not permitted on the image itself (use a regular photo and you can use the caption if you want to add context).
• We strongly recommend sending your desired photo(s) to the Site Administrator for resizing.
• Resize the browser to mobile size after you upload to see if it works well.

Fonts & formatting

Do not change the default color or font type. 

Always use Paste as Plain Text when pasting in content from another page or document. This will ensure you don't bring over different fonts or styling.

• Bold - Use bold sparingly to emphasize important points or call attention to an item. Don't bold entire sentences or paragraphs.
• Italics - Italics are not recommended. They can be difficult to read and often end up running into the text before and after the italics.
• Underline - Never underline words. It makes them look like a link.
• Bullets - Use of bullets is encouraged to make chunks of information easier to digest. Try to keep them short and sweet.
  •  Use Add Paragraph (P+) before inserting bullets (otherwise all your copy will become bullets).
  • Use Add Indent to insert secondary bullets like these.

Use Heading 2 and Heading 3 headers to break your content up into sections.

You must use them in the proper order. (Always start with Heading 2. Heading 3 should always be nested under a Heading 2.)

How to insert headers

In the third row of a toolbar, there is a field that likely has a "p" or "h2" in it. Click the dropdown and you should see Normal, Heading 1, Heading 2, Heading 3, etc.

• All copy should be Normal ("p" when not looking at the dropdown).
• Headers should be Heading 2 (h2) and Heading 3 (h3).
• Never use Heading 1 (this is just for page titles).

Do not change any formatting in the headers. Do not bold, italicize or underline headers.

Photos should only be used if they add significant value to the content of the page. Too many photos slow the loading time of a page and can make it harder for visitors to find the information they're looking for.

Think mobile: An image takes up a lot of valuable real estate for a mobile user trying to find information. If the image is not necessary to the message, rethink if you need it.

WEBSITE IMAGE STANDARDS

DO

• Use images from Manatee County's Flickr page (contact Information Outreach with any questions) - any other source is strongly discouraged
• Compress photos before you upload them so they don't slow the page's load time. Suggested tool: optimizilla.com
• Include metadata on every image (see Image Properties under "How to Insert an Image" below)

DON'T

• Use clipart, stock photos or copyrighted images
• Use altered images or graphics without approval
• Put words or important content on a photo or graphic (see below)

Altered or Photoshopped images (beyond basic resizing) must be approved by an administrator.

Photos should not have text on them. If they do, you must include that information in the metadata for the image to meet accessibility standards. (Featured hero images cannot have text on them under any circumstances.)

All the same information must also be in the copy of the page so it is ADA compliant and searchable on the site.

• Ex: You want to post an image of a flyer for your upcoming event. The same information on the flyer should be in the body copy of the page so it's accessible by visually-impaired visitors and so citizens can find the information in our search results.

Contact the Site Administrator to embed video if you want it to be responsive (increase/decrease with the size of the screen and on mobile).

All videos must have captions before they can be embedded on the site.

YouTube will usually auto-caption a video, but it is your responsibility to review the captions and make edits so the content is correct in spelling, context and timing.

Resource: How to edit YouTube captions

All department landing pages should have Quick Links. Some divisions and other landing pages may have quick links, with the approval of the Site Administrator.

You must always have four quick link buttons — no more, no less. This is to maintain consistency across the site.

You must use the Department Quick Links portlet to add quick link buttons. Do not create your own buttons outside the CMS.

View guide on how to add quick links.

Use of tables is discouraged on the website. Tables do not respond well in mobile and tablet views, cutting off information in most cases.

If you are looking to change the layout of a page to allow for multiple columns, contact the Site Administrator for assistance.

In cases where a table is necessary to display data or information, contact your Department Content Manager or the Site Administrator for assistance in setting up a table with the proper formatting.