Email building best practice - a guide for designers

1
Table of Contents
Why is email display an issue in email marketing? ................................................................................ 2
Expert Email Design............................................................................................................................. 3
Desktop PC and Apple Mac email applications...................................................................................... 4
Web and mobile device email readers.................................................................................................. 5
Creating your HTML email structure..................................................................................................... 6
What to include in your email <head> tag ......................................................................................... 7
Key <meta> tags ............................................................................................................................ 7
Essential CSS <style> declarations .................................................................................................. 8
CSS Media queries for responsive emails....................................................................................... 9
Using HTML tables to lay out your email ......................................................................................... 10
Stretching container table ........................................................................................................... 10
Using tables with multiple cells in your layout.............................................................................. 11
Setting horizontal and vertical spacing between elements............................................................ 12
Using background colour fills in your email layout ....................................................................... 13
Creating borders around table cells............................................................................................. 14
Adding graphic content to your email ............................................................................................. 15
Inserting images into your email layout ....................................................................................... 15
Using background images in your email layout ............................................................................ 16
Styling and other features.................................................................................................................. 17
Formatting your email’s content ..................................................................................................... 18
Setting styles for HTML ‘real text’ content .................................................................................... 18
Setting font-family for HTML text content ..................................................................................... 19
Setting font-size for HTML text content......................................................................................... 20
Setting color for HTML text content.............................................................................................. 21
Setting line-height for HTML text content...................................................................................... 22
Setting text link styling ................................................................................................................ 23
Extra reading..................................................................................................................................... 24
Find out more about NewZapp...................................................................................................... 24

2
Why is email display an issue in email marketing?
Businesses and consumers use a wide variety of devices and email programs and apps (also called
email clients or readers) including:
 Microsoft Outlook for Windows desktop
 Lotus Notes
 Google Gmail
 Virgin Media Webmail (uses older Gmail engine)
 Outlook.com (formerly Windows Live Hotmail)
 AOL Mail
 Orange Webmail (now part of EE)
 Yahoo! Mail
 Opera Mail
 Apple Mail for Mac OS X
 Mozilla Thunderbird
 Apple Mail for iOS
 Mail for Android
 Microsoft Outlook for Windows Phone
... and more.
Email marketing is delivered as HTML and CSS code, and
each email program or app interprets this code slightly
differently. As a designer, the challenge is to create email
campaigns that are displayed as consistently as possible
across the majority of email readers.
It is crucial that your emails are tested by sending to a wide range of different email readers. The
easiest way to check layout issues is to use an online testing service such as Litmus or Email on Acid,
which present screenshots within a variety of email readers.
You should also send test campaigns to at least one or two live desktop or webmail email readers (e.g.
Outlook 2016, Gmail, Apple Mail) to be able to test things like web and sharing links, and to use browser
code inspectors to help troubleshoot issues.
For responsive emails it is also recommended that you send test campaigns to mobile devices running
Apple iOS 7+, Android 4.2+ and Windows Phone 7+ to give you a true picture of how your email will
actually behave in smaller viewports.

3
Expert Email Design
There are quite a few pitfalls to be aware of when creating and sending HTML email campaigns. The
NewZapp Design Team’s many years of experience helps ensure the best results across all major email
readers when designing and building editable (re-usable) email templates for your NewZapp account.
In this guide we take a look at the best practices for avoiding or working around some of the most
common display issues encountered when creating an HTML email for sending via an Email Marketing
System (ESP). NewZapp, like most ESPs, gives you the ability to upload and test send your email to all
your proofing email addresses.
A good level of HTML and CSS knowledge is assumed, including things like Media Queries, inline CSS
styles and using HTML tables for page layout.
We also offer supporting guides for Email Marketers editing their email campaigns, and Designers
and Coders looking to create or edit their own HTML emails, particularly for use in the NewZapp
email marketing system.
Download a PDF copy of:
Common email display issues -
a guide for email marketers
Plus download the PDF
containing the complete
A-Z of everything we
know!
The Designer’s Guide to
Building Templates

4
Desktop PC and Apple Mac email applications
Most PCs and Apple Macs come with a default email program pre-installed, which can then be
configured to collect and display emails for any email address from any mail server.
There are also third-party desktop applications available including:
Microsoft Outlook 2007,
2010, 2013 & 2016
Comes as a standard installation with Microsoft Windows as
part of the Microsoft Office suite of tools. These latest
versions of Outlook are considered to be some of the more
challenging readers to create HTML emails for.
Apple Mail for Mac
Comes as a standard installation with the Apple Mac OS X
and Apple iOS. The latest version on Apple OS X is Apple Mail
8 and is one of the least troublesome email programs.
Lotus Notes 8.5
Widely used by medium-to-large sized businesses, Lotus
Notes is just one part of IBM’s database-driven Domino suite.
It uses its own limited HTML display engine for emails, but
version 8.5 is less problematic than earlier incarnations.
Mozilla Thunderbird
This free email reader counterpart to the Mozilla Firefox
browser is available across a range of operating systems. No
significant email display issues are reported at this time.
Opera Mail
The latest version of the Opera web browser has the
separate Opera Mail desktop application as its counterpart
(previously it was an integral part of the Opera browser).
Email display is generally fine, albeit with a few small foibles.

5
Web and mobile device email readers
There are a number of free or subscription webmail and online email
readers available to use directly in your browser, each with its own
way of interpreting HTML emails to consider.
With mobile devices as with desktop computers, most come with
their own email applications pre-installed and specific to each
Operating System. Again, there is also the option of installing third-
party mail applications, usually via app stores.
Very often an HTML email will need to be designed to behave
‘responsively’ on mobile devices, at the very least by stacking
elements for easier reading on narrower screens.
The most popular free web readers include:
 Google Gmail
 Virgin Media Webmail (uses an older Gmail engine)
 Outlook.com (formerly Windows Live Hotmail)
 AOL Mail
 Yahoo Mail
 Orange Webmail (now part of EE)
Examples of mobile email applications:
 Apple Mail for iOS
 Mail for Android
 Outlook for Windows Phone
On the following pages we will outline some of the more important best practice techniques for
building HTML emails that will give the best results in all major email readers >>

6
Creating your HTML email structure
When building HTML emails it is good practice to start with building
and testing the complete template structure before going on to style
and add links etc to the actual email content.
This means:
 setting the correct content in the <head> of the email;
 using a 100% width HTML container table in the <body> to set
the background fill and email alignment in the reader
window;
 using nested tables and multiple table cells to define image and text content layout and spacing;
 inserting unformatted text and image content;
 if creating a responsive email, adding CSS Media Queries for the desired viewport widths
(breakpoints) then adding and testing the required classes on layout elements.
On the following pages we will cover best practice when using these key structural elements to start
creating your HTML email >>

7
What to include in your email <head> tag
Key <meta> tags
What to do …
 The following <meta> tag should be included as a matter of course:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 If you are designing a responsive email, you should also include these:
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Why?
 If the Character Encoding (or Character Set)
for your email is not defined there is the risk
that some email readers may not display
special text characters properly.
 The viewport attribute allows you to take
control of mobile device viewports:
o initial-scale=1.0 sets the initial zoom level
to 100% when the email is first loaded.
o width=device-width sets the width of the email to follow the screen-width of the device. It
should be noted that for Windows Phone devices a separate CSS declaration is used to do
the same thing.
 Setting http-equiv=”X-UA-Compatible” content=”IE=edge” targets Windows Phone devices
specifically to prevent them rendering in ‘Quirks Mode’ and interpreting your email width
incorrectly.
Some email
readers default
character
encoding may
not render
special
characters
correctly

8
Essential CSS <style> declarations
What to do …
 The following CSS styles should be included between the <head> and </head> tags of your email
as a matter of course:
<style type="text/css">
.ReadMsgBody {width: 100%}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass
div {line-height: 100%}
.ExternalClass {width: 100%}
td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active
{color:#000001;text-decoration:underline}
img, a img {border:none !important}
table, th, td, tr {color:inherit;font-family:inherit;font-size:inherit}
</style>
Why?
 For those email readers that do support CSS
declarations in the <head> of your email, these
styles ensure that they do not impose their own
CSS on your layout.
 .ReadMsgBody and the .ExternalClass selectors
are specifically for Outlook.com webmail to
stop the background fill container collapsing.
 The td a and div a selectors stop email readers imposing their own link colours on your content -
use the link colour value used in the email <body> tag here.
 The img, a img selectors ensure that images display consistently with no borders (e.g. if they have
links set on them).
 The table, th, td, tr selectors ensure that nested tables pick up the text styles set on the next
parent element that has an inline style declaration rather than using the browser defaults.
If no default link
colour is set,
some email
readers will
impose their own
default value

9
CSS Media queries for responsive emails
What to do …
 CSS and Media Queries should be used in the <style> tag to
alter the email layout for narrower mobile viewport widths.
 You must also include the @-ms-viewport class as shown.
<style type="text/css">
/* desktop reader CSS here */
@media screen and (max-device-width: 645px), screen and (max-
width: 645px) {
@-ms-viewport {width:device-width !important}
/* mobile CSS here */
}
</style>
 Use the CSS ‘attribute selector’ method along with ‘~=’ and the ‘!important’ declaration e.g.
Why?
 Support for CSS and Media Queries is almost universal for mobile devices.
 The @-ms-viewport CSS selector targets Windows Phone 8 devices to ensure emails fit the width
of their screens correctly.
 The CSS ‘attribute selector’ method stops email readers that recognise CSS but ignore Media
Query rules (e.g. Yahoo! webmail) implementing any responsive styles
 Using ‘~=’ in the attribute selector ensures that you can use multiple classes in HTML elements.
 The !important declaration prevents email readers from imposing their own styles
 Minimise formatting in the CSS to keep the <style> declaration as short as possible - email display
on Windows Phone 7 seems to have an issue otherwise.
table[class~='responsive-table'] {width:100% !important}

10
Using HTML tables to lay out your email
Stretching container table
What to do …
 Use a single-cell 100% width table as the first element within your email’s <body> tag.
 Set the colour you want as a background fill (including white) and the alignment on the <td> .
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
<tr>
<td width="100%" align="center" valign="top" bgcolor="#FFFFFF"><!—// email content here //--></td>
</tr>
</table>
Why?
 Some email readers set their own default viewport background fill colour, so a 100% width
container table ensures the correct background colour as well as stretching to fill all readers’
preview panes including on mobile devices.
 Setting align and valign on the <td> tag is more reliable than adding them to the <table> tag or
using <center> tags.
 The style=”table-layout:fixed;” declaration is used to fix a bug in Yahoo! Mail which forced emails
to sit to the left of the preview pane.
Use a 100% width
container table to
set background
colour fill and
alignment for
inner content

11
Using tables with multiple cells in your layout
What to do …
 Use tables with single or multiple cells to define your email’s
layout.
 You can nest tables within other tables, but avoid nesting
more than 9 tables deep.
 Never merge cells (i.e. rowspan on <tr> or colspan on <td>).
 cellpadding, cellspacing and border= on all tables should be set to “0”.
 Always set the alignment for any <td> that has content (e.g. <td align=”left” valign=”top” >).
Why?
 Table layouts give the most stable results across all readers.
 Too many nested tables can give unpredictable results in some email readers.
 HTML attributes like rowspan, colspan, cellpadding, cellspacing and border give mixed results and
should be avoided.
 Each email reader’s default setting for cell
alignment may not be what you expect (e.g. for
Outlook.com the default horizontal alignment is
align=”center”) so it’s best to set them in the <td>
to avoid any surprises.
 For responsive emails all these attributes are
easily altered using CSS and Media Queries to
give a better layout on narrower viewports.
Default
alignment varies
from reader to
reader

12
Setting horizontal and vertical spacing between elements
What to do …
 For horizontal spacing, use narrower tables nested inside
wider ones or table columns with set widths.
 For narrower columns you should insert an invisible spacer
image of the correct width to prop it open.
 For vertical spacing, use a fixed-height <td> containing a
  character entity and CSS style declaration like so:
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height=”8” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size:8px; line-
height:8px;"> </td>
</tr>
</table>
Why?
 You should avoid the use of CSS padding and margins as they give inconsistent results.
 An invisible spacer image is useful to prevent the space being forced to collapse.
 Fixed-height table cells with an accompanying CSS style declaration was developed as a reliable
method for vertical spacing in Outlook 2013+ and works with all major email readers.
 Note that It is important to use either a   entity or an image to prop the cell open vertically.
 The –webkit-text-size-adjust and –ms-text-size-adjust CSS properties are crucial for stopping email
readers resizing cell content and therefore your spacer row height.
 For responsive emails, if you need to create a CSS declaration within a Media Query to alter the
height of a row be sure that you update all of the CSS properties i.e. font-size and line-height too.

13
Using background colour fills in your email layout
What to do …
 Set background colour fills only in <td>s.
 Use the HTML bgcolor attribute in the first instance, not CSS.
 When nesting tables with multiple cells inside <td>s you need to place the background colour fill
on the parent container <td> rather than on the nested table’s own individual cells.
<tr>
<td width="300" align=”center” valign=”top” bgcolor=”#CCCCCC”> </td>
</tr>
</table>
Why?
 Background colour fills in <td>s have better support than setting them in the <table>, <tr> or
even <body> tags.
 The HTML attribute bgcolor also has wider support than the CSS background-color property.
 Some email readers (e.g. Mail for Android) have their own default background colour fill for their
viewport. It is therefore recommended that for
consistent results in all email readers you
should set a colour fill on the <td> of the 100%
width container table.
 Some email readers (like that used in Apple iOS)
will allow the background fill of a cell to show
through as borders on any tables nested inside
- especially noticeable on multiple-cell tables.
Be aware that
background
colour fills can
bleed through
foreground
colour fills in iOS

14
Creating borders around table cells
What to do …
 Create consistent borders around table cells by
using table nesting and empty row spacing:
o set the border colour as a fill in a <td>;
o place a 1 column 3 row table inside that
allowing space each side the thickness of
the required border;
o the top and bottom cell row heights of that table should be the same as the required
border thickness - use the vertical spacer method;
o finally, set the middle <td> fill colour.
 Alternatively, it is possible to use an inline CSS style declaration on the <td>:
<tr>
<td width="296" align=”center” valign=”top” style="border:5px solid #FF4000;"> </td></tr>
</table>
Why?
 Support for the HTML border attribute is patchy at best amongst most common emails readers.
 Testing has found the nested table method described above to give the most consistent results.
 Inline CSS borders work best on single-cell tables, with the same colour, thickness and style all
round.
 Note that this method is known to cause alignment issues in Outlook desktop applications.
 Other email readers may show different border colours or even revert it black.
Borders can be
created purely
using nested
tables

15
Adding graphic content to your email
Inserting images into your email layout
What to do …
 Best formats for email images are .jpg, .gif and .png.
 Images should be inserted into their own table cells with style=”display:block” in the <img> tag.
 All images should be used at their original size with correct HTML width and height attributes.
 For images 19px tall or less, the parent <td> needs to be treated as a vertical spacer:
<td height=”15” align=”center” valign=”middle” style=” –webkit-text-size-adjust:none; -ms-text-size-
adjust:none; font-size:15px; line-height:15px; display:block”>
<img src=”some-image.png” width=”200” height=”15” hspace=”0” vspace=”0” border=”0”
style=”display:block” />
</td>
Why?
 Using style=”display:block” in <img> tags stop email readers inserting a white gap under images.
 However, images in the same <td> will move to their own line; place each image in its own <td>.
Using CSS
display:block
prevents sliced
images from
breaking apart
 Many email readers will show images at their original dimensions regardless of the width and
height set - ensure they are the right size for your email to start with.
 With images turned off, setting width and height stops the placeholders breaking the email.
 A gap can appear above or below shorter images unless the <td> uses the vertical spacer fix.

16
Adding graphic content to your email
Using background images in your email layout
What to do …
 Set background images in the <td> using HTML background attribute – note that they will tile in
some web and desktop email readers.
 A background colour fill should be set as an alternative.
 In responsive emails, a fixed image can be hidden and an alternative background image shown –
use both the HTML background attribute and CSS background-image property as shown:
<td height=”15” align=”center” valign=”middle” bgcolor=”#669900” background="mobile-bg.png"
style="background-image:url('mobile-bg.png');"> </td>
Why?
 You cannot reliably set how the image will tile or be positioned within a cell using CSS.
 Email readers such as Outlook desktop application or Lotus Notes will generally ignore
background images in a <td> so it is essential that a backup colour fill is set.
Ensure you have a
fill colour set in
the <td> as a
fallback if
background
images are not
supported
 For these applications, a single background image can be set in the email’s <body> tag.
 If you use background images in both the 100% container table <td> and the <body> tag be
aware that some email readers that will show both images.
 For responsive emails, placing the background image in both background and background-image
ensures it appears in all major email readers.

17
Styling and other features
Once the email’s layout structure has been created, fixed content
added, the next stage is to go back through and set the following:
 text and image links where required;
 text styling – font, colour, size, weight etc;
 alt and title text where required;
 for editable emails, this is the point where you need to define
editable areas using custom tags and other elements as
specified by your email service provider.
On the following pages we will cover best practice when adding these crucial properties to elements
in your HTML email layout >>

18
Formatting your email’s content
Setting styles for HTML ‘real text’ content
What to do …
 Set the default text styling for your email in the <body> tag using an inline CSS declaration.
 CSS formatting should be included in the <td> and any other HTML element enclosing content,
such as <span>, <p>, <a>, <div> and <font> tags.
<body … style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"> …
<td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-
family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300; font-weight:normal; text-decoration:none;
line-height:18px;">Lorem ipsum <span style=”color:#FFCC00; font-weight:bold; text-
decoration:underline;”>sit amet dolore</span> quora.</td>
Why?
 Default text styling set in the <body> tag
ensures that any content that does not have
any formatting of its own does not revert to
browser defaults.
 Setting text formatting using CSS in the <head>
of your email doesn’t work in all email readers -
inline CSS style declarations on individual HTML
elements is more reliable.
 Avoid using standard HTML attributes in <font> tags as this is not always recognised.
 Inline CSS set in elements immediately around content takes precedence over any other styling.
 Avoid using ‘shorthand’ CSS notation for text styling – the full ‘longhand’ style declaration with
each attribute defined separately and in full is more reliable.
 In responsive emails, you can alter text formatting attributes by adding alternative styles to a
Media Query then setting classes on the relevant <td>.
Email reader
defaults will take
over if inline
styles are not
included on the
<td> and other
elements
surrounding
HTML text

19
Setting font-family for HTML text content
What to do …
 Limit your selection of primary and fall-back fonts in the font-family property to web-safe
examples for consistent results across most email readers e.g.
Why?
 Web-safe fonts are supported by the majority of desktop reader applications and online webmail
programs.
 However, it should be noted that most mobile devices have a very limited range of fonts
installed, so your styling may fall-back to each device’s own serif or sans-serif font.
Example of font-families
in Outlook 2016
How they display in
Apple Mail iOS 8
How they display in
Android 4.2 Mail
How they display in
Windows Phone 8
style="font-family:Arial, Helvetica, sans-serif; …”
style=”font-family:’Times New Roman’, Georgia, sans-serif; …”

20
Setting font-size for HTML text content
What to do …
 Use only pixel (px) units rather than pt, em or % values.
 Avoid using sizes below 10px, and limit the use of larger font sizes e.g. 32px or more - consider
using a graphic for these instead.
<td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:Arial,
Helvetica, sans-serif; font-size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet dolore
quora.</td>
Why?
 Font-sizes smaller than 10px are not only
difficult to read but may be flagged up by spam
filters for this reason.
 Conversely, over-large font-sizes may be
flagged by spam filters for ‘shouting’.
 Email readers such as the Outlook desktop
application will increase the letter-spacing on
11px text, potentially breaking your email layout by overflowing onto more lines.
 font-size is easily adjusted for responsive emails using CSS and Media Queries.
Email readers
such as Outlook
can add extra
white-space in
11px text with
unexpected
results

21
Setting color for HTML text content
What to do …
 Use either Hex (e.g. #FFCC00) or RGB (e.g. rgb(192,45,67)) values in the color CSS property.
 Use longhand CSS notation for Hex values, never the shortened version.
 Avoid using bright red colours (e.g. #FF0000, rgb(255,0,0)).
 Ensure that your text colour has sufficient contrast against the background colour for
accessibility – aim for at least the WCAG ‘AA’ standard.
Helvetica, sans-serif; font-size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet dolore
quora.</td>
Why?
 Digital rather than print colour definitions
should be used for digital communications.
 Shorthand Hex values are not supported in the
majority of email readers.
 The use of a bright red colour on text can be
flagged up on spam filters.
 Similarly, text colours that are the same as or
very close to the background fill will also flag up on spam filters.
 It is recommended that an online contrast checker like WebAIM is used.
 color is easily adjusted for responsive emails using CSS and Media Queries.
Ensure your text
color provides
sufficient
contrast against
the background

22
Setting line-height for HTML text content
What to do …
 Use the line-height property in the inline CSS of elements
containing text or image content.
 Use only pixel (px) units rather than pt, em or % values.
<td align=”left” valign=”top” style=" -webkit-text-size-adjust:none; -ms-
text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font-
size:14px; color:#993300; line-height:30px;">Lorem ipsum sit amet
dolore quora.</td>
 For a <td> containing an image under 19px tall, use line-height along with height and font-size to
ensure the cell remains the correct height – similar to the vertical spacer fix.
Why?
 Using the line-height property with pixel (px) values gives the most consistent results across all
the major email readers.
 line-height is easily adjusted for responsive emails using CSS and Media Queries – especially
useful for adjusting vertical spacing when altered along with height and font-size.

23
Setting text link styling
What to do …
 Set the default text link colour for your email in both the HTML <body> tag and in a style
declaration in the <head> – see Essential CSS <style> declarations.
 For fixed text links you will need to copy the inline style declaration from the <td> or other
surrounding element into the <a> tag.
 Add the text-decoration property to control whether the link is underlined or not and ensure any
underline is the correct colour.
 Do not use black (#000000 or rgb(0,0,0)) for your email link colour.
Why?
 Setting your email’s default text link colour in
both the <body> and a style declaration in the
<head> as well as repeating inline styles in all
<a> tags stops email readers applying their own
default link styling.
 You can also use different formatting for
different links, e.g. you can choose certain links
to be underlined and others not, use different
colours and font-weights etc.
 Some email readers (e.g. Gmail) will turn a pure black email link into their own default link
colour. However, a small difference in the colour value (e.g. #000001 or rgb(0,0,1)) is enough fool
the reader into ignoring it.
Helvetica, sans-serif; font-size:14px; color:#993300;">Lorem ipsum sit <a style=" -webkit-text-size-
adjust:none; -ms-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#993300;
text-decoration:underline;">amet dolore quora</a>.</td>
Funny things can
happen to your
text links if you
don’t set an
inline CSS style
on the <a> tag

24
Extra reading
If you would like to know more about designing and coding entire email campaigns from scratch, or
about editable templates for use within a NewZapp account, contact us and ask for copies of our other
related publications:
Download a PDF copy of:
Common email display issues -
a guide for email marketers
Plus download the PDF
containing the complete
A-Z of everything we
know!
The Designer’s Guide to
Building Templates
Find out more about NewZapp
To find out more
about NewZapp
Email Marketing
you can:
Visit www.newzapp.com
Call us on 0845 612 5544
Email sales@newzapp.com
Contact us online

Email building best practice - a guide for designers

Recommended

More Related Content

What's hot (20)

Similar to Email building best practice - a guide for designers (20)

More from VRAMP Employee Engagement (6)

Recently uploaded (20)

Email building best practice - a guide for designers