Elements Design: Octicons - GitHub WebFonts Pack Icons (TTF, WOFF, SVG, EOT, CSS)
Website: Toy Store - ZenCart Template Adapted (HTML5, CSS3, JS)

Elements Design: Odin - Newsletter Email Template (PSD, HTML5, CSS3)


A man who works with his hands is a laborer; a man who works with his hands and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist. - Louis Nizer

Email is an information and communications technology. It uses technology to communicate a digital message over the Internet. Users use email differently, based on how they think about it. There are many software platforms available to send and receive. Popular email platforms include,, Yahoo! Mail, Outlook, and many others. - Email

Styling HTML email is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers.

HTML5 has already become well known language amongst developers community and thus numerous HTML5 resources and tools are being created to assist developers and designers for achieving desired results.

Much like with design, there are best practices to follow when coding HTML email. - HTML Email Basics

  • Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.
  • Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
  • Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
  • Inline all CSS before sending. (MailChimp will do this for you automatically.)
  • Use only absolute links for images, and host those images on a reliable server. (MailChimp provides free image hosting.)
  • Don’t bother with JavaScript or Flash—those technologies are largely unsupported by email clients.
  • Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.
  • Test, test, test. Create email accounts across various services, and send emails to yourself. Do this in conjunction with services such as Litmus.

Odin is modern and creative PSD mail template. Odin is great for newsletter or other type of promotion.PSD file is fully layered, google free font used, links for font and images can be found in the help file. Note, images are not included in PSD file. - Odin - Free Newsletter PSD Template

Images source: Gratisography.


Elements Design: Odin - Newsletter Email Template (PSD, HTML5, CSS3)

Developed by Creative3x and designed by Graph Berry.

Enjoy this freebie and want to show support? Spread the word.

Enjoy Downloading this freebie!

We hope you enjoy this freebie and find it useful!

Tags: email template, newsletter template, email, newsletters, html5, css3, psd, html email template

Leave a Comment

No Comment

© Creative3x Ltd.