(GOOGLE翻譯)
響應性的Web設計（RWD）的概念，我們一直在談論了很多最近，我們把它響應圖像和其他工具，甚至漸行漸遠。不久之後，我們將提供一個覆蓋響應印刷術的主題的文章，但在那之前，讓我們專注於電子訊息，以及如何響應佈局，我們可以把它們變成，使他們能夠適應屏幕的設備上查看。
為什麼響應的設計呢？
我們中的許多人閱讀電子郵件，從我們的智能手機 -汽車，火車，甚至飛機。我們嘗試做盡可能多的事情盡量在旅途中，所以我們可以享受更多的閒暇時間和家人一起，在健身房鍛煉或在自己的愛好。
如果您閱讀您的電子郵件，從智能手機一次，你已經知道了，雖然這可能是一個積極的經驗，但也可以變成一負一。我們已經經歷了小字體，窄欄和破碎的佈局方式太多次。但我們是在為現在的變化，響應性的Web設計是在網頁設計中歷史最重要的概念之一的邊緣。
如果您發送電子郵件訊息的，如果你不知道，我告訴你，20％左右的全球發送的電子郵件被讀取在智能手機或平板（從2011年的一項調查顯示-近16％比2009年多）。令人驚訝的與否，大約90％的這些設備的運行iOS。
所以你的潛在讀者每五時使用便攜式設備訪問他們的收件箱。幾年前人們關注的這些電子郵件在Gmail或Outlook好看。現在，這是梳理，使它們看起來不錯的便攜設備上是一樣重要的，需要立即引起注意。
這些便攜設備迅速接管，很顯然，在小屏幕上提供了一個負的閱讀體驗，可能會導致你失去一些追隨者，甚至大多數人。
設備的目標
您可能會問自己，這是設計的設備，您可以 – 我可以告訴你的是，或多或少，你可以設計為所有的人。運行iOS的設備應該沒有問題，因為它們是很好的優化，HTML和CSS。雖然你可能會遇到一些問題，與Android設備，這也是理順從谷歌通過定期更新。基本上，有沒有限制你。
設計元素
跳進位編碼之前，我們要來看看適合手機以及一些設計元素，並應避免那些。響應性的Web設計相同的概念將被用於建立響應的電子訊息。在你不知道的情況下，對響應性的Web設計，這篇文章可能不會為你做太多的感覺，所以你應該回去讀一些有關的基本的概念。
其基本思路是，像往常一樣，我們將建立兩個CSS佈局相同的內容 – 一個適合台式機和郵件客戶端和其他較小的屏幕上會很好看。
為了使佈局看起來不錯的移動，也有一些CSS的細節，你需要考慮：
- 列 -應該永遠不會有多於一個列，而不是大於500至600像素。
- 鏈接和按鈕 -這些都應該有一個最低的目標區域為44×44像素，根據蘋果公司提供的一些準則。這將確保你能夠真正點擊鏈接，瀏覽。
- 字體大小 -你顯然有話要說，所以你會使用單詞和字母。請確保您使用的最小字體大小為13像素。據美國相同的巨頭，將擴大範圍和更小的東西可以打破佈局。
- 長度 -便攜設備上顯示的信息通常應該是非常簡明扼要。的重要元素應該是在上側和滾動應盡可能地減少。
- 隱藏元素 -在桌面上，你能負擔得起使用了更多的空間，而不是在移動平台上。因此，這是一個聰明的主意，用一個簡單的CSS屬性來隱藏不同的要素：顯示：沒有，如果你想要的東西，應該被隱藏的一個例子，那麼，社會媒體按鈕是那些東西。雖然他們可能是巨大的，有用的桌面上，他們是凌亂的佈局上移動。
為了開發用於便攜式設備的一個很好的解決方案，這是一個好主意，開始嘲諷了兩個佈局，一個從一開始就面向台式機和一個用於移動。請記住，在手機上，你有倍以上的空間要少得多-這是所有重要元素的地方，應該放在包括CTA按鈕（也稱為呼叫操作按鈕）。收件人應不滾動才能看到它。
