AMP 電子郵件最佳實務

重要：此文件不適用於您目前選擇的格式 stories！

AMP 讓電子郵件能呈現令人興奮的沉浸式互動內容！設計電子郵件時，請謹記下列最佳實務，以確保電子郵件效能良好、跨平台可靠，並符合使用者期望。

速度

使用 amp-list 動態擷取內容時，請加入預留位置，以維持元件結構的完整性。預留位置的版面配置應盡可能與文件在傳回要求的資料後相似。這可確保訊息大小不會大幅變更或改變版面配置。

使用 amp-carousel 時，請確保已設定 controls 屬性。這可讓使用智慧型手機等觸控螢幕裝置的使用者瀏覽輪播。
使用 amp-form 時，請注意並非所有輸入類型都受 iOS 支援。如需更多資訊，請參閱 Safari HTML 參考資料中的「Supported Input Values」。
並非所有 autocomplete 屬性值都受到不同應用程式和瀏覽器支援。假設自動完成功能不適用於您的使用者，並讓表單保持簡短。

請確保您的電子郵件僅使用 AMP 電子郵件支援的 CSS
請避免在 CSS 和 HTML 中的任何位置使用 viewport 單位 (vw、vh、vmin 和 vmax)。由於 AMP 電子郵件會在 iframe 內呈現，因此電子郵件的 viewport 與瀏覽器的 viewport 不符。
不同的瀏覽器有不同的預設 CSS 樣式。如果需要，請使用可正規化樣式的 CSS 函式庫。如需更多關於預設樣式、樣式正規化以及可用函式庫列表的資訊，請參閱 Reboot, Resets, and Reasoning。
請小心 CSS 中溢位的邊界：由於 AMP 版面配置的限制，它們可能無法呈現。

請使用 CSS 媒體查詢來識別裝置，以確保您的訊息在所有螢幕尺寸上看起來都不錯。訊息應在行動裝置上進行測試，以確保版面配置正確且元件運作正常。

使用 AMP 電子郵件時，請記住下列提示與技巧

AMP 電子郵件遊樂場不會代理 XHR，但某些電子郵件供應商會。
AMP MIME 部分應出現在電子郵件中的 HTML MIME 部分之前，以確保在各種電子郵件用戶端之間獲得最大的相容性。
amp-list 的 src 屬性、amp-form 的 action-xhr、amp-img 的 src 或 <a> 標籤的 href 屬性無法透過 amp-bind 變更。
您的訊息應包含靜態 HTML 版本，以防使用者被帶到訊息的 HTML 版本，或使用者轉發訊息。
AMP 電子郵件格式對電子郵件大小施加了位元組限制。為了避免您的電子郵件由於超出大小限制而回退到靜態電子郵件，請執行下列操作：
- 修剪您的電子郵件並移除不必要的內容
- 盡量減少電子郵件中的超連結數量，這些超連結的 URL 可能會被 ESP 和分析平台改寫成長網址
- 消除不必要地使用 HTML 結構，例如可以摺疊成一個 div 的多個巢狀 div
- 盡量減少事件和動作的 on 屬性以及 amp-bind 繫結運算式中的空白字元
- 使用 HTML 和 CSS 縮小器等工具來執行壓縮，例如
  - 移除 HTML 和 CSS 中不必要的空白字元 (例如用於使原始碼易於閱讀的空格和換行字元)
  - 移除 HTML 和 CSS 中的註解
  - 移除選用標籤
  - 縮短 CSS 選擇器和 HTML 中使用的 ID 和類別名稱的長度