background preloader

Html tmplating

Facebook Twitter

HTML5 Bones: The template that goes back to basics. Building Responsive Email Templates with Ink. Ink is a responsive HTML email framework by Zurb – the very awesome team that built Foundation.

Building Responsive Email Templates with Ink

Ink tries to make it easy to build custom and responsive HTML emails that work on all devices. This article will take you through the fundamentals of Zurb’s Ink platform as well as covering some best practice email things. We’ll also build a large boilerplate to copy and paste code from. Be sure to check out the demo links or GitHub. The sad truth about email If you’ve never had the pleasure of building a custom HTML email template before, let me try to explain what it’s like. Imagine you were tasked with building a website.

It’s like building a website for 50 different Internet Explorers, blindfolded. A lot of good front-end developers will refuse to do it. Step 1: Sync up with your designers This is an important step that’s not really part of the Official Ink Documentation. Container size Zurb Ink has a fixed max-width of 580px for content. Responsive sizes Custom font’s won’t always work Buttons. Speed up your email campaigns with 6 essential code & workflow tips. When designing and coding email newsletters from scratch, a good part of the battle is finding ways to reduce your email payload and thus reduce email load times.

Speed up your email campaigns with 6 essential code & workflow tips

Writing less and cleaner HTML & CSS code in the process is an upside to this, too. To help us find out ways to meet both these goals, we asked pro email marketer Becs Rivett to share her tips for speeding up your emails - and the workflow that goes into coding them. Becs has worked for several large eCommerce retailers and agencies and like a the trooper she is, confesses to "eat, sleep, and dream about every aspect of email marketing". Alongside our tips, we'll list some of the tools that can help you along the way, as well as the custom settings you can use to produce your best email campaigns yet. Send faster emails First of all, I'd like to start with some of the techniques that you need to embrace in order to create and send email campaigns that load speedily in the inbox.

Shrink down image sizes Use fewer images. A web application to quickly build bulletproof HTML emails. HTML Compressor - Reduce the size of HTML, CSS, JavaScript, PHP and Smarty code. You need to enable JavaScript to use this website.

HTML Compressor - Reduce the size of HTML, CSS, JavaScript, PHP and Smarty code.

Choosing the correct Code Type makes the compression of your code more safe and effective. Choosing the wrong option may lead to fewer optimizations or errors. There are 3 main groups, x/html, CSS and JavaScript. Select JavaScript when you want to compress just JavaScript code, as it would appear in an external.js file. If your JavaScript code contains PHP, ASP or Smarty server side code then select the respective option. Note: JavaScript code contained between <script> and </script> tags is considered x/html with embedded JavaScript code. Select CSS when you want to compress just Cascading Style Sheets (CSS) code as it would appear in an external style.css file. CSS code contained between <style> and </style> tags is considered x/html with embedded CSS code. Select x/html for web documents that do not contain server side code, such as static web pages. How to Minify Your HTML Email? To minify or not to minify?

How to Minify Your HTML Email?

This is the question! Ros at Campaignmonitor’s blog mentioned the idea to minify your HTML to speed up the sending process. At first sight it seems to be a good idea, because the minified output will be much smaller without any unnecessary spaces, tabs, and line-breaks. A good HTML tidy solution will validate your code and reduce the size of your final HTML by stripping HTML comments and other “unnecessary” things from your email too. But wait a minute! So we will strip out all unnecessary spaces, tabs, and line-breaks which are covered by the HTML standards… but in email there are NO real standards!!! Step one back, and think through what will happen with your HTML code. Modern HTML parsers can handle minified HTML and CSS as well, but Outlook won’t! The line length limit is usually 998 characters plus CR and LF characters per line (for more: RFC5322).