Page Title
This is the introductory paragraph to the page. Make sure that this paragraph is clear and concise, and explains the "who, what, when, and/or where" of the page. Unless this page is organizationally-focused, it should NOT start with "About Us" information or anything related to the statutory authority of the content or the office providing.
The success of your web page is built on defining your purpose and audience. Good planning, including planning to keep your content fresh and up-to-date, is key. A few central ideas underlie most of the elements of the Homeland Security web style -- understanding and embracing them is important to the success of your content.
The needs and characteristics of your primary audience or audiences should determine everything about your approach: who are they and what are they looking for on your site? Don't expect that they think like you. Ask them what they want.
Visitors come to your site because of content. Their decision to stay or leave is made in seconds. So you must not only give your visitors the content they need but also guide them to the most important or most promising choices--quickly.
Don't assume that visitors know as much about your content as you do. Make it easy for them to find their way around by giving them a strong sense of structure and location. Remember that you don't know how they arrived at your pages.
The Plain Language Act requires "clear Government communication that the public can understand and use"... and THAT is what all of this is really about.
- Watch a fun video about plain language
- Visit PlainLanguage.gov
Notes
Header
- If the program or project has a logo, that can be used instead of the "Program Title" text in the header (and vice versa). View an example of this page with text in the header.
- If the site has no search engine, the search box can be omitted from the header.
Breadcrumbs, Page Title, and Languaging
- If the site only have a few pages, the breadcrumbs can be omitted.
- If the site only has one page (example: a login page), then the Page Title can be omitted.
- If the site is available in multiple languages, those languages should appear as buttons below the Page Title but above the introductory paragraph. The buttons should be translated into the language that they're linking to (i.e. "English", "Español", "Português", "Français", "Pусский", etc.) and use the DHS USWDS class "usa-button usa-button--accent-cool" (green with black text).
Page Content and Metadata
- Text content on the page can stretch the width of the content area - it doesn't have to be limited to a 60% flush left.
- If the site only have a few pages, the Topic and Keyword displays can be omitted.
Footer
- The footer menu mirrors the top-level of the main (top) menu.
- The large DHS logo and wordmark in the footer can be swapped with either the logo/seal of the program's primary agency or a program logo.
- The social media icons in the footer should be tailored to the social media accounts administered by the program. If there are no social media accounts for the program, they can be omitted.
- The contact information in the footer should be the contact information for the program. If the program doesn't have public contact information, this can be omitted.
Identifier and Required Links
- The DHS identifier consists of a small DHS seal to the left, with the URL of the program site on the first line to the right. The text "An official website of the U.S. Department of Homeland Security" appears below the URL of the program site. This line should not be modified, as it indicates the parent department of all DHS public websites and extranets.
- The links in the identifier area on this page are the minimum required links for federal websites. Additional links CAN be added, but they are not required. Additional information:
- About [Program]: Links to a page that describes the program - either a page on the program site or on the program's Primary Agency site.
- Accessibility: Links to an accessibility page - either for the program or to the accessibility page on the program's Primary Agency site. Failing that, link to DHS.gov/accessibility.
- FOIA Requests: Links to a FOIA page - either for the program or to the FOIA page on the program's Primary Agency site. Failing that, link to DHS.gov/freedom-information-act-foia.
- Privacy Policy: Links to the Privacy Policy for the particular site.
- [ParentPrimarySite].gov - Links to the primary website for the program's parent agency (i.e. DHS.gov, FEMA.gov, ICE.gov, etc.)
- The NTAS widget is required in the footer of all DHS public websites and extranets and is presented as an iframe. More information is available at DHS.gov/ntas-widget.
General Design Notes
- Content should be centered on the page with the following break-points for mobile responsiveness:
- The USWDS uses a 12 column grid layout by default and scales/stacks for mobile responsiveness.
- When viewing a page on desktop, header and footer elements should align to either the left or right edge of the content block, with the exception of the content in the identifier block below the footer (that is indented slightly on the left and right side). You can draw a virtual line down the left and right side of the page to verify alignment.
- In mobile or tablet view, there should be a 1rem (or 16px depending on system used) left and right padding between the content of the page and the edge of the screen.
| Device | Breakpoint |
|---|---|
| Desktop | 1024px to infinity |
| Tablet | 480px to 1023px |
| Mobile | Less than 479px |