The learning process to create an efficacious newsletter is often tiring and difficult. But as you get more comfortable with newsletter design these ideas become simpler and easier. You’ll always need a solid understanding of design principles when creating e-mail notices or newsletters. But you also need to know how to code newsletters in a manner that’s best suited for most e-mail clients.
I’d like to introduce Ink by Zurb which is a responsive newsletter framework. The basic template uses standard HTML tags for creating single-column or multi-column layouts which naturally respond to screen size. It’s all fairly easy to understand once you’ve spent a bit of time playing with the code. I’ll provide a quick walkthrough of the design process and how to use the framework.
First Steps
I would always recommend designing a simple mockup of the e-mail in Photoshop or another graphics editor. This will help tremendously when coding into HTML/CSS because you know where all the graphics should be located and how to fit the text accurately. If you don’t have a design try winging it or creating something with bare HTML.
You can download Ink right from their website and this includes everything you would need. The examples are pretty basic yet they give you some idea of how the structure works. But more important is how you setup the code.
Ink uses a grid system with 12 columns along with a fixed 580px centered container. This is naturally responsive down to any smaller screen size. Since everything is created using tables it’s important to follow the same column/row structure. Take a look over the grid documentation to understand a bit more.
By following along with this structure you can ensure the whole layout will be responsive even on tiny screens. Work within these boundaries to craft your layout first, then customize the color scheme afterwards.
Images and Buttons
The purpose of a newsletter is usually to lead visitors onto some part of your website. This could be a specific blog post or even a landing page. Maybe you’re selling some new products and hope to garner a few sales.
Either way you’ll probably want to include a few buttons and/or images within the e-mail. Thankfully Ink has a few default buttons you can use or customize. The colors and hover effects are very simple to ensure full compatibility. But don’t be afraid to change up these color schemes to match whatever you need.
Additionally some designers may prefer using images in place of button links. Since most CSS3 properties will not render in e-mail clients, a glossy gradient button image would be the next best solution. It’s just as easy to setup images within your newsletter but they will need to be hosted on your website or another trusted server. You should add the width & height attributes directly onto the img tag so it will display in a fixed amount of space.
You’ll also be happy to know that retina images can be used in place of regular images. This means you design the image at twice the view size, then setup width/height attributes to accommodate. A 200×200 square image should be designed at 400×400 to achieve the clearest visibility.
Image widths should also be set to match however many columns you need. They will resize for responsive widths but Ink provides a standard column size chart with exact widths based on how many columns the image fits into.
Inline CSS Styles
Inside the Ink .zip file you can find ink.css which is added into the boilerplate using a link tag. But most e-mail readers need inline CSS because they restrict externally-linked resources such as stylesheets. Ink allows you to write CSS in the external file to keep everything separate and easier to code.
However once you have a polished newsletter design you’ll need to incorporate the Ink CSS as inline styles. This is as simple as copying & pasting all CSS into a <style></style> tag and double-checking that it still looks good. Although this may seem like a simple step it is essential if you expect a uniform design supported by most e-mail clients.
Ink provides an online webapp called CSS Inliner which can do the work for you. But it requires that you host the CSS externally and this webapp automatically copies the code for you. But I honestly don’t think it’s necessary when all you really need to do is copy/paste all the code and then remove the linked stylesheet.
Design Testing
At this point you should have a newsletter design that’s clean and looks nice. Everything should be naturally responsive and the styles should be inline along with the HTML. Before sending this out with a service like MailChimp or Campaign Monitor you might want to test the design first.
Both of the previous services offer a testing feature which you can utilize. They allow you to input e-mail addresses and send out a few copies just for practice. The big names you should consider are Outlook 2003/2007/2010, Gmail, Hotmail, and Yahoo. It’s not going to be possible to test everything so just try your best.
An online service Litmus can provide screenshot previews of your newsletter in many different e-mail clients. You don’t even need to own the software to get a rendered picture. But this does cost money so it’s not a solution for everyone.
Thankfully the Ink framework was developed with the greatest amount of support in mind. If you can test a small handful of the online services along with a couple desktop programs then you should have confidence in the rest. Ink will save you hours of time worrying about rendering issues, and starting with a template is always easier than starting from scratch.
Source: http://ift.tt/VRxRxH
No comments:
Post a Comment