internations / antwort Goto Github PK
View Code? Open in Web Editor NEWBeautiful responsive email templates with code as beautiful as email templates can be
Home Page: http://www.internations.org
License: MIT License
Beautiful responsive email templates with code as beautiful as email templates can be
Home Page: http://www.internations.org
License: MIT License
Those links are broken, they show https://litmus.com/unavailable
404
The test results you’re looking for cannot be found
This link may be out of date, expired, or removed by the person who originally shared it.
Litmus is a leading email testing and analytics tool. Check out the homepage for more details."
Hello,
I am still somewhat of a newbie to CSS and HTML emails, so excuse any ignorant comments, or questions.
I have been working with this antwort 2columns-to-rows template for a newsletter design and I noticed that it was not converting the two middle columns to rows. I have attached an image of the template "as-is" emailed and checked on my iPhone 5 running iOS 7.1.1.
Now, it actually converts them to rows in Dreamweaver CC 2014 when I have the code and design screens split. It even converts to rows when I shrink the window of Thunderbird using the same e-mail account (see other image attached).
Any thoughts on why this isn't working?
Is thunderbird not supported? Images are not showing up in litmus.
The layout now seems to break on the latest Outlook.
Outlook 17 treats the responsive columns as if they are on mobile. So are displayed below each other at all times. Rather than side by side.
Hi,
Overall a solid attempt. There are a few (mostly common) rendering issues in some web and desktop clients.
Two-column layout. Issue: spacing between <li>
elements in Outlook (mobile and web) and Yahoo (Chrome/Mac).
Three-column layout. Issue: spacing between images and <div class="subtitle">
elements in Outlook (web).
Cheers.
The links aren't working.
could you plz add a template with logo on top left
Thanks for this script and template. I have made it responsive inside a phone browser. But it doesn't work in iPhone's mail listing. (It also doesn't work inside gmail app, as gmail strips out the code, which you point out in your website - so that's sadly a gone case.)
Any idea why it wouldn't work in an iPhone?
I am sending it by opening my HTML inside Safari on Mac osx then 'send page as email' via the default Mail.app on osx. Does Mail strip out some code that I don't know about?
Thanks!
Just started using Antwort, very good, many thanks. Having some issues getting it to wrap the columns on android.
Looks the same as this?:
http://internations.github.io/antwort/how/known-issues.html
Same issue in K9 under android 4.3
Like the media query is not working?
I found an issue with a comment:
/* unset <table> align="left/right" */
Makes the email blank in outlook.com.
/* unset table align="left/right" */
Works with no problem
Hi, first of thank you for putting this on Github, I love the simplicity and the robustness of the templates.
The title says it all, it looks like during the build of build.html the style.css content isnt included. I checked all 3 templates and neither one contain the style.css content.
Hallo, thanks for sharing these great templates.
I'm wondering how the singel column template could use responsive image, just a bigger image on top or in the middle of the main email body.
Thanks
I am using an email template based off your excellent 3columns-to-rows.html example. Before iOS 7 arrived the template worked great everywhere, but now in iOS 7 Mail there is a weird right gutter. To make sure it wasn't something to do with my modifications I copy and pasted code straight from your example file for this test. I am using the hosted mailing app Sendy.co which preserves full html source of your example.
Other people with similar issues have suggested applying min-width:100% to the body. I tried that and it removes the gap on the right but the responsive layout doesn't apply correctly (the text is in a zoomed out state).
td[class="force-col"] {display: block;} no longer seems to work for me on Apple Mail, ipod touch. Similar to the known Sparrow issue. I'm sending with Thunderbird from PC. Will keep trying...
Will you please add example of button. I am adding following button but it is not rendering in blackberry properly.
< a href="#" class="button" style="padding-top: 15px; padding-right: 20px; padding-bottom: 15px; padding-left: 20px; font-size: 18px; font-weight: normal; text-decoration: none; display: inline-block; background:#cf7926;color: #ffffff; text-decoration: none; font-family: Helvetica, Arial, sans-serif; vertical-align: baseline; border-radius: 5px;" >Call to action< / a >
Current downloading screenshots as a zip file is experiencing problems. Revisit later.
I see that you are not using all inline css.
I think that some email provider remove style tag, am I wrong?
Just to clarify, should the templates be responsive when viewed in Hotmail or Yahoo on a mobile device? I'm seeing the desktop version (using downloaded template, tested via Campaign Monitor).
Thanks for a great resource!
Wondering what is the reason for adding styles that match the tag attributes, e.g.
(width is specified as an attribute and a style)
Is the duplication deliberate here? If so, could you help me understand why?
Thanks,
Russell
Witch tool do you use to inline the css automaticly?
I was testing out antwort and I came across an issue in the Yahoo Mail App where the force-rows were not going 100% width.
It seems as though the yahoo mail app does not support multiple selectors and I was able to fix the issue by changing this:
@media screen and (max-width: 599px) {
table[class="force-row"],
table[class="container"] {
width: 100% !important;
max-width: 100% !important;
}
}
to this
@media screen and (max-width: 599px) {
table[class="force-row"] {
width: 100% !important;
max-width: 100% !important;
}
table[class="container"] {
width: 100% !important;
max-width: 100% !important;
}
}
Hi, the template 3columns-to-rows has the breakpoint that's lower than the content size, you can notice this resizing the window horizontally around 600px of width.
breakpoint shoulb be aroung 680 or content should be around 580px.
Hello, I am trying to set this up with a header image. I have taken the example two-column layout and have modified it:
From
<td class="container-padding header" align="left">
Antwort v1.0
</td>
To
<td class="container-padding header" align="left">
<img src="image1.jpg" hspace="0" vspace="0" style="max-width:100%; " class="image">
</td>
I want my image to take up the whole space, so I made my image 600px width. When I size my screen down, it stretches the header image instead of proportionality resize it.
Hi,
I just found this antwort and is great. Thanks!
I was wondering, is it possible to add a Logo that replace the title?
Also I found missing a place to locate a "Open on the web" link. I know it shouldn´t be necesary to use it if the responsive is working, but you now, some people like to do it.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.