Best Practices: Desktop and Mobile Formatting

Read on for some best practices around formatting headers and footers for different recipient devices. For more information on images, check out this article.

Headers and Footers 

When designing your header or footer, it is important to pay attention to your actual
content area width. Your goal is to achieve a 1:1 view. Otherwise, it will look a bit
different than expected.

Once you are on the ContactMonkey template builder, go to Settings. Then check what is your content area width, and update it if needed. Then keep this number in mind when creating your header. When setting image height, consider the overall file size in terms of MB and the amount of copy you plan to include.


To better explain what we have in mind, we created 3 different header images that have different widths: 1500x170px, 800x170px, and 400x170px. All headers have the same height, and font size of their “titles“.

Desktop Headers

The first header image looks quite narrow and stretched, and the legibility of the text looks poor. The second one represents 1:1, all works fine. The third one is short and does not manage to cover the entire content area width.


Mobile Header

The first header looks very narrow and illegible. The second one looks quite narrow and legibility is poor, especially if there is more text featured. The third one looks fine and is legible. To achieve the best visual result, we recommend using the doubleheader: an image designed for the desktop will be hidden on mobile; and the other one designed for mobile, will stay hidden on the desktop.


Double Header

Upload each header to an individual row. Then select one of the rows, go to the sidebar on the right side and hide it accordingly. Learn more here.




Have more questions? Submit a request