background preloader

A Responsive Email Framework

A Responsive Email Framework
We know building HTML emails is hard, especially responsive emails. That's why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Email marketing is good for your business. Common UI Patterns to Build Faster You can use these UI patterns in your designs to quickly get your email into shape. Emails that work in all of the major clients, even Outlook There’s no need to worry about inconsistent spacing and odd rendering issues with your layouts. View our compatibility chart → The ZURB Email Stack will make you an email pro Upgrade your email workflow to save time be more efficient. Learn more about the ZURB Email Stack → Inlining CSS is was a pain It used to be that every time you had to make a change to your email, you had to copy the contents, open the inliner in your browser, paste it in and inline. Check out our web inliner → Related:  Newsletter

The Fab Four technique - Responsive Emails without Media Queries The Fab Four technique to create Responsive Emails without Media Queries I think I found a new way to create responsive emails, without media queries. The solution involves the CSS calc() function and the three width, min-width and max-width properties. Or as I like to call them all together: the Fab Four (in CSS). The problem Making responsive emails is hard, especially since email clients on mobile (like Gmail, Yahoo or Outlook.com) don’t support media queries. That last approach has been my favorite so far. Once all the blocks are stacked, they don’t take the full width of the email. I’ve been looking for ways to solve this problem for a long time. A solution Remembering width, min-width and max-width On top of the calc() function, the solution I found involves these three CSS properties. If the width value is greater than the max-width value, max-width wins.If the min-width value is greater than the width or max-width values, min-width wins. (Answer : the box would be 480px wide.) Demo

GitHub - zurb/foundation-emails-template: Official template for new Foundation for Emails projects. Increasing Usability for E-mail Newsletters E-mail marketing has been very popular in the past ten years and it still is, most likely because of its relatively reduced costs, low amount of work required and quite large potential audience. E-mail marketing is a direct way of sending commercial messages to a group of people by using the e-mail as the main and only channel. E-mail newsletters are not always sent because a company needs to sell a product, sell ads or request donations, but is sometimes meant to build loyalty, trust and brand awareness. There are many usability guidelines for e-mail marketers to follow and in the past couple of years the number of guidelines has actually increased, as users request more and more from providers and tend to ignore poorly designed layouts. Time is also an important matter today; more important than it was ten years ago. Subject line What can you learn from here? E-mail marketing: when? In my opinion the key to e-mail marketing is branding. Scanning, not reading Responsive (again) Typography

Простой HTML шаблон электронного письма, HTML e-mail + простое редактирование. | Web First Step <title>HTML LETTER</title> body[yahoo] .class {} @media only screen and (max-width: 550px), screen and (max-device-width: 550px) {} SubHEADER Dear Mr. ! <p>Lorem ipsum dolor sit amet, est dico eleifend ei, mea ne velit referrentur necessitatibus. <a style="color: #ffffff; text-decoration: none;" href="http:/site.com">Register now! <p>Best regards, <br /> <strong>Boss</strong></p> &reg;All rights reserved<br/> <a href="www.site.com.ua" style="color: #ffffff; text-decoration: underline;">www.site.com.ua</a>

Mailjet Вёрстка адаптивных email-писем: подробное руководство (часть 1) / Блог компании Pechkin.com Любой, кто периодически читает почту на телефоне, знает, что этот опыт может быть как вполне приятным, так и просто ужасным. Тот факт, что письмо из рассылки отлично выглядит на десктопе, еще не означает, что все будет хорошо в мобильном почтовом клиенте — на небольшом экране часто возникают проблемы со шрифтами, отображением столбцов, а вёрстка шаблонов просто разъезжается. Зачем нужно адаптировать письма для мобильных устройств Значительная часть аудитории различных компаний, занимающихся email-маркетингом, просматривают письма на мобильных устройствах. В этом руководстве мы рассмотрим несколько способов улучшения отображения почтовых рассылок на мобильных устройствах (от использования media queries при вёрстке адаптивных шаблонов до более продвинутых техник). Техники дизайна Прежде чем погрузиться в мир вёрстки писем, поговорим о визуальной составляющей этого дела. Вот, например, как такое письмо может выглядеть в Outlook: Что учитывать при создании шаблонов Верстаем мобильные письма

Email Design Guide Content Focus your message Some of the most effective emails have one clear message. If you have multiple messages to send, try breaking them up into a series of emails. Be concise Reduce the length of your email until you can simplify no more. Create a hierarchy Put the most important information first for people who are short on time. Break it up Use headings and bulleted lists to divide content into sections that are easy to understand. Link out If you have a lot of information to convey, link to a page on your website (or someone else's website) where subscribers can learn more. Templates Start from scratch Sometimes it's easiest to start from scratch. Save your template Instead of starting over every time you send an email, create a template you can use and modify again and again. Identity Label it Make sure the reader knows who the message is coming from by putting your logo or name at the top of the email. Color Pick a palette Choose just one or two colors for your emails. Images

Related: