You can now start to think about how you're going to approach the build and what will need to be considered.
When it comes to building an Email Design System, the process will differ slightly from building a template for a single email. You'll have all of the possible branded design and content options that you need to create any of your emails in Taxi, in one HTML. Therefore the size of the code will be a lot larger and some elements will need to be repeated many times over, like call to actions for example. This sounds like a lot of work, but by breaking it down with the steps below, not only will it save you time in the future, you'll also have a much smoother build overall .
As mentioned here, it's good to consider the order in which your blocks (we call them modules) and elements will sit in the HTML. A typical hierarchy to follow when building is:
By grouping modules and elements into sections beforehand, it not only helps break up the build, but also enables you to focus on one section at a time and refine what's included.
Building a snippets library isn't a new tip, however it is something that will save you a lot of time when building your Design System. Your HTML will consist of a lot more elements, because it will include every possible layout you'll need to build your emails in Taxi, so you may find you have to repeat multiple sections of the code. Thinking about having snippets to re use instead of coding from scratch each time will really pay off here, especially for elements that will repeat a lot. You may also have some modules, such as a full width image, that can be saved as a snippet and reused to build another module that, for example, contains a full width image, body copy and a button.
Not only does this speed up the initial build of your Design System, it will also ensure the code is easy to maintain when making updates and is accessible to others in the future.
When you come to build your Design System, the design of how your emails will appear on smaller screens will have already been decided on. Therefore make sure to consider what responsive technique will work best for your mobile design. Trying a few different techniques beforehand can help you decide which is best, for example, taking the fluid approach may work for some image elements that are able to scale down well. However others may need a separate mobile image option to replace the desktop version in order to create a better experience on a smaller screen.
Next: Incorporating email best practices into your Email Design System
