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
Please review the documents below and submit an archived file ZIP folder containing all elements to Limelight Platform so we may begin your custom template building experience!
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.
For Email 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, it's 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 ;600px.
- One Photoshop or Sketch (.PSD or .sketch) template file is required per email template.
- One PSD template = 600px (versioned for desktop & mobile)
- Emails will be responsive to mobile when designed on the 650px size.
For Web Template:
Limelight Platform requires three (3) different versions of a template design for:
- Desktop
- Tablet
- Mobile
If a website has multiple page templates, please submit three (3) versions per page template.
Please submit the following versions:
- Desktop: 1280px width
- Tablet: 760px width
- Mobile: 480px width
*Limelight website templates DO NOT support background images so please design your mockups accordingly.
3. Creative Assets
Please submit a ZIP folder with all images and creative assets used in the design for each template version (desktop, tablet, mobile).
Creative assets should include items such as:
- Logos
- Banner Images
- Custom Buttons
- Branded Images with custom fonts
- Font Files
- Social Icons
Fonts:
The Platform has basic web fonts implemented for both web and email templates. This includes:
- Arial
- Comic Sans MS
- Courier New
- Georgia
- Lucida Sans Unicode
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Custom fonts can be implemented for web templates, but not for email templates. We require a minimum of 2 days lead time to schedule the implementation into development with a 48 hour turnaround once assets are in hand.
If custom fonts are required, please submit a folder with the following font formats:
- .eot
- .ttf
- .woff
Buttons:
There are two methods to set up buttons:
- 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
As a general guideline for images used by Limelight Platform:
- .png or .jpg in high resolution
- Web banners: 1280px minimum width
- Website Logo: 280px minimum width
4. Documents
Please provide a ZIP folder containing all official copy and non-creative documents used within your template design.
Brand Standards Document:
Include a copy of your company brand standards. Please ensure the following items are addressed:
- List of fonts
- Font attributes (point, weight, colour, font name Please indicate Header and Paragraph tags
- Company/Project Colours
For Web Template:
Documents can include:
- Legal Documents
- Approved Copy
- Brand Standards Document
For Email Template:
Documents can include:
- Email Copy
- Legal Copy
- Social Links
- Brand Standards Document