Standard: NEW Icon
On this page
All standards and guidance
Definitions
A "NEW" icon is a small graphic that indicates a piece of content is new. For example: 
Top of page
Content requirements
- Using a "NEW" icon is optional, but if you choose to use one, follow the directions below and these requirements.
- Use only one or two "NEW" icons on a page; too many create clutter and reduce their effectiveness.
- Do not write text that redundantly suggests newness, e.g., "EPA today initiated ..." (see the Timeless Text standard)
- Note: the "NEW" icon will not appear on browsers that do not have Javascript enabled. Do not attempt to provide a non-Javascript alternate; this is not a critical loss of content.
Top of page
Style requirements
- Use the standard code to display the standard "NEW" icon.
Top of page
How to
Template 3.2.1
Note - The Javascript code for the "New!" 
icon described below is already built into the core.js file of Template 3.2.1. Do not write, adjust, or add code for Javascript.
- Write your link or text as usual on your Web page.
Example: <p>Draft rule released.</p>
- Decide whether you want the icon to appear before the text or after, then add the
<ins> element as shown in the examples below. This element has a "datetime" attribute built into it. Add the date in format YYYY-MM-DD, using numbers only. Use the date you want the "New!" icon to first appear, not the date you want it to disappear. You must use the close </ins> tag.
- To put the icon before the text, put the text OUTSIDE, AFTER the <ins> element:
<p><ins datetime="2007-06-17"></ins>Draft rule released.</p>
- To put the icon after the text. put the text INSIDE the <ins> element:
<p><ins datetime="2007-06-17">Draft rule released.</ins></p>
- The "New!" icon will remain visible for 30 days from the date you used.
- You do not have to add alt text for this graphic. Alt text is built into the Javascript.
- To make the icon appear for fewer days, just back-date the date accordingly. You cannot make it appear for more than 30 days.
- Because the
<ins> element is valid XHTML, you don't have to take it out after 30 days have passed. Also, search engines can use the <ins> tag to date content.
Spanish Template (3.2.1)
Follow the same directions as above to add a Spanish "Nuevo!"
icon. When the code is in a Spanish template, the Spanish image is used automatically. You do not have to specify a Spanish version or alt text.
Cold Fusion, Domino and Oracle
Use the same code and steps as for HTML pages (outlined above).
Template 2.1.1
Note: - This method, newbieflag, will be unavailable after the September 28, 2007 template conversion deadline.
The Newbieflag "NEW" icon, Javascript code and alt text reside centrally within the http://www.epa.gov/epafiles Web area. The code you add to your Web files will use these central components.
Choosing a Date
The marker will stop appearing automatically 30 days after the date you enter. The 30 day period is different for each instance of the "NEW" icon on a page. Most often, you will insert a "NEW" icon using today's date, after which the marker will appear for 30 days.
To use the marker for less than 30 days, enter a date in the past. The marker will appear for the remaining time in the 30-day period. For example, if you want the marker to appear for only five days, use a start date 25 days in the past.
To use the marker beginning in the future, enter the date you want it to first appear. It will then last for 30 days beginning on that date.
Code
There are three main steps. Bold passages are critical; non-bold text is additional information. Courier text is actual code.
1) Add one line of code to the HEAD section of the HTML
- Put this code in the HEAD section of the page on which you want to place a "NEW" icon:
<script type="text/javascript" src="http://www.epa.gov/epafiles/scripts/newbieflag.js"></script>
- Do not change this code in any way. It should be in one line, but doesn't matter if the code wraps. Just copy the script code above as-is.
- You only need to do this once per HTML file. You don't have to delete this code even if you don't have current "NEW" icons on the page.
2) Add "NEW" icon code in the BODY section exactly where needed
- Put this code In the BODY section of the page exactly where you want a "new" to appear to appear on the Web page when viewed in a browser. NOTE - this code must stay in two lines, wrapped as shown. Do not remove the line break:
<script type="text/javascript" ><!--
newbieflag("Month DD, YYYY"); //--></script>
- Replace "Month DD, YYYY" with the date you want the "NEW" icon TO FIRST APPEAR, not when you want it to stop appearing. The marker will appear starting on the date you enter and remain for 30 calendar days after.
- Use the exact format shown with the first letter of the month capitalized, the month spelled out, the spaces, and the comma. For example: January 23, 2005
- Test where you want to place the "NEW" icon - either before or after the specific point of content to see where the marker looks better in context.
Example:
On the right
December report
January report
February report  |
|
On the left.
December report
January report
February report |
Non-HTML variations
Cold Fusion and Oracle: use the same code as for HTML pages.
Notes/Domino pages
If you are doing this on ONE Domino page in your site:
- Copy and paste the <Head> section code into the body of the document, highlight the script, and then on the Text menu, choose "Pass-Thru HTML."
- Do the same for the code to tag an item as new. Paste the code into the body of the document next to the item you'd like to tag as new, then highlight the code. On the Text menu, choose "Pass-Thru HTML."
If you are doing this on ALL Domino pages in your site:
- Add the head script at the design level (instead of on every individual document as outlined above). Domino has a "JS Header" property, which is where you store Javascript code to display on Domino pages, available on Forms and Subforms. This "include" should be made to all Domino templates / databases that want to use this function.
For example, if your site has a "Header" subform and you have placed other universally-required JS code here (such as other EPA Look and feel code) then put the newbie script here, too.
- Place the script for "NEW" icons in individual pages on the site. Paste the code into the body of the document next to the item you'd like to tag as new, then highlight the code. On the Text menu, choose "Pass-Thru HTML."
Notes
- Alt text is automatically provided as "New!"
- You must add a separate NEW code (and its own start date) for each "NEW" icon you place on the HTML page. You can have a different start date for each "NEW" icon.
Top of page
Examples
- DO use "NEW" icons to highlight important new items. For example:
- new, highly-visible reports or publications
- new, major updates to a section of guidance documents
- new, annual sets of data
- DON'T use "NEW" icons:
- on pages already devoted to updated content, such as "Recent Additions" or news releases
- in a text box with links to news headlines or announcements, such as on your home page
- to indicate minor or routine changes to Web pages, staff changes, phone number updates, etc.
- as bullets for a list of NEW items. Instead, p lace one "NEW" icon at the top of the list, plus (as appropriate) a short sentence to explain the items.
- on low-level pages.
The following example shows how it works. The bold lines are the required code; the rest is content on the page.
<html>
<head>
<title>sample newbie code</title>
<script type="text/javascript" src="http://www.epa.gov/epafiles/scripts/newbieflag.js"></script> </head>
<body bgcolor="#FFFFFF" >
December report<br / >
January report<br / >
February report
<script type="text/javascript" ><!--
newbieflag(" February 01, 2005"); //--></script>
<br / >
Next line here...
</body>
</html>
Here's how it would look in a browser. The "NEW" icon would be visible for 30 days after February 1, 2005:
December report
January report
February report
Next line here...
Another example with the "NEW" icon on the left:
|
Report on increasing leaves in spring flower shows. ( April 5, 2005)
Migraine dispenser regulation for curly municipalities. ( April 6, 2005)
Whales cereal toxicity regulation for effluent popsicles. ( April 8, 2005) |
Top of page
Rationale
"NEW" icons
on Web pages can greatly enhance usability by drawing the reader's eye to fresh, important content. New content can be overlooked in haste or if the reader is unaccustomed to the Web page. However, it is easy to forget to remove outdated "new" markers later. Old Web content marked as new reduces EPA's credibility. The automated sunset feature of the prescribed "NEW" icon avoids this problem.
Top of page
See Also
Timeless Text Standard
Contact Jeff Morin in the Office of Public Affairs (morin.jeff@epa.gov; 202-564-6553) with questions, ideas for improvement, or errors you've found.
Top of page
Related governance documents
EPA
Related Policies
Related Procedures
Related Standards
Related Guidance
Non-EPA
Top of page
Full Metadata about this standard
Name NEW Icon
Tracking number NT00000000
Type Standard
Required or Recommended Required
Effective date 09/28/2005
Date approved 09/28/2005
Category Graphics and Multimedia, Scripts and Codes
Web Council review by 09/06/2008 (or earlier if deemed necessary by the Web Council)
Governing Policy Web Governance and Management (PDF) (4 pp, 339K, About PDF)
Top of page