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

(GOOGLE翻譯)

對焦和流動性

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

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

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

 

優化圖像

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

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

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

結論

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

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

 

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

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