學習電子郵件營銷和登錄頁面中的響應設計大師

El 由於格式不同，響應式設計在今天至關重要 用戶從其平板電腦，移動設備甚至計算機面對的內容。 電子郵件營銷和登錄頁面中的這種響應式設計對於與客戶進行全渠道溝通至關重要。

因此，您必須認真對待使用不同的模板 不同的寬度以達到最佳設計 這些通訊或目標網頁可能會登陸我們希望他們從Google或Facebook上的廣告中轉換的未來客戶。

電子郵件營銷中的響應式設計

電子郵件營銷是宣布產品報價或在我們的博客上創建的新帖子的一種方式， 從而更深地縮小 與我們所有的追隨者。

這些新聞通訊具有響應性，這意味著 可以從手機上完美地看到它們，平板電腦或計算機。 因此，我們必須嘗試擁有必要的工具，以使所有視覺元素足夠和諧，以便於閱讀時事通訊。

響應性意味著 在不同設備上顯示頁面始終正確。 為此，我們有以下工具 電子郵件營銷 這有助於我們測試以不同格式創建的新聞通訊，從而修改諸如padding或margin的值，以便當我們減小瀏覽器的寬度時可以完美地重新定位它們。

在 使用CSS“媒體查詢”的網頁設計 根據格式設計網站。 對於移動設備，最大像素為360px，從360px到650px，我們可以為所有通過平板電腦查看我們網站的用戶進行修改。

我們的電子郵件營銷新聞稿的一些原則是：

• 清晰的視覺層次：H2中的標題，以段落格式保留文本。
• 兩種不同的來源：一個標題和一個文本使我們的時事通訊更具可讀性。
• El 使用顏色區分標題，文本和其他元素：我們可以逐漸從深灰色變為淺灰色。
• Un CTA（號召性用語）清晰可辨：如果我們公司的徽標是紅色，則號召性用語可以使用這種顏色，而其餘的則可以使用互補色。

我們給你一個很好的例子 Filmin進行的時事通訊中的響應式設計 並且您可以在提供的圖像中看到。 清晰的白色字體，以及非常淺的灰色文本，使我們能夠快速可視化我們想要閱讀的不同空間。 CTA並非來自另一個世界，而是通過播放圖標提供幫助，這使我們看到了等待我們的東西。

邊距中有足夠的空格，白色是文本的主要顏色， 與徽標完美契合 品牌； 被它突出的灰色包圍。 一個引人注目的圖像，它設置了從第一時刻開始掛起的新聞簡報的重點。 側面還留有空間，以使屏幕的整個寬度不會被“吃掉”。

在 桌面版保留了這些原則，甚至在文本中留出更多空間，並在每邊留出較大的空白：

目標網頁上的自適應設計

很多 響應設計中可以使用相同的原理 登陸頁面花費所有的時間來正確選擇模板並遵循設計中的一些規則非常重要：

• 視覺簡潔：我們正在談論保留空白以將重點放在CTA上。
• 精美動人的圖像 給讀者，而不會忘記分辨率，它們看起來很完美。
• 顏色的重要性 並且我們再次強調。

我們必須致力於針對移動設備，平板電腦和台式機的登錄頁面的自適應設計。 拿 每次更改都需要反复嘗試的時間 從這三種格式中可以看出，因為我們可以放心，而忘記了CSS中所做的更改在移動設備上看起來將是可怕的。

這項工作可能很乏味，但至關重要的是，我們要花時間測試每個更改。 這 使用邊距 並儘量不要錯過CTAs或操作按鈕中的規則：

• 這 相對於文本和按鈕邊距的距離是漸進的 所有三種格式。 它既不小也不大，並且高度相同。
• La CTA按鈕尺寸的比例 必須提供它所處的其他元素。

一個明顯的例子是 Shopify在您的目標網頁上所做的工作 在台式機上，您可以在移動版中看到。 注意使用顏色，空白和具有適當大小和版式的那些文字：

一系列技巧 為您的企業或在線商店提供更好的目標網頁 這些新聞簡報對於向用戶獲取更新和促銷非常重要。