部落格
沛盛電子報系統支持RWD顯示 (附外部RWD範本可下載)

One Time Password (OTP) 一次性密碼,這是各種網站、電商、App經常用到,現在常用簡訊進行。但簡訊的費用較高,而且簡訊容易遇到塞車問題,當配合的電信業者,如果OTP發送當下線路忙線,就會造成簡訊傳送延遲,造成客戶不耐久候甚至離去等問題。

沛盛資訊OMICard電子報發送系統,一直以來都支援RWD的多屏幕顯示,不管是同一電子報在電腦、手機或是平板,亦或是在手機上直立擺放跟橫放,都可以根據當下顯示的寬度,動態自動做電子報內容的調整。

但是要有RWD的電子報,是要做特別的設計才能夠有這種效果。有許多客戶以為,因為沛盛電子報系統支持RWD,因此就把原來設計給桌上型電腦顯示的電子報,期望發出來的電子報也就自然成為RWD,這是不會變成RWD的。

RWD的範本

但究竟要怎麼樣設計電子報,才會有RWD效果,這是我們在替客戶教育訓練時,客戶經常詢問的問題。沛盛資訊是專精於電子郵件發送的廠商,我們不是電子報設計專家,這部分比較偏向是美工設計的領域,因此沛盛自己也沒有RWD電子報範例提供給客戶參考與測試。

不過廣大的網路上資源豐富,我們挑選出兩個網路上RWD的設計範例,都是可提供完整HTML檔案下載,可以參考這樣的範例,設計出自己的RWD電子報。

Litmus RWD 範本

Litmus 這英文單字是石蕊,還記得國中做過的石蕊試紙實驗嗎? Litmus就是電子郵件界的石蕊試紙。這間公司提供的服務,是在電子報發出去之前,去測試在各種不同的平台(手機、平板、電腦),作業系統(Win/Mac/iOS/Android),電子報呈現的樣子。我們在做教育訓練時,都會推薦使用這間公司的產品,做為電子報發出前的測試。也因為本身就在電子報平台測試產業,因此Litmus提更了RWD範例,可以下載來測試使用(需輸入郵件地址獲取下載連結):

https://litmus.com/resources/free-responsive-email-templates

(手機直立)

litmus_v

(手機橫放)

litmus_h

Cerberus RWD範本

這是由專長在網頁前台與視覺設計的Ted Goas所製作,他已經標出了每個欄位的圖片大小,方便自行更改圖片置換:

http://tedgoas.github.io/Cerberus/

(手機直立)

Cerberus-v

(手機橫放)

Cerberus-h

結語

手機的移動性優點不是桌上型電腦能比得上,越來越多人早上起床第一件事情,就是在手機上查看郵件。沛盛資訊也注意到,以前電子報發出後都要等一段時間,才會在電腦上開啟點閱。但隨著移動裝置的普及,現在電子報發出去之後,幾乎可以很快就看到有人開啟,這些多數都是透過移動裝置打開郵件。

沛盛資訊的OMICard全面支援RWD郵件,透過本文的範例,大家也可以學習如何製作出自己的RWD電子郵件。