部落格
電子報對Javascrip、CSS的支援度,以及內文圖片最佳大小

電子報顯示支援度

由於郵件必須要在各種郵件程式裡都能打開,不僅最新手機上郵件App正常開啟,舊款手機App也要能開啟,跨平 台上Windows、Mac、Linux、Unix都要能開啟。即使同樣是Windows也有Win 8、Win 10等不同版本,再加上同一版Windows還有各種不同郵件程式可供使用。此外,現 在大多數郵件本身是使用HTML,如同網頁背後所使用的語法,但因資安考量,郵件程式在解析HTML內容能力遠 比瀏覽器限制更多,許多在瀏覽器上可用HTML語法,在 郵件上無法使用或需要改寫。

一、Javascript

幾乎每個網頁都會帶些Javascript程式碼,廣泛被網頁 設計使用,但Javascript在郵件使用上有很大的限制,這是 因為資訊安全考量,禁止在郵件系統內執行程式。雖然許多 最新的郵件程式,也能支援部分Javascript解讀,但並非所 有瀏覽器上能使用的Javascript都能在郵件使用,因此建議 在普通電子報設計上,盡量都不要使用任何Javascript,以 避免相容性問題。

二、CSS

大部分現代郵件程式特別是以瀏覽器收取郵件,例如Gmail、Yahoo Mail,都能支援CSS的設計。但由於CSS有非常多設計語法,並不是每種語法都能在郵件上支援,而且同一個CSS作法,很可能在Gmail上面能使用,但在Yahoo Maill或其它郵件程式卻不能。因此為了避免這些相容性,最好的辦法還是盡量不要使用CSS,若需使用則在常見的讀信程式上面,例如Gmail、Yahoo Mail、Hotmail、 Outlook等事先做好測試。

三、圖片

(一)圖片大小

郵件內容不能只有一張大圖片,因為這不符合一般人寫信習慣,所以容易被列為垃圾信。郵件內文圖片,也要注意長寬不能過大,圖片上的字體要足夠大,因為現在郵件大部分都是透過手機開啟,手機螢幕比電腦小很多,若字體不夠大的話,收信人用手機會看不淸楚。圖片大小也會在不同裝 置上造成影響,例如Outlook不同版本會有限制超過一定程度大小的圖片寬度會無法顯示出來。在Gmail圖片若長寬過大,會被裁掉部分內容,無法完整呈現。因此一個理想的電子報內文圖片,就如同RWD郵件設計,特別因應手機閱讀 習慣,通常寬度不超過800像素,長度也不超過600像素, 或是可以做成一個長方形圖,就像在Instagram上圖片,這樣也適合在手機上瀏覽。

(二)影像地圖(Image Map)

在一張圖片上面,根據使用者滑鼠點選到不同位置, 可連接到不同網站,這是傳統桌上型電腦網頁常見的設計方式。舉例,在一個促銷圖片上面,放入多種促銷產品,當用戶選取所對應的促銷內容,即可連接到這個促銷產品頁面。但這做法在手機上卻不合適,由於手機畫面相當小,使 用者都是用手指去點選內容,在圖片已經不是很大的情況之下,如果還區分不同位置有不同點選,這一些圖片或是文字便會過小,造成點選並不精準,再加上不同手機它有不同的解析度,即使已經設計好在某個位置區間連接到特定頁面, 在網頁設計跟測試都很順利完成,但在不同手機上就會造成點選位置跟預期的並不一樣。因此B2C郵件不建議電子報使用影像地圖,因為大部分收信人都是用手機開啟,而這種做法是傳統上以桌機開啟郵件為主。

(三)影片顯示

網頁上經常會加入YouTube影片,讓網友可以觀看, 但此網頁設計做法通常在郵件上卻不行,原因是郵件不能 使用內嵌影片語法,但在瀏覽器上卻能使用。郵件的解決 方法是採用影片縮圖, 郵件打開後, 看起來就像是埋入YouTube影片,但實際上是張圖片,點選就可跳轉到瀏覽 器上播放YouTube影片。

(四)動態GIF圖片

在許多社群媒體上經常會看到各種充滿創意動態圖片, 這多半是使用GIF動態功能所做出來的,但動態GIF圖片在郵件顯示上,不同的郵件程式會有不同的支援程度。即 使Gmail上面可能測試有動態圖片,但很可能在個人電腦Outlook就沒有動態效果,至於哪些郵件程式會支援哪些不支援,也並沒有確定標準,因此為了確保相容度並不建議在郵件設計上使用動態圖片。