Design, slice, and email

You must have subscribed to receive deals and coupon emails from GAP, Macy’s, H&M and other clothing and accessories retailers that you dig.

What is the most common thing you see in emails sent by these stores from design perspective. Yes! you are right, use of big images with awesome design like the one below sent by GAP.

Portion of the body of email send by GAP
Portion of the body of email send by GAP

You might be thinking how am I going to write CSS and HTML in table layout to deliver this design. Well, guess what writing HTML and CSS for design like these are much easier than you think.

Not sure about you, but when I am working on emails, I either design full blown design comp on my own or I get the design comp from the design team, and I always prefer to have PSD files.

Now the trick to work on heave design emails is to slice the design and use sliced images in your HTML.

Few things you have to make sure when you slice your PSD:

  • Make sure to slice different CTAs so these CTAs are separate sliced images which you can link with anchor tag in HTML.
  • You might think if there is only one CTA then there is no need to slice, we can use one big image of the design. That will work for sure, but for email clients its always better to send few small images then sending one big image.
  • Not everything in the design has to be saved as image and use in HTML. For example the footer texts and social follow sections can be written in HTML.

Please look at the screenshot below of how this email template was sliced.

Slicing email design in photoshop
Slicing email design in photoshop. Notice how black buttons at the bottom are sliced separately so we can link them differently.

If you notice I have sliced black shop buttons at the bottom separately so that I can link those images differently to its corresponding target landing page.

This template was created just to demonstrate how to create emails with big images. But still you can download the source code and see how all the sliced images are laid out in HTML and how CSS media query is used to make it responsive.