- This topic has 4 replies, 2 voices, and was last updated 7 years, 3 months ago by
.
-
Posts
-
I recently came across this page, which spells out, step by step (with code) a robust, responsive email that has many format (1 column, 2 column, 3 column, newsletter). Worth while reading the comments also (oldest first) as there are a lot of tips in them too (and the link to download all the code).
I’m using it successfully with a custom Automated theme and it works well. I made some small tweaks to get what I needed, otherwise it works well.
One suggestion. When you replace the stub/dummy content with PHP calls to pull post info (images, excerpts, titles, perma-links, etc.), don’t use <?PHP and ?> and -> as they mess up CSS in-lining. Instead use ++++?PHP and ?—- and |||| (respectively) and then do a search and replace after CSS in-lining.
Thanks for posting this. I haven’t had time to experiment with this, but using percentage widths for the main body table(s) sound logical to me. This could become very complex with a two-column layout,but it should work with a one-column layout.
As you’ll see on the page, the issue with responsive emails is not so much about getting the columns (as you’ll see on the page it’s been done very easily for 2 or 3 equal columns or 2 unequal columns), the real issue is robust compatibility with all the mail systems. In particular Outlook and GMail (which doesn’t support media queries). The method on that page works without media queries which and is also very flexible to allow 1, 2, 3 equal columns and 2 unequal columns (image left or right).
Give it a try. I think you’ll be impressed!
Thanks, Mohib. Earlier in the thread, you said, “I’m using it successfully with a custom Automated theme and it works well”.
Would you be willing to share a copy of that template?
Thanks!
I’d love to but you can’t really share files here, so here are some screen shots of how it appears in my mail client at normal width, narrow width, and in the gmail app on an iPhone 4. The yellow is just an additional heading I have but is not included in the screen shot of the code below. Images just appear as blank boxes or broken as I’ve just got local place holders for now.
http://screencast.com/t/lp7y49HXp
http://screencast.com/t/oNB3QhLyfJz
http://screencast.com/t/76cjEtysVKHere is a screenshot of part of the code from which you’ll get the idea:
http://screencast.com/t/Vwe8TOEoI’ve made some changes to Automated default.php theme and stripped out some heading options I don’t need. I’ve also made some tweaks to the default CSS the responsive template to fit my needs and also have thumbnails set to 200×100 in WordPress so have adjusted the CSS and other code in it accordingly. Extra content I didn’t need (like 2 and 3 columns) is removed (I use the sidebar version for thumbnail image size and one column for medium image size), and additional 1-column sections are added for headers and footers, and such. Dummy text is replaced with PHP calls for images, titles, links and excerpts.
Really all you do is cut and paste into top level table (
<table class="outer" align="center">)<tr>sections corresponding to 1-column, 2-column, 3-column, side-bar, sections, from the HTML template.If you use 2 or 3 column you will of course have to fix up the post loop to go skip 1 or 2 posts, and access them directly in the 2nd and 3rd columns after checking you’ve not run out of posts. For example, if you’re doing 3 columns and have 5 posts (2 incomplete rows), then the loop has to stop at post 1 and 4, and posts 2 (current+1), 3 (current+2) and 5 (current+1) you must access manually in the HTML where those would appear, but also checking to ensure current+1 and/or current+2 exist as the row may not be complete (i.e. post 6 to complete the second row is not there in this example).
Essentially, in default.php, delete all the lines in the theme from
<!DOCTYPE htmlto</html>and replace with the responsive HTML from the above after in-lining the CSS.I keep the HTML version with CSS styles not in-lined in a separate file that has
++++?phpand?----and||||. Then I in-line the CSS at the website given in the article, paste the new HTML with in-lined CSS back into Automated’s default.php. Then I search and replace to fix these back to<?phpand?>and->.I do a similar process for the transaction emails (confirmation, unsubscribe, etc.).
Hope this helps.
- You must be logged in to reply to this topic.