& Newsletter. Template Design. Best practices design advice from Vuture. New York London

Transcription

1 & Newsletter Template Design Best practices design advice from Vuture. London New York Sydney +61 (0)

2 Table of Contents IMPROVING DELIVERABILITY FOR LONDON METAL EXCHANGE 4 TEMPLATE LAYOUTS BEST PRACTICE 5 RESPONSIVE DESIGN 6 What is responsive design? 6 MANAGING IMAGES 7 CHOOSING AND USING SNIPPETS 8 Snippets included in the initial template 9 SUPPORTED CLIENTS 10 Desktop 10 Mobile/tablet 10 Web Clients 10 *Source: radicati.com Billion Business s Sent/Received Per Day in 2017 * PAGE 2

3 Vuture & Newsletter Template Design Introduction At Vuture, every client is assigned a dedicated Project Manager to work with you to design and plan the content and layout of your new and newsletters templates. We often get asked for advice at this stage and this and newsletter template design best practices paper is designed to provide you with the information and guidance you need to get started. The following suggestions are based on our experience in working with over 260 clients in practically every country in the world. They are only suggestions every client is different but you will find some useful tips here for when you are planning your designs. PAGE 3

4 Improving deliverability for Vuture works behind the scenes for you, taking a variety of technical measures which will help to keep your deliverability high and help to prevent you being blocked as a spammer. Things to think about when designing your templates range from content and layout to your choice of colours and the use of your branding, through to images and calls to action. All these aspects of your design will affect the success of your s in different ways. On average, you have only 15 seconds or so to get the message across to your readers, so you need to optimise your structure for the best results. We are fully integrated with Litmus to ensure maximum deliverability for every digital communication piece you ll send through the Vuture platform. Looking now at key elements in turn PAGE 4

5 Template Layouts Best Practice A layout is the way the page is structured how many pixels wide, and what elements (such as text and images) go where. One of the benefits of using Vuture is that the layouts you can create are so varied allowing you to try out different styles to see what works for you. You can start with a couple of layouts and move the elements (snippets) around yourself, with no technical knowhow, in an almost endless variety of ways. You may decide to start with a One Column layout or a Two Column layout. Both can work well, and it is possible to build a page which appears to be One Column at the top, blending into Two Column further down the page. One Column Two Columns Right Sidebar 1:2 Column Try to keep your layout as clean and clear as possible, so don t clutter it up with too many areas of boxed text or links. To keep the page clean, use lots of white space. This will allow your areas of text and your images to stand out on the page. Layout is a big subject, with many lines written on the topic about such aspects as tracking eye movements across the screen and where on the page is best for certain elements to go. One point in all this advice stands out keep it simple. A messy, crowded page will put your readers off from the start. Another piece of useful advice is to keep the most important items at the top of the page who you are, what you are trying to say and what you want your readers to do. Most popular choices are a 50:50 split page or 75:25 or 66:33 for layout with more than one column. PAGE 5

6 Responsive Design What is responsive design? templates that are responsively designed will render differently when viewed on devices based on the screen resolution of that device and the client. This allows users to view the best possible version of an no matter where they view it from. Responsive design is Vuture s recommended method of creating mobile-optimised content. In short - responsive design is a way of making the layout of your or website adapt to suit the device they are being viewed on. PAGE 6

7 Managing images Vuture will help you to manage images and keep your size small by resizing images as it places them on the page. You should save images as High Resolution, preferably at the same size as the snippet in which you intend to use them, in one of the permitted formats. Vuture recommends saving images as.jpg and.png but th platform supports additional format types such as JPG, GIF, PNG, EPS, TIF and PDF by default. The default maximum file upload size is 30MB. The Vuture support team can change this. 1,138 Million Active Business Accounts source: radicati.com PAGE 7

8 Choosing and Using Snippets Snippets are the elements on the page which make up your design. You might have a text snippet at the very top of the page, followed by a logo in an image snippet, followed by a heading snippet. Each template supplied by Vuture at the beginning of the project, can have up to 10 different snippets in the design, not including the Header area and the Footer area. However, this is only in the design stage. Once you are using a template you can repeat snippets or remove them as you wish. Snippets can be copied and repeated on the page, so an area of text high up on the page and another area of text lower down the page would count as just one snippet, not two. Here is an example of a master template page divided into snippets: This example Master Template has all the available snippets on the page. The finished would probably use fewer than this example. A dedicated Project Manager will work closely with you to discuss the options available to meet your specific needs. It is helpful to provide examples of your current newsletters and invitation pages that you would like to replicate. The logo and colours would be changed to your branding and snippets can be moved about to suit your preferred layout. Snippets can be moved up and down the page, but not left to right. Wide column snippets cannot sit in the narrow column and narrow column snippets cannot sit in the wide column. PAGE 8

9 Snippets included in the initial template } Contact } Disclaimers } 1 column } 2 columns } Header } Event } Footer } Wide image } RSVP } CTAs (buttons) Don t forget Vuture platform can also be used effectively for internal communications. Keep in mind the possibility of a very simple template for this purpose. PAGE 9

10 Supported Clients When Vuture builds your templates we always check that those s would render correctly in different clients. The clients we support are the following: Desktop Outlook 2003 through 2013 Apple Mail 9 and up Lotus Notes 8.5 IBM Notes 9 Mobile/tablet IPhone 5s (IOS 7) and up IPad Mini (IOS 10.2) and up Android 4.4 and up Web Clients AOL Mail Gmail Outlook.com Yahoo! Mail These are the major players. We keep up to date with developments in this market to ensure that we continue to support the major providers. PAGE 10

11 PAGE 11

12 The Vuture vision is to play a major role in helping organisations build and maintain strong, lasting relationships both internally and externally. FOR MORE INFORMATION 3 rd floor, Crowne House, Southwark Street, London, SE1 1UN explore@vutu.re London +44 (0) New York Sydney +61 (0) PAGE 12