響應電子郵件通訊設計:增加移動的讀者(上)-原也網頁設計、網站規劃、網站行銷..

(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按鈕(也稱為呼叫操作按鈕)。收件人應不滾動才能看到它。

讓我們來看看一些編碼!

為了幫助你關閉一個良好的開端,我會告訴你一些關於如何開始編碼了一個負責任的通訊設計。當我們前面所說的,我們將有兩個樣式表,我不是故意的兩個不同的人。你只會有一個樣式,但在某些設備上顯示不同的元素,你會使用媒體查詢。

@媒體聲明所有承認的屏幕尺寸。@媒體的聲明指定這個樣式表的使用,只有當屏幕比480像素窄。此值可被容納根據設備目標。

如果你想成為超具體的,你可以使用相同的聲明類型,不同大小的屏幕,如下圖。

從這裡開始,你只是代碼相同的方式,你總是這樣的。就是這麼簡單!

 

其他技巧

在設計佈局,其中一列,縮小下來就好辦多了,你也可以設計一個具有兩列的台式機使用和移動列在彼此頂部與CSS的幫助下,對其進行自定義。

另一件事是你可以使用的是所謂的“漸進披露”技術。維基百科使用它在移動設備上了很多。它基本上是指在特定的元素,一旦挖掘隱藏的內容顯示出來。如果再次挖掘,他們將隱藏的內容。這將確保該用戶不具有太多滾動,以達到放置在底部的的電子郵件的內容。

這項技術非常適用於通訊電子郵件,在那裡你可以顯示所有的消息和一個簡短的描述,然後,如果挖掘,每個環節都會顯示相應的內容。

 

引用自http://designmodo.com/responsive-email/

原也網頁設計、網站規劃、網站行銷。