整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          制作響應式郵件模板方法剖析
          
        
           
          
	
	
          
		制作響應式郵件模板方法剖析
          
                        
          著智能手機和平板設備的流行，在電腦屏幕上看來正常的電子郵件在手機等移動設備上查閱卻凌亂不已。根據一項調查，有91%的用戶會在移動設備上查閱郵件。電子郵件通訊設計模板亟待優化。
          接下來，你可能會用div或CSS編寫HTML代碼改良郵件模板，但Outlook或雅虎郵箱卻另辟蹊徑。
          由于HTML5和CSS3在郵件設計方面有所局限，設計響應式郵件模板的最佳方式是使用傳統方式打造郵件布局——利用表格、內部插入CSS、inline CSS和媒體查詢。
          是否所有郵件客戶端都支持媒體查詢？
          雖然大部分郵件客戶端都支持媒體查詢，但仍有Gmail Android APP在這方面有所局限。不過設計師們仍然可以增加表格和HTML元素的百分率，在不同的視窗上創建流暢的體驗布局。
          接下來，我們將一步步解析如何應用現有信息，使用表格、inline CSS和內部插入CSS等方式，在媒體查詢技術的輔助下，創建響應式郵件模板。
          我們需要的有：
          Raleway以及Lato谷歌字體
          切片圖像和icon
          HTML和CSS知識
          媒體查詢相關知識
          終端輸出
          現代化的扁平設計
          從何入手
          開始之前，我們需要在標題欄內放入內容。首先，我們要增加一個XHTML文檔，緊接著加上html標簽，創建類型為xmlns。剩下的是元信息和標題標簽。
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <meta name="viewport" content="initial-scale=1.0"/>
          <meta name="format-detection" content="telephone=no"/>
          ? <title>KATAUSTRIA - Email Template</title>
          </head>
          Markup
          至于markup，我們需要利用表格重新開始，在表格中增加屬性。

          <body yahoo="fix">
          ? ? <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <!-- START HEADER/BANNER -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END HEADER/BANNER -->
          <!-- START 3 BOX SHOWCASE -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END 3 BOX SHOWCASE -->
          <!-- START AWESOME TITLE -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END AWESOME TITLE -->
          <!-- START WHAT WE DO -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END WHAT WE DO -->
          <!-- START READY FOR NEW PROJECT -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END READY FOR NEW PROJECT -->
          <!-- START PRICING TABLE -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END PRICING TABLE -->
          <!-- START FOOTER -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END FOOTER -->
          ? ? </table>
          </body>
          </html>
          橫幅和3Box Showcase區
          設計這兩個部分時，我們稍后在CSS中會將每個部分用col-600 class包裹。我們將在設計中增加一個帶有logo和文字的橫幅。至于3Box Showcase，我們將用到col3，將寬度設為183。需要注意，在高度這里我們使用的是<td>標簽預留空間。
          <!-- START HEADER/BANNER -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center" valign="top" background="images/header-background.jpg" bgcolor="#66809b" style="background-size:cover; background-position:top;height="400"">
          ? ? ? ? ? ? <table class="col-600" width="600" height="400" border="0" align="center" cellpadding="0" cellspacing="0">
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td height="40"></td>
          ? ? ? ? </tr>
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center" style="line-height: 0px;"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/logo.png" width="109" height="103" alt="logo" />
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;">EMAIL <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;">TEMPLATE</span>
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center" style="font-family: 'Lato', sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;">A creative email template for your email campaigns, promotions <br/>and products across different email platforms.
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td height="50"></td>
          ? ? ? ? </tr>
          ? ? ? ? ? ? </table>
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? ? ? </table>
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END HEADER/BANNER -->
          吸睛標題和實際服務部分
          設計這兩個部分時，我們仍然使用class col-600，不過對于每個部分的內部元素，我們將采用完全不同的class。對于標題部分的第一個icon元素，我們要用到col1和col3_one設計文字。我們稍后會在媒體查詢中調整字體大小。
          在實際服務部分，我們會使用col2設計每一欄。在這里需要注意，我使用了一個inline CSS為我們的設計元素增加某些格調。
          <!-- START WHAT WE DO -->
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;">
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td height="50"></td>
          ? ? ? ? </tr>
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="right">
          ? ? ? ? ? ? <table class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0">
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center" style="line-height:0px;">
          ? ? ? ? ? ? <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="images/icon-responsive.png" width="169" height="138" />
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? ? ? </table>
          ? ? ? ? ? ? <table width="287" border="0" align="left" cellpadding="0" cellspacing="0" class="col2" style="">
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td align="center">
          ? ? ? ? ? ? <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">
          ? ? ? ? <tr align="left">
          ? ? ? ? ? ? <td style="font-family: 'Raleway', sans-serif; font-size:23px; color:#2a3b4c; line-height:30px; font-weight: bold;">What we do?</td>
          ? ? ? ? </tr>
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td height="5"></td>
          ? ? ? ? </tr>
          ? ? ? ? <tr>
          ? ? ? ? ? ? <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;">We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized.
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? ? ? </table>
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? ? ? </table>
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          ? ? ? ? ? ? </table>
          ? ? ? ? ? ? </td>
          ? ? ? ? </tr>
          <!-- END WHAT WE DO -->
          CSS
          現在，所有需要用到的部分都設計好了，接下來我們需要在標題欄部分增加一些模式。首先為markup增加整體風格。插圖谷歌網頁字體，其余部分將包含我們為郵件主題、html、表格等等設計的模式。
          關于網頁字體的小提示：根據Campaign Monitor，郵件客戶端對網頁字體的支持有限，這以為著不是所有客戶端都支持網頁字體。
          @import "http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css";
          html,body {
          ? ? background-color:#fff;
          ? ? margin:0;
          ? ? padding:0
          }
          html {
          ? ? width:100%
          }
          body {
          ? ? margin:0;
          ? ? padding:0;
          ? ? -webkit-text-size-adjust:none;
          ? ? -ms-text-size-adjust:none
          }
          table {
          ? ? border-spacing:0;
          ? ? border-collapse:collapse
          }
          table td {
          ? ? border-collapse:collapse
          }
          table tr {
          ? ? border-collapse:collapse
          }
          img {
          ? ? display:block!important
          }
          br,strong br,b br,em br,i br {
          ? ? line-height:100%
          }
          a {
          ? ? text-decoration:none
          }
          .button a {
          ? ? font-size:14px;
          ? ? font-family:'Lato',sans-serif;
          ? ? color:#fff;
          ? ? font-weight:300;
          ? ? background:transparent
          }
          接下來，讓我們為特別的郵件客戶群增加獨特風格。這能讓每一種不同的群體都有不同的風格。
          /* OUTLOOK CLASS*/
          .ExternalClass {
          ? ? background-color:#fff;
          ? ? width:100%
          }
          .ExternalClass,.ExternalClass font,.ExternalClass td,.ExternalClass p,.ExternalClass span,.ExternalClass div {
          ? ? line-height:100%
          }
          .ReadMsgBody {
          ? ? width:100%;
          ? ? background-color:#fff
          }
          /* YAHOO MAIL CLASS */
          .yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {
          ? ? border-bottom:none!important
          }
          /* MAILCHIMP CLASS */
          .default-edit-image {
          ? ? height:20px
          }
          媒體查詢
          到了媒體查詢設計的步驟，我們需要在640px視窗中使用百分率增加并調整每個部分和元素的尺寸。
          @media only screen and (max-width: 640px) {
          body {
          ? ? width:auto!important
          }
          table[class="col1"] {
          ? ? width:29%;
          }
          table[class="col2"] {
          ? ? width:47%;
          ? ? text-align:left
          }
          table[class="col3_one"] {
          ? ? width:64%;
          ? ? text-align:left;
          }
          table[class="col3"] {
          ? ? width:100%;
          ? ? text-align:center;
          }
          table[class="col-600"] {
          ? ? width:450px
          }
          table[class="insider"] {
          ? ? width:90%
          }
          img[class="images_style"] {
          ? ? width:60%;
          ? ? height:auto
          }
          .margin{
          margin-left: 25px;
          margin-right: 25px;
          }
          }
          在最后的CSS環節，我們將開始為480px視窗增加媒體查詢。我們設計的大部分獨立元素和部分將被設置為100%。
          @media only screen and (max-width: 480px) {
          body {
          ? ? width:auto!important
          }
          table[class="col1"] {
          ? ? width:100%;
          }
          table[class="col2"] {
          ? ? width:100%;
          ? ? text-align:left
          }
          table[class="col3"] {
          ? ? width:100%;
          ? ? text-align:center
          }
          table[class="col3_one"] {
          ? ? width:80%;
          ? ? text-align:center;
          ? ? margin: 0 20px 0 0;
          }
          table[class="col-600"] {
          ? ? width:290px
          }
          table[class="insider"] {
          ? ? width:82%!important
          }
          img[class="images-style"] {
          ? ? width:60%
          }
          .button { width: 40%; display: block; }
          a.read-more { text-align: center; display: block;}
          }
          總結
          通過以上步驟，各位就能成功設計響應式郵件模板了。不難看出，我們所有的整體風格都使用了inlineCSS。(來源：視覺中國)
          切圖網（qietu.com）提供優質的psd轉郵件模板制作，并且開發了一款免費、開源的郵件模板css框架——快郵，可以快速搭建一個響應式郵件。
          為一名優秀的web前端人員，不懂響應式布局怎么可以呢？ 今天跟大家分享web前端開發和設計的干貨。關于響應式布局的設計方法和響應式前端優化。
          我們都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的顯示器。
          所以，我們設計的網頁不能在按照1024的標準來設計或者是前端重構了。
          再加上現在移動互聯網的趨勢發展這么良好，錯過移動互聯網這個平臺是我們的最大損失。
          因為國內眾多電商網站還是門戶網站，移動端的流量要大于pc端的。
          響應式的核心優勢在于設計者可以為所有設備使用同一種模板，只需要用CSS來定制內容在各種大小屏幕上的呈現方式。
          一、3種響應式布局的設計方法
          1、中心定位，兩側自適應
          這種方法是將內容和視覺居中，而且把尺寸控制在1000px以內。左右兩側就放一些輔助信息，讓他們根據屏幕寬度自適應即可。
          2、單側定位，中心延伸展開
          這個方法就是把主要的內容放在左側。這是我們閱讀習慣所決定的，然后右邊放一些輔助信息。中間這塊是自適應屏幕寬度內容。
          3、騰訊稱為的小切糕全屏響應式設計。
          其實小切糕全屏響應式設計算是瀑布流里面的一種。是根據屏幕寬度進行計算，以一個比較小的單元格微基礎，然后以2倍，3倍，4倍等方式進行拓展，并計算出最適合的完整組合。通常用在圖片信息展示頁面。
          二、響應式布局的組成和常用插件介紹
          （1）Media Query
          Media Query的主要作用是根據不同的分辨率去調整一些不同的樣式。由于目前主流的移動設備都基于ios和Android，這兩者的自帶瀏覽器都是webkit內核，因此我們可以使用viewport屬性和Media Query技術實現響應式網頁。通過這一方法，我們能實現讓基準字號font-size在不同分辨率下顯示不一樣的內容。
          （2）Fluid grid
          Fluid grid也稱流體布局，就是在PC端實現的基礎上將一些元素的狂傲由固定調整為彈性制的百分比或是字體比例等。使用Fluid grid的網站能夠根據屏幕寬度自動調整頁面中每列的寬度，從而保證頁面始終處于完整展現的狀態，并且實現原有的基本功能。
          （3）Flex box
          Flex box是CSS3新添加的一種模型屬性，它的出現有力的打破了我們常常使用的浮動布局、實現垂直等高、水平均分、按比例劃分，可以實現許多我們之前做不到的自適應布局。如果你希望網站能以webapp的外觀呈現在手機用戶面前，那么，Flex box就是個不錯的方式。Flex box和APP的結構很類似，頭部底部全部固定，而中間部分的高度實現自適應。
          HTML5響應式布局網站模板下載，算是一個響應式布局學習案例。
          4、一套響應式布局HTML5網站網站模板下載-Wee
          三、響應式前端設計的優化。主要針對用戶體驗的改進。
          (1)減輕Javascript庫負載
          對于移動端來說，jQuery表現的太過厚重，而現在針對移動端的狀態來說，有jQuery Mobile、YUI、XUI等可供選擇的框架。
          （2）減少HTTP請求次數
          移動端相比較PC端有一個特殊的限制需要考慮到，就是用戶的網絡流量是有限的。這時候針對這些頁面內部的部分操作，可以使用Ajax異步請求來完成，針對短期內不會變化的一些數據，可以使用服務器端緩存、前端緩存等機制來保存這些數據，這樣可以減少用戶一定的數據請求量。
          （3）Javascript和CSS需要盡量壓縮
          把頁面中使用的Javascript和CSS進行壓縮之后會有效地減少頁面大小。
          （4）用CDN管理頁面資源
          CDN的即內容分發網絡，意在盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的環節，使內容傳輸的更穩定。
          （5）列表圖片實現“懶”加載
          移動終端設備因為屏幕大小有限，沒有必要將全屏中的圖片一次性加載完成，網頁加載的同時，我們可以選擇逐個加載，當用戶進行滑動頁面的時候，再繼續加載圖片。
          （6）圖片顯示的優化處理
          根據用戶設備的分辨率來加載不同分辨率下的不同圖片，這樣既能給不同終端的用戶一個很好的視覺體驗，又不會白白浪費用戶的網絡數據流量。
          我的微信號碼：inivip
          etz是干凈的充分響應式寵物服務HTML模板，適合任何寵物或動物相關業務,如獸醫,寵物店,養犬等。模板包括許多有趣的元素很容易編輯，建立在bootstrap前端css框架,有一個強大的選項,使主題完全可定制的。
          主要特色
          • 驗證HTML5和CSS3
          • 基于Bootstrap3.3
          • 很容易編輯
          • 14頁包含
          • Mailchimp的集成
          • 5準備配色方案
          • 視差拖動滑塊
          • 充分響應
          • 可濾過的畫廊
          • CSS3動畫



          源碼獲取，前端學習交流私信“123”
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
69久久精品无码一区二区|
国产在线精品一区二区在线看|
国产经典一区二区三区蜜芽|
日韩三级一区二区|
美女毛片一区二区三区四区|
波多野结衣一区二区三区高清在线
|
蜜桃无码AV一区二区|
亚洲乱码一区二区三区在线观看|
国产精品一区不卡|
国产天堂在线一区二区三区|
久久久无码精品人妻一区|
精品人无码一区二区三区|
久久高清一区二区三区|
久久婷婷色综合一区二区|
日本一区二区三区免费高清在线|
天堂成人一区二区三区|
亚洲字幕AV一区二区三区四区|
久久久国产精品亚洲一区|
蜜桃视频一区二区三区在线观看|
午夜福利一区二区三区高清视频|
亚洲不卡av不卡一区二区|
国产精品视频第一区二区三区|
人妻少妇AV无码一区二区|
成人精品视频一区二区三区不卡|
久久精品一区二区三区中文字幕
|
日韩一区精品视频一区二区|
亚洲AV无码一区东京热久久
|
亚洲一区二区成人|
日韩免费无码一区二区三区|
制服丝袜一区在线|
日本一区二区三区不卡视频|
日韩精品午夜视频一区二区三区|
日韩AV片无码一区二区不卡|
国产a久久精品一区二区三区|
一区二区三区观看|
国产波霸爆乳一区二区|
日韩人妻无码一区二区三区久久
|
日本精品一区二区三区在线视频|
精品3d动漫视频一区在线观看|
日韩国产一区二区|
国产精品一区二区久久不卡|