Modularising HTML

Starting with any HTML template, think about which parts of the email will repeat, and be reused often. For me, those are:

  • Article blocks
  • Call to action blocks
  • Header section
  • Footer section

So to break an email apart, it would be nice if these sections were editable and reusable (especially the article blocks):

In Email Otter, my approach is to separate relevant segments of HTML into smaller HTML files. This doesn’t take much technical expertise — here’s an example of where I separate the ‘Latest articles’ section from the main HTML file, and paste it into a separate file:

If this is repeated with each section, you’ll eventually have a small collection of HTML files — each containing a ‘component’ of your email :

For instance, the ‘Try it now’ HTML would sit in one file like this:

Whilst this process is not technically advanced, it’s still a painful experience and something I’ll make much more user friendly. Ideally, you won’t need to touch the HTML — at the click a button, your large template will be separated into blocks.



Source link https://blog..io/design--for--587f6267951d?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here