就我而言,我使用Roadie gem來自定義自動化電子郵件的CSS和HTML。但是,問題是在普通臺式機/筆記本電腦的電子郵件客戶端上看起來很不錯,但在移動電子郵件客戶端看起來很糟如何使電子郵件模板對Mobile和Desktop都響應?
似乎沒有任何響應方式來處理移動電子郵件設計。關於如何使移動和臺式機/筆記本電腦設備上的電子郵件看起來一樣的任何想法?
這裏的電子郵件模板代碼:
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title><%= Saas::Config.app_name %></title>
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body{font-family: 'Source Sans Pro', sans-serif;background: #eeeeee;}
.container{width: 570px;margin: auto;padding: 40px 0;}
.main {padding: 70px 100px;font-weight: 300;background: #fff;}
.header{background: #cc0000;padding: 10px 0 5px 25px;min-height: 40px;}
.logo{float: left;}
.credo{color: white;font-style: italic;font-size: 16px;margin-left: 230px;margin-top: 10px;}
.footer {background: #7e7e7e;text-align: center;color: #fff;font-weight: 100;padding: 15px 0;}
.h8{font-size: 28px; font-weight: 300;}
.red, .red a{color: #d93f3f;text-decoration: none;}
div.text{font-size: 20px;color:#616161;margin-bottom: 5px;}
.justify{text-align: justify;}
.blue, .blue a{color: #3fb2ff;}
.get_started{background: #66ccff;color: #fff;text-decoration: none;padding: 10px 30px;font-weight: 400;font-size: 22px;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<%= image_tag 'logo.png', class: 'logo' %>
<div class="credo">Credo here</div>
</div>
<div class="main"><%= yield %></div>
<div class="footer">
<span>©2014 AppName Inc, 27001 Address</span>
</div>
</div>
</body>
</html>
從本質上講,我想獲得的電子郵件顯示在外觀上都介質(瀏覽器和移動電話)儘可能接近。
http://mailchimp.com/resources/research/email-on-mobile-devices/html/ – max 2014-11-02 17:57:33