USAID Web Site Branding
In order to accomodate the new USAID Brandmark on the web site, we have instituted some changes to the site template. These changes are necessitated by the graphic standards mandated by the USAID Branding Initiative. These changes must be implemented as you update or add content to your section of the USAID web site. Top-level pages (index pages for a major section of the site) should be changed as quickly as possible.
The changes will primarily affect the top header of the USAID page template and incorporate the new brandmark. They will also correct some ongoing design and accessibility issues caused by mistakes in earlier versions of the template, which are still in use on a large number of site sections. We will, additionally, be more rigorously enforcing compliance with the template guidelines that have in the past been overlooked in some cases.
1. Top Header
The new top header contains three key elements - the USAID Brandmark on the left, the category/section title in the middle, and a rotating image/story link on the right. The overall size of the header has changed, from 75 pixels high to 117 pixels high, in order to comply with the clearance requirements of the new graphic standards. This is located in the main images folder and must be referenced at /images/main/usaid_logoc.gif.
The category/section title is also centrally located - you must choose one of the titles at www.usaid.gov/images/titles/ for this section. If there is no title for your section, please contact lpa.uploads@info.usaid.gov and we will create one for you. Titles must be concise, reflecting the broader category or topic area a page falls under. See Figure 1 below for an example.
The rotating image/story link on the right side of the header is a server-side include that features four stories from the USAID Telling Our Story system. The default include is /modules/corner/general_photo.html, which will display the four stories currently featured on the USAID home page - this will change every month. You may also use one of the regional or sector-specific includes we have made available at www.usaid.gov/modules/corner. Currently, these are available for each region, and for the following topics: agriculture, democracy and governance, education, economic growth, environment, and health. The stories featured in these will change from time to time -- and we will add more topics -- as new stories are added to the Telling Our Story system. You may also suggest storis for inclusion by contacting us at lpa.uploads@info.usaid.gov, but they must be stories located at www.usaid.gov/stories/
The code for the header section is:
<tr>
<td valign="top" width="228"><img src="/images/main/usaid_logoc.gif" width="228" height="117"
border=0 alt="USAID: From The American People"></td>
<td valign="top" width="334"><img src="/images/titles/toptitleXXXXX.gif" width="334" height="117"
border=0 alt="XXXXXX"></td>
<td valign="top" width="188"><!--#include virtual="/modules/corner/general_photo.html" --></td>
</tr>
Please remember to replace the XXX marks with your header graphic and alt text. This code is to be pasted in place of the code currently between the "Start Page Header" and "End Header" comments, approximately at lines 43-50 in the standard template.
If you are using a Milonic submenu on your pages, the y-coordinate of its starting point will also need to be adjusted by 42 pixels to account for the new header height.
2. Accessibility Fix
The "skip navigation" feature is currently nonfunctional on many pages due to an error in a very early version of the page template that is still in use on many pages of the site. The anchor for the skip feature currently reads:
<a href="#content"></a>
On many pages of the site. This is located just above the "Start Breadcrumb" comment, approximately line 85 in the standard template. This must be changed to:
<a name="content"></a>
Pages missing this change will be rejected.
3. Site Color Palette
In order to resolve differences of opinion regarding appropriate secondary and tertiary colors for side modules, we are now restricting the color palette allowed for modules. The following color values are the USAID Standard Module Color Palette:
Dark Blue
class="Blue" | Light Blue
class="LightBlue" |
|
|
Dark Gray
class="DarkGray" | Light Gray
class="Gray" |
|
|
The top navigation box must be red. Other modules can use dark blue, as well as secondary and tertiary colors. Please use your best judgement in arranging these modules on the page.
Figure 1.
4. Module Spacing
A very early version of the template mistakenly included an extra space between the top navigation box and the first included module. It looks terrible and doesn't fit with the overall design. We have been attempting to fix this error since version 2.2 of the template, but it continues to show up. See Figure B for an example. The culprit is the following block of code, located immediately above the End Navigation comment, approximately line 76:
<tr>
<td valign="top" colspan="2" width="198"><img src="/images/spacer.gif"
width="2" height="2" border=0 alt=""></td>
</tr>
Please remove this block of code. Pages that continue to have this code will not be approved.
5. Module Content
Please exercise some judgement when creating and maintaining modules. They should be something useful to the visitor, allowing him or her to get to more in-depth information on a topic, see recent news items and publications on a topic, or view related information elsewhere on the USAID site. A "What's New" module containing one link to a ten-month old press release, for example, is not a useful module.
Please also keep in mind that modules allow your content to be syndicated across the USAID site, so you may want to include a link to the home page of your section in the "What's New" or "Key Resources" module. Additionally, we have created a series of modules for each of the countries in which USAID works, to provide users with quick links to each country's main page, mission site, success stories, State Department background notes. These can be found in the regional folders at www.usaid.gov/locations/modules/.
6. Guideline Compliance
We will be more rigorously enforcing violations of the template in the future. Overwriting of the stylesheet, inaccurate meta data, unapproved menu scripts, multicolored modules, and above-the-header graphics will not be allowed. Please see Figure B for an example.
Figure B.
Back to Top ^
|
