The document discusses email design best practices. It notes that email code is constructed using HTML tables, which forces a rigid grid layout. Good email design embraces this nature by arranging content that can stack vertically on mobile. It also stresses that the purpose of emails is to drive customers to websites for purchases, so design should highlight products and links simply rather than replicating full site experiences. Modern, responsive email design considers stacking, font usage, images, and personalization across devices.

1. displayblock.com
Designing great emails
(while remembering to design for mobile)

2. displayblock.com
Designing great emails that not only look awesome but also achieve their
objective can be difficult. Email code is different to web page code namely
because it is constructed using HTML tables. This tabular nature forces email
layout to follow a fairly rigid grid system. This might make email design seem
restrictive. Email designers around the world prove this not to be the case.
The seemingly restrictive nature of email can really be a very creative and
enticing space for brands to directly interact with their customers. Email is
not fighting for attention. Should someone choose to read your email
they’re focused only on that email. There is no Facebook frame or infinite
scrolling wall of content to steal the viewers attention away. It is no wonder
email is the most effective form of marketing.
Great email design embraces the medium of email and works well within the
constraints of email code.

3. displayblock.com
This market share would most likely change to favour more luxury devices for more
luxury retail or high street brands.
Mobile Market Share
iOS
macOS

4. displayblock.com
Making Great Emails
(or important things about email design to remember)

5. displayblock.com
Problem: Text overlapping image
Solution: The entire area would need to be a
single image. The image also lies on the same
row as the button so the button would need
to be an image as well.

6. displayblock.com
Problem: Image overlaps border
Solution: The entire area would need to be a single
image. If the image moved within the boundary of
the border it could be made to stack.

7. displayblock.com
Problem: Multiple products overlap
Solution: The entire area would need to be a
single image. A single image can only have one
link so this image wouldn’t be able to direct to
multiple product pages.

8. displayblock.com
Problem: Central border doesn't meet top and bottom borders
Solution: If the border was adjusted to touch the
other borders it could be made to stack.

9. displayblock.com
Problem: Text overlapping image
Solution: The entire area would need to be a
single image. If the reflection was removed it
could be made responsive.

10. displayblock.com
Problem: Complex layout
Solution: All the sections overlap on
either the horizontal or vertical
planes. Stacking the content is not
possible. This is not possible to make
responsive.

11. displayblock.com
Problem: Non standard fonts
Solution: This would need to be a
single image as nearly all users would
not have these fonts. If this text was
changed to a web safe font it could
be made as real text. Alternatively a
web font could be used in this
instance to in which case this design
is perfect.

12. displayblock.com
Problem: No consideration of mobile
Solution: Although this could be
made to be an email the layout
doesn't lend it self at all to stacking
content and the text is too small to
read. This was designed purely for
the desktop. This could not be made
responsive.

13. displayblock.com
Problem: Asymmetrical layout
Solution: Although this is a standard
two column layout the horizontal
borders of each module do not align
so this could only stack if the entire
column stacked on the other.

14. displayblock.com
Problem: Overly complex images
Solution: While there is no problem
with this image and it could very
easily be made to resize the content
within the image would be too small
to comfortably see on a mobile
device.

15. displayblock.com
Problem: Text flowing along an image
Solution: Although achievable in
web design creating this layout in
email is not possible. The entire
section including the small triangular
images would need to be an image.

16. displayblock.com
Problem: Text is too small
Solution: This text is ok for a
desktop view however the size would
need to be adjusted for mobile
devices.

17. displayblock.com
Email is coded using HTML tables. This forces email
layout to fit a fairly rigid tabular layout.
All content needs to ultimately fit into a rectangular grid
pattern. Content can be arranged into all types of
columns and rows but needs to sit within these.
It is also very important to remember content needs to
sit well side by side on desktop but also stack vertically
when displayed on a mobile device.
Email is tabular

18. displayblock.com
To get emails to look the same across all devices is unachievable. It is best to try and
give the best or most uniform experience per device and concede that some relic
email clients or devices will not display email correctly.
Once that concept is understood arranging content to stack can be fairly simple.
Email is a thin medium by its nature usually only 600px wide this means it’s perfect
for 1 or 2 columns, 3 columns is fairly tight and 4 columns is not advisable.
Content that fits side by side should ideally fill the same vertical and horizontal
space because when this is stacked it naturally looks good.
Think in terms of stacking content

19. displayblock.com
Email design is not
Web design
Remember the purpose of an email is ideally to get a
customer to click a link which will take them to a site
where they’ll be able to make a purchase.
Recreating complicated website navigation bars,
pseudo shopping carts, fake pages for customers to
browse all distract from the product.
Good email design highlights the products a customer
could buy and ideally takes them to the product page
on the website.

20. displayblock.com
Email
Website
Very concise navigation focusing
on the content of the email
Website allows for a massive
navigation design

21. displayblock.com
An example of a modern email
All text makes
use of brand
web font
Modern
responsive
email design
Hi-res images
Email nav that
matches email
content. Not
website replica
Code buttons
use. No image
buttons
Coded banners
for accessibility
no images used
Content is
personalised to
the recipient
Modern grid
layout best for
desktop and
mobile
Mobile design has
identical content as
desktop

22. displayblock.com
Email Capabilities
At display block we can support anything that is
currently possible in the medium of email. We will also
always endeavour to advise on the best email solution
based on our experience and industry knowledge.
A brief list of technologies and practices used in email
marketing.
• Responsive coding style
• Animated gifs
• Hi-res images
• Dynamic content
• Conditional content
• Personalised content
• Web fonts
• Wide range of email client support
• Accessibility
• Image and file size optimisation
• A / B Split testing
• Multi sends
• Automated emails
• Live reporting
• API integration
• Conversion tracking

23. displayblock.com
Thank you