Translate Our Site

City Website Formatting Guide

A quick reference guide to formatting elements on the City of Albuquerque website.

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.  "Email" tool in the hyperlink menu.

When possible, reference departmental email addresses instead of individual email addresses for website content to prevent information from becoming inaccurate as personnel changes.

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.

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:30 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 think that this is a link, but it is not.

Additional Elements

These optional elements can enhance page content and better direct citizens to key information. Contact the Web Team at [email protected] 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 Web Team with the specific wording to have a side bar added to your page.

Suggested References

Latest from Twitter