Template Guidelines

LeadPages believes in building quality pages that are easy to use for everyone. To make this possible there are some guidelines to follow that will help you build beautifully easy to use templates that look and work great.

LeadPage Template Checklist

Your LeadPage must meet these requirements in order to be uploaded into your LeadPage account. The overall goal is to make your templates user friendly and of high quality.


CSS/HTML

Valid HTML5/CSS3

Your page should be HTML5 and CSS3 valid. This can be easily checked at W3C Markup Validator and W3C CSS Validator.

Cross Browser Compatibility

Your page should look great on multiple browsers including IE8-10, Firefox, Chrome, and Safari.

Mobile Responsive

If your template is going to be set as mobile responsive or Facebook ready make sure that it looks great at different browser sizes. Use a tool such as Firefox developer tool bar or responsive.is to test your template.

Common Style Tags

Make sure to include ol, ul, blockquotes, h1, h2, h3, etc inside of your stylesheet. Ensure that they look great on all text generated.The Rich Text Editor will allow adding these extra elements so its important to make sure you have them covered.

Remove SEO Meta Tags

LeadPages handles SEO meta tags such as <title>, <meta name=”description”>, and <meta name=”keywords”>. Make sure they are not included in your HTML file or they could conflict with the LeadPages settings.

CSS Images Should be Wrapped in Single Quotes

Make sure your images referenced in CSS are wrapped in single quotes.

.button {
    background:url('img/texture.png');
}

Content

Default Content

Make sure your template has default content in place. This helps understand what should be placed in the editable area. For example if you have a editable image make sure an image is already in place by default.

Avoid Fixed Limits

LeadPages allows replacing content such as images and text dynamically in the editor. It’s best to avoid fixed limits on all your content elements otherwise your layout can break.

  • Images dimensions

    Avoid setting limits on images such as <img src="logo.png" width="100" height="200" /> in the HTML or in your css. Instead use the LeadPages behavior tag on your <img> element with max-image-size=100 which will handle resizing images.

  • Text areas and boxes dimensions

    Avoid setting limits on text areas and box heights that should expand to fit any length of text.

Reference Secure Content

If you are referencing any external content such as google web fonts or YouTube videos, use the HTTPS secured version only when adding to your template files.

Optimized Images

Make sure to optimize any images used for fast loading speed. You can use a tool such as Smushit to do this quickly.

Proof Read & Spell Check

Don’t forget to proof read and spell check your content. You can also check spelling errors using a tool such as Respelt