響應式郵件設計工具推薦

2021-07-25 22:01:37 字數 1568 閱讀 8418

最近工作上需要做一些html郵件模版,就是在平時郵箱裡收到的那種推廣郵件。深入研究之後,才知道這坑有多深。

最初我的理解是,既然是html,我大前端的看家本領!半小時搞定沒啥問題。試了才知道,html郵件沒有任何標準,而且不管是html和css全部都是被閹割了的(啥?你還想用js?),並且不同郵件客戶端之間差異也很大。對於div和float的處理也帶有很多的不確定性,所以浮動布局,flexbox啥的一樣也用不了,只能用90年代流行的**布局,90年代啊!開發體驗是奇差無比,更重要的是我並不想去學過時的table布局。

我這次的要做的是出模版,服務端套,還需要考慮到收件人可能用的是手機客戶端檢視的郵件,所以需要響應式。對於我來說,可以拖拽的郵件工具肯定是不合適的,它並不能很好的實現設計和需求,況且作為一名開發者應以它為恥。

首先github找到了foundation-emails,掃了一下文件和demo,感覺非常好用,還能用sass,狂笑!!等模版做完了,按照文件npm run build文件上說這是把所有樣式插到行內(沒看到會壓縮啊),當我執行之後,我看到的是這樣的畫面。

還是要在build的之前往裡面插入服務端模版引擎的迴圈語句?只能手動去格式化html**再加迴圈?我首先試了試第乙個在模版裡面想替換的地方加幾個模版引擎常用的},結果build之後,直接就編譯沒了,再去github看看,找到了這條還沒有修復的issue,看來大家都還沒什麼優雅的辦法。

對於只需要替換個使用者名稱或者只有少部分內容需要動態的郵件,foundation-emails是非常不錯的選擇,在其中使用響應式非常非常簡單,格柵布局,就像這樣

large="6"

small="12">

在社群裡找到了這款工具,用它寫的模版大概是這樣的, 也很不錯。

>

>

>

>

"/assets/img/easy-and-quick.png" width=

"112"

>

>

="20px" color=

"#595959" align=

"center"

>easy and quick

>

>

>

"/assets/img/responsive.png" width=

"135"

>

>

="20px" color=

"#595959" align=

"center"

>responsive

>

>

>

>

>

="#f45e43" font-size

="15px"

>discover

>

>

>

>

>

而且它還有客戶端,客戶端中可以匯出html,匯出的**還算清新。動態替換的內容,我通過官方demo中發現用[[ ]]包裹就沒什麼事了。

Adobe推出響應式設計工具EdgeReflow

adobe發布了一款名為edge reflow的工具,可以用於響應式設計的視覺化創作,提高通過html5和css3技術在不同裝置上所進行的網頁開發效率。付費會員可以繼續獲得免費的軟體更新。reflow的主要功能是通過在設計的過程中將所有的 斷點 模組 進行視覺化的展示,讓開發者可以在工具中一邊進行間...

powerdesigner設計工具

powerdesigner設計工具主要是進行資料表的設計的,這個工具是由sybase公司出品的。在進行資料庫設計的過程之中,往往都會借助於一些開發工具。如果要使用powerdesigner設計工具進行設計的話,那麼需要首先建立乙個物理資料模型。下面的dbms選項可以選擇自己所使用的資料庫。連線關係之...

Swing設計工具

注 我只統計我用過的。最重要的是我只是告訴大家,我可沒做其他的!希望對大家有幫助 1,jbuilder,這個應該很多人都用過了,就不多說了 2,netbeans,sun出的ide,現在越來越好用了,要指出的是以前兩個設計器設計好了圖型後切換到 的時候,它的核心設計ui的那部分 是不可以改的。3,my...