Global Web Content Management System (WCMS) serves many microsites, most of which are developed in collaboration with digital agencies. Below are some information you can use to communicate your web developers, to ensure easy deployment of microsites within the WCMS Drupal platform.
General Requirements
- When delivering source files to the Global WCMS team for deployment, ensure that all files are packaged and organized neatly. All file paths should be relative (rather than absolute path) so we can load the files onto the web server without updating the root directory references in the source code. Also, make sure all assets and third-party libraries are included. The landing page should be self-contained.
- Microsite/landing page source files should be limited to front-end web technologies. These technologies include: HTML, CSS, JS.
- When delivering a code package, any developer or source files used to generate the package should also be provided. The expectation is that the Global WCMS team will localize this microsite for other markets, and may have to customize the code. Example: JavaScript libraries that generate JS files or front-end automation tools like Node.js, Gulp, or Grunt. You must include a README if you are using any of these kind of tools to generate a build of the code to be delivered to us.
- Include any and all design files and assets. We need to be able to export out new versions of images, graphs, meter screens etc.
More information on what's expected for code packages and design assets can be found here.
Performance Requirements
- Load time for a page should be less than 3 seconds. Benchmark tests should be taken for both 3G and 4G speeds to ensure the design still works for the slowest subset of users.
- Page weight should be no greater than 1MB in total, with images constituting less than 500KB in aggregate. Individual images should be less than 100KB. All mandatory elements should be identified before the page design process begins, including any baseline JS/CSS, marketing tags, etc. Whatever is left from the 1 MB after the required elements are listed makes up our total available page weight with which to design. This should be measured and communicated within the team before any design elements are developed.
- JS/CSS should be limited to only what is necessary and be compressed; deferred in page load order, aligning logically with how the page renders; not block rendering above the fold.
- “Speed” includes all steps to full interactivity for the user, including first paint, first contentful paint, first meaningful paint, speed index, time to interactive. Each stage should be observed in the page creation process in order to ensure a natural loading experience for the user.
- Content above the fold should be prioritized during page load. Use lazy loading technique to defer loading of non-critical resources.
Other Considerations
- Ensure that the design follows the Accu-Chek Digital Guidelines. A copy can be found in BrandBox brand.accu-chek.com.
- For microsites that expect to be deployed in different markets (countries), ensure that the content can be efficiently localized.
- If assistance from the Global team is necessary, ensure the Global team is informed article Microsite Timelines and Expectations outlines the process.