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
Cerberus - Patterns for Responsive HTML Email Templates
Cerberus - Between mobile, Gmail, and Outlook, HTML email is a three-headed dog from hell. Introduction Coding regular emails is hard enough by itself. Making them responsive shouldn't add to the headache. A few simple, but solid patterns are all that's needed to optimize emails for small screens. That's what Cerberus is. It's just a few responsive email patterns that go a long way. Each template is annotated and has good support among popular email clients. I wrote a blog post that goes into more detail on why I made this in the first place. Things To Know Cerberus is a small collection layout patterns for HTML email. The Templates As the layout narrows, the email content reflows and resizes gracefully. Fluid Template Good for simple layouts such as transactional and single column emails. This template focuses on a fluid layout that sizes itself using percentage-based widths to shrink horizontally on narrow screens. The email layout changes at breakpoints using media queries. Hybrid Template
Sublime Text Plugins — Web Fundamentals
The minute you start developing a site, the first tool you’ll use is a text editor, whether it’s as simple as notepad or a full blown IDE. In this episode Addy & Matt look at their collection of plugins for Sublime Text and discuss how each one helps with their workflow. Package Control To get the packages (or plugins) referenced in the episode, you need to install Package Control, it’s nice and simple to install and you can find instructions on how to do so here. JSHint JSHint is a JavaScript linter which examines your JavaScript and highlights any possible errors or bad practices in your code. For exmample, if you accidentally typed a variable name wrong, like below, then JSHint will point out that fo was never defined and is going to cause an error. The JSHint plugin points out issues the by displaying a yellow box around the relevant text and placing your cursor in that bit of code will result in an error message being shown in the bottom left of Sublime. Other issues it’ll catch are: More…
HTML Tutorial
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
MJML - The Responsive Email Framework
mp3Clan - Free Music Download
Простой 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> ®All rights reserved<br/> <a href="www.site.com.ua" style="color: #ffffff; text-decoration: underline;">www.site.com.ua</a>
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
Вёрстка адаптивных email-писем: подробное руководство (часть 1) / Блог компании Pechkin.com
Любой, кто периодически читает почту на телефоне, знает, что этот опыт может быть как вполне приятным, так и просто ужасным. Тот факт, что письмо из рассылки отлично выглядит на десктопе, еще не означает, что все будет хорошо в мобильном почтовом клиенте — на небольшом экране часто возникают проблемы со шрифтами, отображением столбцов, а вёрстка шаблонов просто разъезжается. Зачем нужно адаптировать письма для мобильных устройств Значительная часть аудитории различных компаний, занимающихся email-маркетингом, просматривают письма на мобильных устройствах. В этом руководстве мы рассмотрим несколько способов улучшения отображения почтовых рассылок на мобильных устройствах (от использования media queries при вёрстке адаптивных шаблонов до более продвинутых техник). Техники дизайна Прежде чем погрузиться в мир вёрстки писем, поговорим о визуальной составляющей этого дела. Вот, например, как такое письмо может выглядеть в Outlook: Что учитывать при создании шаблонов Верстаем мобильные письма
