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

(GOOGLE翻譯)

響應電子郵件通訊設計:增加移動的讀者(上)

讓我們來看看一些編碼!

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

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

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

 

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

其他技巧

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

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

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

對焦和流動性

很多人不知道的是,事實上,媒體的質疑,這是我一直在使用上面的例子,可以很專注。這意味著你既可以設計為橫向和縱向方向和確切盡可能多的決議如你所願。

 

上面的代碼告訴樣式表,在屏幕上應該有一個寬度超過320px來電,但不超過480像素。你可以添加另一個規則,一個又一個,另一個,等等。您可以設計為盡可能多的設備和屏幕尺寸如你所願。

媒體查詢也可以被用於創建流體佈局,這基本上意味著你不會有如此精確對不同屏幕尺寸,但您將定義中的元素在屏幕大小的10%,縮小下來寬屏幕。要申請左邊界,您只需使用的margin-left:3% 。這將確保,無論怎樣窄或寬的屏幕是,保證金將始終是3%的寬度。

優化圖像

有些設計師建議您調整圖像的精確大小的屏幕上顯示它。但是,我建議創建一個新的小尺寸圖像。一個大的圖像縮小可能不那麼有用的或不可見的,所以創建一個圖像裁剪角落出來會是一個解決方案。

如果你設計的蘋果設備,我會建議創建一個圖像上顯示一個你想在雙尺寸的,僅僅是因為視網膜顯示蘋果設備的功能。這個小技巧,使圖像顯得清晰,明快,因此將改善用戶體驗。

流體佈局調整圖像大小應該簡單地使用背景尺寸:100%。然而,似乎有一些更多的優勢,背景大小:封面,所以做了一些調查,看看哪一個更適合你的。

結論

要付諸表決,並結束這篇文章,我想告訴你,是多麼的重要實際測試盡可能多的設備盡可能的通訊,而不是只在調整大小的Safari或Chrome桌面瀏覽器。便攜式設備通常解釋不同的事情,不是電腦做一個整體的其他方式,所以你必須以確保您的移動通訊版本真的像你想讓它。

不久大部分的電子郵件將會被讀取,而不是從桌面屏幕便攜設備。我相信你一定會喜歡,內容的可讀性,並提供良好的用戶體驗去閱讀那些追隨者。如果你提供了這樣的郵件列表,你應該去研究多一點,RWD的電子訊息,並開始為這些便攜設備的設計和開發馬上。

 

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

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