Designing HTML ers

Transcription

1 24 SEPTEMBER 2015

2 Designing a beautiful but functional HTML er can be challenging for the most experienced designer, especially if you don t have a lot of experience working with code. This guide takes you through best practice for HTML er design so you can make sure yours are always spot on. Keep it simple The most effective ers are those with a basic design structure behind them. This can still be bold and eyecatching but simplicity is key to making sure the design reaches the user intact. All clients render margins and padding very differently and some strip out CSS styling altogether. By keeping your designs simple, you minimise the risk of unexpected changes from clients. Use Photoshop rather than InDesign Use a grid system nothing should overlap Design may display slightly differently across browsers ers should be a max of 600px wide

3 DESIGN WITH DEVELOPMENT IN MIND HTML ers are coded using the traditional method of Tables rather than the more modern language of Divs. Use a grid format When using tables, you re not as free to layer graphics and text as you can when building a website with Divs. Your design should be laid out in Photoshop in a document size of 600 pixels wide. You should be able to draw clear grid lines between the content so that nothing overlaps. Use media queries Media queries are used to style HTML in a way that makes content display according to the pixel width of the device. Whilst media queries are generally well supported when it comes to ers, some browsers and devices strip these out. Make sure you have a solid fallback in place to catch the clients that do this. Be prepared for problems Always ensure you link to an online version of your er. This is an exact copy of your desktop er but the HTML file is hosted online and accessed via a web browser meaning the results are much more accurate. When designing, this link to view online should be at the very top of the .

4 THINK RESPONSIVELY Responsive ers are challenging but not impossible. Use one column for the best results If you want a solid solution that works across every client in a similar way, you ll need to use a one column design. Set the width to display at 100% and it will resize automatically depending on the device. Multiple columns? Be flexible What if you d like a two-column er? This structure is most challenging to achieve in Outlook 2013 and Android devices as there are bugs in both. You can overcome these problems but it s not always possible to achieve exactly the same display across every browser and device so be prepared for your design to be slightly adapted. An editable er could be a better investment for the long term Our campaigns manager of choice is MailChimp where we build fully responsive custom templates that are editable by the user in MailChimp without any coding knowledge. Creating a one-off editable template may be slightly more time consuming but its by far a better long term investment as you can reuse the template, adding new content for every . You can also build areas to be repeatable within the design panel in MailChimp. This means the user can easily add new sections, perfect for a Newsletter for example, where rows might be repeated.

5 Designing HTML ers USING IMAGES Images are an important design feature but they won t always appear automatically. Don t put important text content in images Some clients block images on first load and the last thing you want is the appearance of a blank . HTML text will always load more quickly than an image so stick to keeping text in the itself and using images for aesthetics rather than essential content. Host images online Use absolute paths to reference the images in your er. Images must be hosted publicly for your recipients to view them.

6 TEST UNTIL IT S RIGHT Testing time and amends should be factored into any er project. Get it right Using a solid third party testing platform such as Litmus or on Acid is crucial to see how your behaves in a live environment. MEASURE PERFORMANCE AND LEARN FOR THE FUTURE When do you read your s? Before sending your , consider when your audience are most likely to open and read it. You can use previous campaign data to look at the best open rates or you can split test the er if you have a large audience and send at different times of the day to see which had the best open and click rates. What did you learn? Monitor trends over a number of campaigns to better understand who your subscribers are, where they are based and what sort of content they enjoy most. Use subject lines that get the best open rates and content that gets the best click rates.