Product Websites
Product websites require collaboration from many parties. If you are considering developing a product website, please contact the unit of your communication department responsible for electronic media before beginning.
Design & Guidelines
Product websites must follow the key design elements for websites, and respect the legal requirements and principles of data protection as well as the rules for secure development and operations.
In addition, you must check whether any specific guidelines also apply for your website.
Product Website Templates
The baseline templates embody the key design elements for websites and can be used for any website for which no more specific templates exist.
These HTML templates have been created specifically to allow rapid development with consistent and optimal presentation on all devices. Based on the key design elements, the templates can be considered as living documentation that can be quickly adapted for content management systems. However, it’s not the intention that every Bayer website looks exactly like them. The templates employ the principles of responsive design and work on both desktop and mobile devices.
As well as the key elements, the templates contain some sample suggestions for your website.
The header in the templates has an optional fixed header: the naming area and Bayer Cross remain visible even when scrolling the page.
The top navigation in the templates contains sample flyout and mega-flyouts for use with a hierarchical navigation. It also contains the recommended integration of a search function.
The typography and colors on the top-navigation should be adapted to suit product branding.
For mobile devices the top navigation uses an off-canvas navigation.
The templates contain the relevant styles if a left-hand navigation is used. As with the top navigation, the typography and colors should be adapted to suit product branding.
At the bottom of the page there is a sample status bar with copyright information and page functions, such as a print button or sharing via social networks.
The legal notices are a required element but can be adapted to suit product branding.
The footer contains a sample sitemap.
Information for programmers
The sample HTML page conforms to the technical standards for websites. As well as the key elements, the sample page contains some suggestions for your website. It’s not intended that any Bayer website match these templates exactly.
Search form
A search form is provided as part of the top navigation, but to use it you must implement your own search backend.
Open graph support
To make it easier for users to share content, open graph support has been included. Content management systems should be adapted to provide the necessary information for pages.
Third-party libraries
The following external Javascript libraries are required: JQuery; JQuery UI; Knockout and Modernizr. Please refer to the release notes for full details and ensure that your own development is compatible with them, and that you apply and verify any security patches.
Sample pages
- Sample page with color Bayer Cross
- Sample page with white Bayer Cross
- Sample page with black Bayer Cross
Downloads
Release notes and change log
Product Website Templates v2.0.0 from 2017-11-13 (Zip-file, 151 KB)