General Website Layout Templates (Desktop)
2 Columns:
Left Navigation, Main Content (Default)
2 Columns:
Main Content, Right Rail
1 Column:
Full-Width
3 Columns:
Left Nav, Main Content, Right Rail
Application Template
Application template does not include the ACS main navigation, but instead application title/branding is in the header.
Mobile Template
Because ACS sites are built responsively, your mobile site should function as expected on your phone or tablet. A mobile site should also always include the ACS logo (on a white background) and the footer. Depending on project requirements, the global banner and hamburger menu are optional.
Size for mobile is for illustration ratio purpose only
Branded Websites
Landing pages, blogs and sites that are related to ACS, but sit outside of the ACS.org domain, are examples of branded websites. There are two types: co-branded and sub-branded. The chosen branding depends on your organization, product or service. Follow these guidelines for branded sites. They apply to both your desktop and mobile experiences.
Co-Branded Websites
Use the co-brand design when ACS is partnering with an organization. It typically requires two logos that are displayed side-by-side in the header. If ACS is the primary partner organization, then the ACS logo should always sit on the left, and always be slightly larger than the other partner’s logo.
Sub-Branded Websites
Use the sub-brand design when your product, service or organization is a part of ACS, but carries it’s own logo and brand. However, you must include the ACS logo and “American Chemical Society” spelled out in the footer.
Web Application
A web application is a client–server software application in which the user interface runs in a web browser. Common web applications include webmail, as well as online stores, surveys, forms and community forums. Application templates are typically provided by the development team.
ACS Applications
An ACS-hosted application (both desktop and mobile) should prominently display the ACS logo in the top left on a white background and “American Chemical Society” spelled out in the footer.
Co-Branded Applications
Use the co-brand design when ACS is partnering with an organization. It typically requires two logos that are displayed side-by-side in the header. If ACS is the primary partner organization, then the ACS logo should always sit on the top left on a white background, and be slightly larger than the other partner’s logo.
Log In Buttons
Place any log in buttons on the top right corner in the global banner.