Layout Requirements & Specifications

Layout requirements and specifications for:

Any site developed on behalf of B.C. government must:

  • have been approved by the Joint Working Group
  • be developed according to the requirements in this guide; and:
  • adhere to the visual and writing styles from the web standards and guides; Writing for the Web; Plain Language Guide, Content Development Guide and the Visual Design Guide
  • not duplicate information hosted elsewhere
  • ensure all information relates and pertains to site intention
  • host “static” content within CMS Lite (gov.bc.ca) where possible

Header

  • Use full screen width blue background banner with gold line
  • B.C. logo linking back to gov.bc.ca
  • Site Title or Endorsed
  • Search offering
  • Login and user details hosted in the top right corner
    • Must show search icon next to login
    • Search icon expands out to show full search box

Navigation

Sites requiring navigation must follow these rules.

Note: Customized buttons and navigation should be vetted by JWG or BCID (Corporate Identity team) prior to implementation.

  • No navigation (other than login/logout) within the blue header banner
  • No navigation should use images as buttons
  • Use collapsable header functionality when navigation is required
  • Any site navigation must use CSS and JS files for all forms of navigation.
  • First level site navigation is to use the blue bar (#38598a) located below the gold bar header banner <class=”level2Navigation”>
  • Second level site navigation is to use the lighter blue bar (#5475a7) located below the first level <class=”level3Navigation”>
  • If more than 2 levels of navigation are required it is recommended to use the CSS and coding to provide navigation according to the left side navigation offered on Gov.bc.ca <class=”level4Navigation”>
  • Bread crumbs are to be used <ol class=”breadcrumb”> home is to return to the site's home page

Login/logout buttons

  • Use the words Login/Logout
  • Text/type is 13pt Myriad Pro #003366
  • Login id or name to be in italics to the left of the button
  • Box: 70px width; 25px height; background color #ffffff
  • Do not use search box in the same space, provide the search icon only

Search offerings

  • The "all Gov" search offering is to be used highlighting it is an "all Gov" search. Located in the top right of the header banner using the words “Search all of government” (represented in alt text for search box as well)
  • Internal search functionality can be provided within the body area, specifically for site only navigation using the words “Search this site” (represented in alt text for search box as well)

Body

  • Optional use of grey side bars. If the full space is required by the application, it is permitted to have the entire body area white background
  • It is recommended to use the gov.bc.ca right hand column boxes, see CMS Lite manual for uses and layout options
  • Return to top floating icon
  • Share floating icon
  • Not approved: Custom buttons or navigation that is outside B.C. government online styles

Footer

  • Must use full blue footer banner background as per www2.gov.bc.ca
  • Representation of B.C. Government corporate website footer navigation. Must include:
    • “Site title” returns to home page of external site
    • “About” explains external site purpose. Provide background and context of who owns, manages, influences the site – aim at being transparent
    • “Disclaimer” use core government disclaimer statement. Any addendums must be vetted by ministry or central legal advisors before being released)
    • “Privacy” use core government privacy statement. Any addendums must be vetted by ministry or central legal advisors before being released
    • “Copyright” use core government copyright statement. Any addendums must be vetted by ministry or central legal advisors before being released
    • “Contact Us” provides contact details for external site provider
  • Customized external site map
  • Use of collapsible footer functionality where necessary