topContent Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus. Praesent in justo dolor. Ut porta iaculis felis, in faucibus turpis feugiat quis. Pellentesque congue sem in turpis blandit auctor. Etiam bibendum molestie ante, vel eleifend dui dictum id. Aliquam vestibulum lacus vitae velit porttitor, sed dapibus nisi dignissim. Proin porta arcu quis dui sodales dignissim. Vivamus malesuada lectus at arcu hendrerit, sit amet vulputate urna ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi purus ante, dapibus non magna vel, consequat elementum est.

Department Name In This Space

Page Name - City of Houston Online Style Guide

There are 14 editable areas on each page. Text is justified left, 10pt Arial. The two primary .css files used are below:

ADA FRIENDLINESS

  • Use ALT Tags for graphics
    • The basic reason for ALT Tags is to describe a graphic for webpage visitors who are blind or have a significant visual impairment. When someone utilizes a reading device such as JAWS, we want them to be able to identify graphics on our pages. 
  • Do not use click here as a text link. Use descriptive wording, as "click here" is ADA-unfriendly
    • The basic reason that “click here” should not be used is  that when someone utilizes a reading device such as JAWS because they are blind or have a significant visual impairment, they will simply hear the words “CLICK HERE” “CLICK HERE” instead of being directed to the reference site.  So what most experts recommend is that the full citation be listed instead of listing “click here”. 
  • Use black text (#000000) instead of shades of gray
    • The basic reason for fully black text is for the greatest ease of reading ability for those with visual impairments. Lighter grays make it more difficult for our website visitors to read our pages

PURCHASING DOT-ORG and DOT-GOV URLs
The City has an account with www.godaddy.com where we have purchased dot-org URLs for more than ten years. IT Department pays for the URLs and "forwards" to a page beginning with www.houstontx.gov.

The URL standard is www.houston[something].org. Derivation from this standard and from forwarding must be approved by the Mayor's Office of Communications.

Dot-gov URLs are owned by the federal government. For the local level, they are only available to us as City Name followed by two letter state postal code. The only available exceptions to dot-gov at local and state level are green and ready in front of the city and the two letter postal code for the state.  We have already done this with www.greenhoustontx.gov and www.readyhoustontx.gov.

WEBSITE EXCEPTIONS CRITERIA
City of Houston divisions and initiatives seeking exceptions to the modernized and standardized format of the www.houstontx.gov website must complete this Website Exception Checklist Form (.doc).

Those wishing to be exempted must meet four or more of six checklist items. Meeting the criteria does not necessarily guarantee exemption.

This completed form is to be routed through the HITS Enterprise Applications Support Division, and final approval remains via the authority of either the mayor or mayor’s communications director.

COLOR PALETTE
Find complementary and analogous colors at http://www.color-hex.com.

Drupal Color Palette

A Title

twoColLeft (half width) Morbi in ipsum ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam non elit quis turpis maximus vehicula at at ante. Suspendisse eget augue convallis, mollis turpis quis, mollis odio. Donec eu rhoncus tellus. Vestibulum rhoncus, dolor et sagittis consequat, nulla purus iaculis orci, at interdum ligula ante non odio. Cras eget maximus risus.

 

A Title

twoColRight (half width) Morbi in ipsum ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam non elit quis turpis maximus vehicula at at ante. Suspendisse eget augue convallis, mollis turpis quis, mollis odio. Donec eu rhoncus tellus. Vestibulum rhoncus, dolor et sagittis consequat, nulla purus iaculis orci, at interdum ligula ante non odio. Cras eget maximus risus.

 

middleContent (full width) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus. Praesent in justo dolor. Ut porta iaculis felis, in faucibus turpis feugiat quis. Pellentesque congue sem in turpis blandit auctor. Etiam bibendum molestie ante, vel eleifend dui dictum id. Aliquam vestibulum lacus vitae velit porttitor, sed dapibus nisi dignissim. Proin porta arcu quis dui sodales dignissim. Vivamus malesuada lectus at arcu hendrerit, sit amet vulputate urna ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi purus ante, dapibus non magna vel, consequat elementum est.

An H2 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus.
Read more A Hyperlink

An H3 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus.
Read more A Hyperlink
A Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus.
Read more A Hyperlink

threeColLeft25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus. Praesent in justo dolor. Ut porta iaculis felis, in faucibus turpis feugiat quis. Pellentesque congue sem in turpis blandit auctor. Etiam bibendum molestie ante, vel eleifend dui dictum id.

threeColMiddle50

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus. Praesent in justo dolor. Ut porta iaculis felis, in faucibus turpis feugiat quis. Pellentesque congue sem in turpis blandit auctor. Etiam bibendum molestie ante, vel eleifend dui dictum id.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus. Praesent in justo dolor. Ut porta iaculis felis, in faucibus turpis feugiat quis. Pellentesque congue sem in turpis blandit auctor. Etiam bibendum molestie ante, vel eleifend dui dictum id.

threeColRight25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, A Hyperlink ultricies sit amet aliquet et, auctor nec tellus. Praesent in justo dolor. Ut porta iaculis felis, in A Hyperlink faucibus turpis feugiat quis. Pellentesque congue sem in turpis blandit auctor. Etiam bibendum molestie ante, vel eleifend dui dictum id.
bottomContent Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus justo sit amet mattis sodales. Nulla velit nulla, ultricies sit amet aliquet et, auctor nec tellus. Praesent in justo dolor. Ut porta iaculis felis, in faucibus turpis feugiat quis. Pellentesque congue sem in turpis blandit auctor. Etiam bibendum molestie ante, vel eleifend dui dictum id.