City Website Formatting Guide
Have questions something to add to this guide?
Email us [email protected]
Formatting for the web is not the same as formatting for print. A few key characteristics that distinguish formatting for the web include:
- Accessibility - It is vital that all City web pages are accessible to everyone. A wide variety of formats and devices are used by a diverse population to access information on the website. About half of our users access the site with a mobile device.
- Online Behavior – Appropriate and consistent formatting ensures users can more easily access information. Since the mid 1990s when the internet became widely available, website users have developed expectations for how sites are built and formatted.
- 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 writing for the website, view the City Website Writing Guide.
Headlines & Page Titles
Keep headlines and page title short at six words or less. 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
Page Summary
Always include a one-sentence summary on your page. This improves search results and displaying information properly on other City pages.
Use complete a complete sentences and punctuation in the 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.
Headers
Use Headers to introduce the subject of the text to follow.
Do not use Bold as a substitute for a Headers.
Headers must be used in the correct order. Header 1 is the title of the page. Header 1 to header 2 is ok. Header 1 to header 3 is not.
Header 2
Text.
Header 3
Text.
Links
Link text should be meaningful when read out of context.
Do not bold or italicize hyperlinks.
Use active voice for hyperlink language.
- Use: View specific route schedule information. Not: For specific route schedule information, click here.
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].
Bold Text
Use to emphasizing key information, like telephone numbers or essential text, and should be limited and focused. Bold text is used by screen readers to draw attention to very specific information. Not intended for formatting.
Do not bold hyperlinks or headers.
Bullets
If possible, limit bulleted lists to five or fewer items.
Birds common to Tingley Beach include:
- Ducks
- Geese
- Cranes
- Roadrunners
- Herons
Capitalized Words
Avoid using all capitalized words as the online context is shouting and is not appropriate for City website content.
- WHY ARE WE YELLING?!
Days, Dates, and Months
Use the days of the week, Monday, Tuesday, . . ., for events within seven days of publication. Use specific dates, June 6, 1944, in reference to a more distant date.
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
Don't use number suffix in dates: Sept. 18, not Sept. 18th. The exception is July Fourth.
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.
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.
Underlined Content
Do no underline text, it is reserved exclusively for hyperlinks. Use H2 (primary) or H3 (secondary) headings to organize 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
A Google Map can be created and embedded into a page, news item, or event upon request. Contact the Web Team locations, customization for the map and where you would like it embedded.
Please contact the Service Desk for a custom GIS map.
Textboxs
Contact the Web Team with the specific wording to have a side bar added to your page.
Forms
Contact the Web Team if you would like a cabq.gov webform or a Survey Monkey form.
Custom URL
Contact the Web Team if you would like a custom URL beginning with cabq.gov, like www.cabq.gov/jobfair
Suggested References
- Website Style Guide
- The Elements of Style, Strunk & White
- Merriam-Webster's Dictionary
- Plone Cheat Sheet for Website Contributors