Creating A Custom Template – Overview
What Is A Template?
A template is a preset format or layout for a document or file, used so that the format/layout does not have to be recreated each time it is used. Limelight Platform will work together with your creative team to develop a standard template that can be used across all your branded campaigns.
There are two (2) types of templates on the Limelight Platform:
Please review the links above to learn more about Website and Email templates, their module structure and the functionality of each module.
Limelight’s Template Process
1. Limelight Design Guidelines
For All Templates:
Every section of the website should be composed in its own layer. When naming layers in your Photoshop file, please utilize the same nomenclature you would prefer to be used in the Limelight Platform Web Builder. Using layers will define pixel distances between sections and columns while coding the template.
To keep compatibility among older email clients (such as Outlook), we suggest using a 1 column design. In this case, your desktop and mobile mockups should have a similar layout.
For Web Template:
We use Bootstrap 3.3 as a base for all of our websites. For design purposes, this means:
- Our websites follow a 12 column grid - of which any combination can be made (2 column design, 3 column design, 4 column design, and any combination of those)
- There is a default 15px padding on every column (the distance between the content of 2 columns would be 30px)
Although we do use Bootstrap as a base, its always possible to customize any element. No need to note changes, as the design elements in your Photoshop files will note the changes.
2. Photoshop (.PSD) or Sketch Files (.sketch)
For Email Template:
Email templates have a fixed width of 650px. One Photoshop or Sketch (.PSD or .sketch) template file is required per email template. One PSD template should be versioned for desktop and mobile at 650px. Emails will be responsive to mobile when designed on the 650px size.
- Desktop: Suggested size 1280px width
- Tablet: Suggested size 760px width
- Mobile: Suggested size 480px width
3. Creative Assets
- Banner Images
- Custom Buttons
- Branded Images with custom fonts
- Font Files
- Social Icons
- Provide Button background without text: This method is good for repeating usage of the same button style throughout the site
- Provide Button with text: This method is good for custom fonts and irregular button shapes
- Minimum size for buttons: 100px width
- All images must be high resolution in .PNG or .JPG format
- Web Banners must be a minimum of 1280px width
- Website Logo must be a minimum of 280px width
- All images should be high resolution in .PNG or .JPG format
- List of Fonts
- Font Attributes (point, weight, colour, font name - Please indicate Header and Paragraph tags)
- Company/Project Colours
- Legal Documents
- Approved Copy
- Brand Standards Document
- Email Copy
- Legal Copy
- Social Links
- Brand Standards Document