torrin47
commented
7 years ago How to Use the Standalone Template
Do not simply copy HTML code generated by the Drupal WebCMS application. Your look and feel will break within 30 days. If you have an application, test the standalone template on your staging server. In the standalone template, you'll also note links to a variety of assets on the www.epa.gov domain, like CSS, images, and JS files; please do not remove these. In this regard, this template is no different from Templates 3 and 4, which you may have used in the past. This template is different, however, in that it is responsive, meaning the layout changes depending on the size of your screen. How that affects your application and the HTML it outputs is unknown and should be part of your testing. It's also different because the number of changes to the HTML will likely be more significant and frequent than the changes we've made to Templates 3 and 4. One additional difference: the standalone template does not have the menu dropdowns. Nor does it have the search autosuggestion functionality. We redesigned the standalone template by removing the dropdown menus because they interfered with some applications. Both of these changes make the standalone template more lightweight and prevent code conflict with your application code. Here's a high-level overview of your process. You may not need to follow steps 3-4, but step 5 is required for all.
- You will need a new web area (request a new web area here) if:
- You currently have context setting pages on www.epa.gov or water.epa.gov Skip to step #3.
- You do not need a new web area if:
- You link to the database content from an existing web area already in the web plan. Just add the context setting pages in that web area. Skip to step #3.
- Your context setting pages are in your application. Skip to step #5.
- Build your context-setting pages in this web area (e.g., the home page, the About page, the Quick Tips page, About the Data page, etc.)
- Link to your dynamic pages from this web area. You can build forms in Drupal WebCMS to allow people to search your application.
- Wrap your application result/dynamic pages in the standalone template.
- Want your application pages to look like a microsite (with sidebar navigation) or resource directory (with hublinks)? Then you need to ensure you have the correct class on the body opening tag, as well as the code for sidebars. You can view the source of existing pages in the Drupal WebCMS to see how they're laid out: Lead (a microsite) home page and basic page; CFLs (a resource directory) home page and basic page.
- The wide template can be set with a class on the body element of wide-template.
- You must also follow the basic One EPA Web Guidelines: Best practices must always be used, so even if there isn’t a sidebar, there always needs to be clear navigation. Content must always be written for the web. Tabs should not wrap on to a second line. Link standards are the same.
- Glenn Raisin has generously offered his write-up for converting Notes web pages to use the One EPA Web Standalone template.
- Andrew Yuen has expertise in applying the One EPA Web Standalone template to APEX applications.
Rules and Exceptions for Using the One EPA Web Template
The One EPA Web Team will determine on a case-by-case basis how much leeway applications will have regarding styling. We recognize that applications may have different needs than our "static" content. Standalone applications are not microsites and are not bound by ALL requirements that apply to microsites. Some standards will apply in all instances: Best practices must always be used, so even if there isn’t a sidebar, there always needs to be clear navigation. Content must always be written for the web. Tabs should not wrap on to a second line. Link standards are the same. Etc. etc. However, some standards that apply to microsites may not apply to standalone apps. For example, many applications may need to be the full width of the screen. Requiring a left sidebar would only narrow the space in which the information can be presented. Sometimes that extra space is necessary, and the nav is better presented in ways other than a left sidebar. The EIC for a standalone application should show the One EPA Web Team wireframes before he or she proceeds, to ensure that we don’t get to the end-stage of development, when review happens, and insist on a feature that should have been incorporated from the beginning. EPA online applications that present information via a web interface (e.g., to the screen) should:
- First register your application.
- Conform to Section 508 accessibility requirements. No exceptions.
- These requirements are built into the standalone One EPA Web template and the look and feel standards. If an application diverges from EPA standards, it must still be accessible.
- When using colors in an application:
- Rely on the standard color palette. Do not create new variations of existing colors in the EPA palette. We tested these colors to ensure visibility for all.
- Ensure your application outputs data responsively (e.g., do not use fixed widths).
- Local styles can be used to improve presentation of application data if necessary. As local styles are not allowed on EPA.gov sites, they must be first approved (here are styles that are allowed). Submit requests for exceptions to web_cms_support@epa.gov with a justification of how existing styles do not support the application's requirements.
- Examples of what is standard and cannot be changed:
- Buttons
- Boxes
- Exit EPA Disclaimer
- New! Icon
- PDF disclaimers
- Form and form elements
- Lists
- Tabs
- Text and text color
- Examples of what might be non-standard:
- Tables: EPA standard tables might not work for all data presentation from applications.
- Images: In the EPA standard template, images are constrained to a max-width of 100%, meaning they will never break out of its containing box. This directive might not work for application images.
- Responsiveness: in order to present data in a format that is not fully responsive, i.e., a format where some or all data is not displayable on phones, tablets and other mobile devices, you must demonstrate that you have no mobile visitors at all.
- Complex application layouts: Pages that provide complex presentations, such as for example a map, summary table, and detail table all on one page. Such pages must still maintain their responsive design and Section 508 compliance in all cases.
Guidance for the EPA Template is here (inaccessible off the EPA LAN, basic content in comment below): https://www.epa.gov/webguide/applications-and-one-epa-web-template The HTML for the template is this page: https://www.epa.gov/sites/all/libraries/template2/standalone.html The main CSS file is here: https://www.epa.gov/sites/all/libraries/template/s.css and the main JS file is here: https://www.epa.gov/sites/all/libraries/template/js.js
We do not expect this to be a quick, easy, or seamless conversion, but getting it cleaned up and polished will mean a great deal to OEI Management and the user community.