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 和類別名稱長度