AMP 電子郵件最佳實務

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 屬性、`action-xhr` 的 `amp-form`、`amp-img` 的 src 或 <a> 標記的 href 屬性無法透過 `amp-bind` 變更。
您的訊息應包含靜態 HTML 版本，以防使用者被帶往訊息的 HTML 版本，或使用者轉寄訊息。
AMP 電子郵件格式對電子郵件大小設有位元組限制。若要避免電子郵件因超出大小限制而回復為靜態電子郵件，請採取下列措施：
- 修剪您的電子郵件並移除不必要的內容
- 盡可能減少電子郵件中的超連結數量，電子郵件服務供應商和分析平台可能會將這些超連結的網址改寫為非常長的網址
- 避免不必要地使用 HTML 結構，例如可摺疊成一個 div 的多個巢狀 div
- 盡可能減少事件和動作的 `on` 屬性以及 `amp-bind` 繫結運算式中的空白字元
- 使用 HTML 和 CSS 壓縮器等工具來執行壓縮，例如：
  - 移除 HTML 和 CSS 中不必要的空白字元 (例如用於提高原始碼可讀性的空格和換行字元)
  - 移除 HTML 和 CSS 中的註解
  - 移除選用標記
  - 縮減 CSS 選取器和 HTML 中使用的 ID 和類別名稱長度