Giter Club home page Giter Club logo

responsive-html-email-template's Introduction

Responsive HTML Email Template

This template is designed to work on all major email platforms. It is built with media query, making it responsive for smartphones that support media query. It serves as a foundation that has been tested and thoroughly reviewed for compatibility, making it very easy to customize and make changes.

Using MailChimp's html email template (blue-print) as the foundation, this template is an improved version with more row options, redefined structure and many fixes for Outlook, Yahoo, Hotmail, Gmail, e.t.c.

Download with Bower

$ bower install respmail

If you don't know what Bower is, read more about it here http://bower.io/

Preview

Author: http://www.charlesmudy.com/ Preview

Inspiration

https://github.com/mailchimp/Email-Blueprints

Contributing

Anyone with strong knowledge of html email coding can make a pull request for changes and improvements. Please always clarify and if possible, share online resources to prove or view your suggestion.

responsive-html-email-template's People

Contributors

charlesmudy avatar cloudify avatar dandv avatar leggotm avatar matthieusolente avatar mclausen792 avatar orliesaurus avatar tedgoas avatar vwebtech avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

responsive-html-email-template's Issues

Columns not collapsing on Android 4.4.4

Firstly great template - out off the many I tested this is the simplest and works the best!
I am having issues with Android 4.4.4.
Screenshot attached is from the vanilla template (latest version as at 15 Sep 2015).
The right hand columns appear to collapse but the lefthand columns appear to stay fixed.
Any suggested workarounds to this?
Thanks for all your hard work!
Tom
android_444

font

hi Charles!

How can I change the font to Robot from google fonts?

Background Images

This is a great template thus far but I was wondering if you add another section with a background image. Something that is being offered here: https://backgrounds.cm/. If not no worries, I can code it in myself but I want to see your take on it.

Windows phone 8.1. support

I tried and sent the default template to Windows phone built in email client. The fonts are really huge so the email is practically unreadable when opened. After clicking download all it is still unreadable. However if you go out of email and back in it than works perfectly.
I am writing this just for people to know.

Yahoo Mail - Left Margins Missing

If you run this template through Yahoo Mail, you'll see that all the text runs right up to the left margin. It looks fine in other mail clients. Does anyone know how to fix this problem with Yahoo?

Gmail: viewing half of the email

Charles,

First I'd like to say thanks for this amazing template.

Second when viewing this in Gmail for the desktop across all browsers it opens the email in like a 3/4 view. I have to pull my window open further for it to view the whole email.

Not sure if there was a coding solution to prevent that from happening.

Thanks,
Jonathan

Blueprint w/o inline styling?

Hey,
first of all great job. The template looks great in all major devices (tested on Litmus).

Is there a version available without inline styled tags? I would like to develop a mail template like a normale "website" and then do the inline styling afterwards (Juice).

Cheers

White space column in Mailbox app

Hello, I've come across a problem with a HTML email we've been building based on your framework. However I've also noticed this bug appears to be a problem with other emails I have received and wondered if you could shed any light on the subject. It doesn't occur with every email I get - some work which suggests there is a bug in your framework.

In short, when some responsive emails in the Mailbox App client on IOS, can be scrolled to the left revealing a white column. So the email doesn't in fact fit the 100% width. It's more like 110%.

I've attached a screenshot showing when I've scrolled left to reveal the White column.
image

Email Snippet in Android Mail

Using Android 's mail program the email description displays beneath the Sender/Subject "Respmail is a responsive email....." instead of the first few lines of the email body.

Issue with css styles

I used your template and made some customization. when I send the email it it removes all the style. only inline styles are applied. why is that?

"invisibleIntroduction" problem on Outlook

Hi,
I have used "invisibleIntroduction" in my email template but this section is hidden in Apple Mail but not in Outlook ( I've tried with Outlook 2010 ).

HTML:

<!--
    The "invisibleIntroduction" is the text used for short preview
    of the email before the user opens it (50 characters max). Sometimes,
    you do not want to show this message depending on your design but this
    text is highly recommended.

    You do not have to worry if it is hidden, the next <td> will automatically
    center and apply to the width 100% and also shrink to 50% if the first <td>
    is visible.
-->
<td align="left" valign="middle" id="invisibleIntroduction" class="flexibleContainerBox" style="display:none !important;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
        <tr>
            <td align="left" class="textContent">
                <div style="font-family:Helvetica,Arial,sans-serif;font-size:13px;color:#828282;text-align:center;line-height:120%;">
                    This is an introduction text and must be hidden
                </div>
            </td>
        </tr>
    </table>
</td>
<td align="right" valign="middle" class="flexibleContainerBox">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
        <tr>
            <td align="left" class="textContent">

            </td>
        </tr>
    </table>
</td>

Screenshots:

Apple Mail

schermata 2015-03-12 alle 14 21 02

Outlook 2010

schermata 2015-03-12 alle 14 21 18

Outlook 2016 - blows out the background container

In the Outlook 2016 (Office 365) desktop application for PCs, the template blows out the background on either side of the email container. This makes it look like a blank email unless you use the horizontal scroll bar to find the body of the email way off to the right.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.