Open Containers

Component Overview and Process
 

What is the Open Container Component and what is it used for?

Briefly, the Open Container Component (C63) is used to bring in external content that is outside of AEM onto a page. It can also be used to embed interactive media elements that are developed by the Global Digital Team.

Common use cases for utilizing the open container element on nature.org:

• The Carbon Calculator – an interactive assessment, developed with TNC partners, to help users determine their personal carbon footprint.
• Live video hosted by a partner organization*
  • *Note – livestreams hosted on YouTube can be streamed using the YouTube video component.
• Interactive graphics (Example Magazine Page, Explore the Preserve Graphic)

Using an Open Container Component (OCC): Author/Publisher Process

Step 1:  Determine unique need for OCC

Step 2:  Reach out to Global Digital team

Step 3:  Submit a marketing request portal ticket with complete details

Step 4: Collaborate with experts in Content, Systems, UX and Analytics; 4b. Review of concept

Step 5:  Inform your developers of all TNC standards; 5b. Review of prototype

Step 6:  Undergo IT security review

Step 7:  Final code review and posting with Global Digital systems; 7b. Final review and QA

Appendix: Digital Request form fields

Step 1: Determine Need for Open Container Component 

Do you need an Open Container Component?

There will always be cases where the open container component is necessary, and it can be the ideal way to include engaging content on a page. However, there are many drawbacks to using the component and it is important that you understand all of the implications before you commit to using it for your content.

Pros and cons of using the Open Container Component:

As soon as you receive a request – or perceive a need – for using the open container component, please contact the Global Digital team for assistance. It can take up to 12 weeks for content in an open container component to go live on nature.org.

Step 2: Reach out to the Global Digital Team

Why do you need to work with the Global Digital team?

The Global Digital Team will ensure the component and all contents:

• Achieve unique content goals aligned with TNC priorities
• Meet all TNC systems and technology standards
• Fully incorporate meaningful analytics tracking
• Create a positive and seamless user experience

Review Points 

To ensure editorial consistency and agreement on final product, there will be three review points at which you and the global digital team will undertake a comprehensive review of your OC elements.

1. Initial concepting – before beginning development, discuss your concept with the Global Digital team, including all ideas relating to content strategy, systems, analytics, and user experience. 
2. Prototype – after meeting with Global Digital experts and collaboratively developing a plan for utilizing the OCC, an initial prototype should be presented to the team to review and gather feedback. If the Global Digital team is developing the content, this review will be an opportunity for you to see the progress and provide feedback.
3. Final QA – after full development of the component, including analytics integration and any discussion of file hosting, you will work with the team to do a final review and approval of the OC contents.

Step 3: Submit a Marketing Request Portal Ticket

An open container component should only be used when creating native content is not an option. Once you have consulted with the Global Digital team and determined that you cannot use an existing nature.org component set to achieve your goals, request the use of an open container component by submitting a marketing request portal ticket.

For Authors:

Please provide the following information to your publisher for them to submit via the marketing request form well in advance (1-3 months) of the due date:

1. Due date for posting the content
2. Specific goals for the content
3. Target audience
4. External or Internal partners and/or key stakeholders (i.e., is there a grant or partnership driving the content needs? Are you bringing in content from another organization? Are you requesting development resources from the Global Digital team?)
5. Any hosting requirements (are you working with an outside vendor?)
6. Page the content will live on (is this a landing page? A campaign page?)

For Publishers:

Review the information provided by authors and, if it is complete and you agree with their need for an open container component and the deadline, submit this in a marketing request ticket to the Global Digital team. Go to the Marketing Requests Portal on Jira Service Desk, select the category “Content Requests”, select the subcategory “Open Container Component” and then complete all form fields and submit the form. 

Using an Open Container Component

Step 1.  Determine unique need for OCC 

Step 2.  Reach out to Global Digital Team 

Step 3.  Submit a marketing request with complete details

Step 4.  Collaborate with Content, Systems, UX and Analytics; 4b. Review of initial concept

Step 5.  Inform your developers of all TNC standards; 5b. Review of prototype

Step 6.  Undergo IT security review 

Step 7.  Final code review and posting with Global Digital systems; 7b. Final Review and QA

Step 4: Collaborate with Digital Experts

A member of the Global Digital Team will reach out to the author and publisher to set up a kickoff meeting. At that meeting, you will discuss development of content, requirements, maintenance, and budget and set up follow up meetings with subject matter experts in analytics, UX, content, and systems as needed.

Meetings with the Global Digital team are designed to ensure that all content that goes live on nature.org in an open container component:

• Is uniquely suited to achieving TNC priority content goals. (Content Strategy)
• Complies with TNC technology systems standards. (Systems Integration)
• Complies with TNC security standards. (Systems Integration)
• Achieves strategic goals and adds value for audiences in a way that cannot be met using any of TNC’s existing systems, templates or components. (Systems Integration/User Experience)
• Allows for analytics to be built into the code so user interaction with content is recorded (Analytics)
• Authentically represents the organization and adheres to brand standards. (User Experience)
• Does not stray from TNC brand fonts, color palette or current look and feel of nature.org (User Experience)
• Is easy for users to interact with, both within the element and in the context of the page as a whole. (User Experience)
• Is mobile-responsive. (User Experience/Systems)

DIGITAL LEADS:

• Content Strategy – Megan Sheehan (Megan.Sheehan@tnc.org)
• Systems Integration – Mike Lewis (MLewis@tnc.org)
• Analytics – Jenny Elliott (Jennifer.Elliott@tnc.org)
• User Experience – Sarah Peng (Sarah.Peng@tnc.org)

Step 5: TNC Brand and Systems Standards

This section applies only to content developed with outside vendors. If the Global Digital team has agreed to work on the development of the OCC content, analytics, design, and branding will be managed by the Global Digital Team. Skip to Page 11, Step 7 for additional important information.

Requesting staff/department NOT developing with the Global Digital team is responsible for complying with TNC Brand, System, and Web Accessibility Standards.

Developing Content for an Open Container Component

There are many style and branding elements, and web accessibility standards, to consider when developing content for nature.org. When using the nature.org component set in the standard templates, these considerations are built in, but when using external content developers must be extra cognizant of how the content integrates with nature.org.

Analytics

We do not have any built-in analytics for an open container. We need to track user engagement. Your code will need to be reviewed by the analytics team to make sure any tracking is embedded. You may be called on to determine what you are hoping to learn from the content you are embedding.

Fonts

There are two approved TNC fonts, Whitney and Chronicle:

• Chronicle: Chronicle is a classic and distinctively elegant serif typeface chosen for its poise and approachability. Chronicle comes in two versions – display and text – each with multiple weights. Chronicle Display is specifically designed for headlines and Chronicle Text is intended for text sizes. 
• Whitney: Built with economy and clarity in mind, Whitney is a sans serif type family with a functional and warm, contemporary look. Designed to work in a variety of environments, its shapes are especially space-efficient in text sizes. Whitney is available in two versions – Whitney and Whitney Condensed. Whitney is available in a number of styles to meet a range of needs in both print and digital. Whitney condensed is designed for headlines and when space is at a premium.

Obtaining Whitney and Chronicle Fonts

• TNC does not have the ability to sublicense its font rights to vendors. However, for most web development efforts, developers can gain access to a ‘development’ space to use TNC’s web font license.
• If Vendors need a local copy of fonts they may obtain font license rights from the same company where TNC obtained its rights (Hoefler & Co.), or other vendors, for approximately $200-800 for a basic font license, and up to $1,150 for the full suite of fonts with varying weights and styles. 
• Licenses are sold on a per user/computer basis. The contact information for Hoefler & Co. is: 212-777-6640. 
• Hoefler & Co also makes these fonts available to purchase online through typography.com. There is a menu across the top of the page when you arrive at typography.com and you can select from a dropdown menu of fonts to see the available font packages and purchase. 
• For full details on TNC font usage, developers can consult the TNC Visual Identity Guidelines.

Additional Color and Branding Considerations

In addition to following the TNC brand standards, it is critical that open container elements match current nature.org styling and, if applicable, mimic button styles, spacing and color choices currently in use on nature.org.

Reference the nature.org web style kit for current site standards.

Development Style and Structure Guidelines

• Use a Unique Class or ID. Start with a container and make all styles pertain only to the container. TNC webpages have inherited headers, footers, and other elements. Code written for an open container component should not impact page elements outside of the container.
• Aim for Consistent Widths. TNC content has a max width of 1280px. You may need to use the full width of the page but be aware of how that looks with existing content.
• Aim for Consistent Break Points. Nature.org has standard breakpoints. Make sure to review these when developing code (see next bullet):
  •  @media screen and (min-width:40em)
  •  @media screen and (min-width:52em)
  •  @media screen and (min-width:64em)
  •  @media screen and (min-width:80em)
• Ensure All Content is Mobile Responsive. All content must be mobile responsive, no exceptions. The content does not need to conform strictly to the standard nature.org breakpoints, but it has to look good at the breakpoints.
• Ensure Compatibility of Third-Party Libraries –  TNC uses JavaScript libraries. If you are using a third-party library, ensure that it works with nature.org. If you are unsure, consult the Global Digital systems team.
• Use Latest HTML-5 Standards. TNC follows latest HTML-5 standards. Include comments in html code where appropriate.
• Follow Image Standards. TNC staff is responsible for ensuring all images have proper rights and metadata, adhere to brand standards, and are uploaded using proper TNC protocol.
  • All images should be uploaded to the TNC digital asset manager.
  • A TNC staff person should upload all assets.
  • Images must be in either .png or .jpg format.
  • Full width images should be 4000px or larger on the longest side.
• Communicate any Plans for Email Collection or Popups. If you are planning to collect email addresses through the container or utilize pop-ups, make sure to communicate this in detail to the systems team as soon as possible to ensure there are no conflicts. TNC utilizes Luminate for forms and MailChimp for email management.
• Source Files Stored on Acamai. File structure:
  • The file path convention for storing open container source files on Akamai follows the following formula https://www.nature.org/media/interactives/year-interactivename/filetype/filename.fileextension
  • Example: an html file for a California interactive: https://www.nature.org/media/interactives/2018-making-the-sea-safer-for-whales/html/scroll-map.htm
• File Upload Location
  • The Global Digital team will manage file storage on Acamai. Once you have met with the team and you have obtained approval to build content in an open container component, you will be granted access to a box folder.
  • In the box folder, you will find three subfolders, labeled JS, CSS, and HTML. You should upload your correctly titled file to the folder corresponding to the file type.
  • Box Folder Link

Step 6: IT Security Review

When you meet with the systems team, they will evaluate the project and determine the need for a security review and check for conflicts. If you are including JavaScript, you will most likely need to go through a security clearance with TNC’s IT department. If you are developing with the Global Digital team security will be handled by the Global Digital team in collaboration with IT.

Step 7: Final Review and Posting

The last step of the process is to complete a final review of all elements of the open container component – including file hosting and the maintenance plan. If needed, the Global Digital team can help you place the open container component on the page on nature.org.

Appendix: Marketing Request Form Fields

Our goal with the new nature.org is to ensure we are telling great stories across all sections of the site. We encourage the usage of unique and engaging content on nature.org, provided that it fits with editorial and strategic goals and incorporates meaningful analytics. The Global Digital team is here to help you check those boxes.

Note: Assume it will take up to 12 weeks from approval of your submission for your content to go live on nature.org. If content is needed within a week or two, it is unlikely that your request will be approved.

To complete your request for using an open container component, answer all of the following questions as completely you can. We will then get back to you with next steps within 3-4 business days.

Content

Please provide a description of the content you would like to place in an open container component. If this content has existed on another site or on nature.org previously, please indicate that in your answer.

Destination

Are you planning to put this on a new page or an existing page already published on nature.org? If an existing page, please include the URL of the page.

Goals and how results will be measured

What are your goals for this content? Please describe the target audience, the key takeaways and the promotion plan. 

Design

Does your content meet current TNC brand standards? If no, please describe how the content differs from standards.

Implementation  

Have you considered using the existing components (i.e., Map Component, Media Gallery, YouTube Video, etc.) to incorporate your content? What prevents you from using existing components?

Resources  

Do you have a budget for the project and/or designer/developer resources available to you? Would you need design/development support from Global Digital? If yes, please describe.

Maintenance 

Do you have a plan to maintain or retire the content after a given date? If yes, please describe.

Timing

What is your desired launch date for the content to go live on nature.org? Provide any relevant details about how this fits with the timing of other campaign elements, program events, or seasonal considerations.

Attachments (No video files)

Attach relevant files or resources.