City Website Formatting Guide
Have something to add to this guide?
- Your contributions are welcomed and encouraged.
- Email your suggestions to [email protected]
This style guide is offered as a resource to help new and existing website contributors format information effectively in this medium.
Formatting for the web is not the same as formatting for print. A few key characteristics that distinguish formatting for the web include:
- Accessibility - information posted to the City of Albuquerque's website is read across a wide variety of formats and devices, including those made for individuals with vision impairments who read content using screen readers. In addition, the majority of content today is accessed on mobile devices. It is vital that all City web pages are accessible to all citizens.
- Online Behavior - the internet has been widely available since the mid 1990s. In that time, website users have developed expectations for how sites are built and formatted. These style conventions ensure that information is presented in a manner that aligns with user expectations.
- Professional Image - everyone has an interest in presenting the City as a cohesive and professional organization. Following consistent writing style and formatting conventions ensures that we present our best selves to our community.
For specific guidance on writing for the website, view the City Website Writing Guide.
Headlines (Title of Events, News Items, & Pages)
Keep headlines short: six words or less. Whenever possible, put the most important information in the first two words of a headline.
- Track Your Bus with Transit App
- Baby Orangutan Expected this Spring
- Documentary Explores Albuquerque Homelessness
Summary
Always include a one-sentence summary in your item. This is important for optimizing search results for information and displaying properly on other city pages.
Use complete, imperative sentences (along with corresponding punctuation) in summary field.
- Attend the Museum's grand opening on Dec. 10.
- Feast on invertebrates at the Bug Dinner.
- View important information about disposing of your refrigerator.
Body Elements
This is the heart of your content. Strive to be clear, concise, and intentional with wording.
Ampersands
Use "and" instead of the ampersand (&) symbol.
Bold Text
Acceptable for emphasizing key information, such as telephone numbers or essential text. Bold text is utilized by screen readers to draw attention to very specific information. Use of bold text should be limited and focused. Not intended for formatting information.
Do not bold hyperlinks or headers.
Bullets
Bulleted lists make text more readable and visually coherent. If possible, limit bulleted lists to five or fewer items.
Birds common to Tingley Beach include the following:
- Ducks
- Geese
- Cranes
- Roadrunners
- Herons
Capitalized Wording
Avoid using all capitalized wording at all times, as it translates as shouting in the online context and is not appropriate for City website content.
- WHY ARE WE YELLING?!
City of Albuquerque
When referring to the municipal government, the "C" is capitalized in all cases, including without "of Albuquerque"
- The City believes in transparency and accountability.
- Welcome to the City of Albuquerque Sunport.
Days, Dates, and Months
Use the days of the week -- Monday, Tuesday, etc. -- when referring to events within seven days of publication.
Use specific dates -- e.g. June 6, 1944 -- when referring to a day more distant than the current seven-day period. Spell out months in text.
Use the following abbreviations to save space:
- Jan., Feb., Aug., Sept., Oct., Nov., & Dec.
Spell completely:
- March, April, May, June, & July
Avoid the number suffix in dates: Sept. 18, not Sept. 18th
Exceptions: July Fourth, when referring to the national holiday.
Email Addresses
When adding an email address to a website, use the email address in the text. The "Email" tool in the hyperlink menu allows you to configure email addresses that are clickable in a single link.
When possible, reference departmental email addresses instead of individual email addresses for website content to prevent information from becoming inaccurate as personnel changes occur.
- Contact the Web Team at [email protected].
Headings
Use H2 heading to organize high-level information.
Use H3 subheading if information requires an additional subheading.
Paragraph should be used for majority of body text. These organization structures facilitate accessibility for screen readers and Search Engine Optimization.
Do not apply additional formatting features such as bold text, italics, or underline to headings.
Key Point of Page
Sub-Point 1
Paragraph Text 1
Sub-Point 2
Paragraph Text 2
Hyperlinks
Incorporate links into the vocabulary of a sentence rather than the link itself. Do not bold or italicize hyperlinks. Use active wording for hyperlink language.
- Use: View specific route schedule information. Not: Visit www.myabqride.com for Bus Routes and Schedules.
Italics
Avoid using italics at all times. Italics do not render across all devices and platforms, including social media. When referencing titles, use quotation marks in lieu of italics.
- This sure looks nice, but it doesn't transfer on any social media site. "Quotation Marks" do, though.
Numbered Lists
Useful for providing information that should be organized in sequential order, such as directions or instructions. If order is not relevant to information being provided, use bullets instead.
Sentence Spacing
Use one space following a sentence, not two.
Serial (Oxford) Commas
Use before a conjunction in a sequence of three or more items.
- grapes, berries, and watermelon
- number lock, caps lock, and scroll lock
Time, Date, Location Order
Use the order of Time, Date, Location.
- The enchantment begins at 6 p.m., Dec. 24, Alvarado Transit Center.
- Wade the giraffe arrived at noon on Monday at the Rio Grande Zoo.
- Completed TPS Reports are due by dusk, Friday, on my desk.
Time References
Use periods after a.m. and p.m. Use 5 p.m. instead of 5:00 p.m. Use noon instead of 12 p.m. and midnight instead of 12 a.m.
- The banquet will take place from 8 p.m. to midnight.
Underlined Content
Avoid manually underlining content at all times, as it is reserved exclusively for hyperlinks. Use H2 (primary) or H3 (secondary) headings to organize information. See Headings for more information.
- You would be forgiven for thinking that this is a link, although it is not.
Additional Elements
These optional elements can enhance page content and better direct citizens to key information. Contact the Web Team to request one or more of these items to be placed onto a specific page, event, or news item.
Buttons
Custom buttons can be built to instruct users to take specific actions.
Images
Use images that you have intellectual ownership of (e.g. images that you have taken yourself, belong to a City department, or an official City social media account).
Avoid images with children in them unless you have signed authorization forms from the parents of each child in an image.
Do not use images that unnecessarily display private business or organization images or logos, as doing so could violate the City's anti-donation clause.
Maps
Google Maps can be embedded into a page, news item, or event upon request. Contact the Web Team with the specific URL that you want a Google Map for, along with any specific wording for the map itself.
Right Column Textbox
These are great quick reference features that can be customized for your page. All elements in this bar need to remain responsive in design to ensure compatibility across formats. Contact the Web Team with the specific wording to have a side bar added to your page.
Suggested References
- Website Style Guide
- The Elements of Style, Strunk & White
- Merriam-Webster's Dictionary
- Plone Cheat Sheet for Website Contributors