AMP 電子郵件最佳實務

AMP 讓電子郵件中能有令人興奮的新型沉浸式和互動式內容！設計電子郵件時，請記住以下最佳實務，以確保電子郵件效能良好、跨平台可靠，並能如使用者預期般運作。

速度

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

可用性和可存取性

• 使用 amp-carousel 時，請務必設定 controls 屬性。這可讓智慧型手機等觸控螢幕裝置上的使用者瀏覽輪播。
• 使用 amp-form 時，請記住並非所有輸入類型都受到 iOS 支援。如需更多資訊，請參閱 Safari HTML 參考資料中的「支援的輸入值」。
• 並非所有 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 電子郵件格式對電子郵件大小設有位元組限制。為了避免您的電子郵件因超出大小限制而回復為靜態電子郵件，請執行下列操作：
  • 修剪電子郵件並移除不必要的內容
  • 盡量減少電子郵件中的超連結數量，因為 ESP 和分析平台可能會將其網址改寫為非常長的網址
  • 消除不必要地使用 HTML 結構，例如可摺疊成一個 div 的多個巢狀 div
  • 盡量減少 on 屬性 (用於事件和動作) 和 amp-bind 繫結運算式 中的空白字元
  • 使用 HTML 和 CSS 縮小器 等工具來執行壓縮，例如：
    • 移除 HTML 和 CSS 中不必要的空白字元 (例如用於使原始碼更易於閱讀的空格和換行字元)
    • 移除 HTML 和 CSS 中的註解
    • 移除 選用標籤
    • 縮小 CSS 選取器和 HTML 中使用的 ID 和類別名稱長度