Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

HELP! Designing Emails!

Featured Replies

HELP!

I have a job interview tomorrow for a role as an Email Designer. But I have no idea how to go about doing this.

I know how to use HTML and CSS, but have never used these for email design.

 

Is it just as simple as typing the HTML code into the email itself and clicking send? Can you link to an external CSS style sheet or does it have to all be inline / in the header? Can you have a header?

 

Please, any help or advice would be GREATLY appreciated.

Any links to tutorials or advice on programmes that help to do this would also be appreciated.

 

Kind Regards

Rich

You haven't got much time before tomorrow to sort through the detail at emailology, so just remember some basic advice:-

 

Use tables preferably with old-fashioned styles like bgcolor="#eeeeee" instead of CSS inline styling like style="background: #eeeeee;" if it's possible, otherwise use CSS inline styles, as some email systems seem to process the old table styles better than inline CSS.

 

Don't use an external stylesheet or head section style tags. Only use inline styles.

 

Use absolute urls like http://www.your-domain.com/images/photo.jpg instead of relative urls like images/photo.jpg for images and include width="600" height="193" alt="Image description".

 

Don't put styles in the table tag unless they relate only to the table envelope.

 

Repeat styles for every <td> tag like <td style="font-family: Times, serif; font-size: 16px; color: #ff4500; font-weight: bold; border: none;">......</td>

 

Don't use short-code styles like style="border: 2px solid #ddd333;" but show each separately like border-top: 2px solid #ddd333; border-right: 2px solid #ddd333;" etc., etc.

 

If you want to show a background image, note that Outlook 2007/2010 does not show background images although Outlook 2002 does. Other email programs have difficulties with background images unless they are coded in a certain way. Hotmail will not show a background image if it's coded for a whole table which has more than one <td>...</td> tag, so the method to use is to set up an outer table which only has one row and one <td>...</td> tag with <td style="background-repeat: no-repeat; background-color: #ffffff;" background="http://www.your-domain.com/images/photo.jpg" width="600" height="488" valign="top"> for the <td> tag and put your main content table which has several <tr> and <td>...</td> tags inside. The width and height are whatever you want for the email, preferably the width of the background image and the height will increase automatically if it's needed for more content in the nested table, and the background-repeat: no-repeat inline style should stop the image repeating in email systems that process inline styles.

Edited by Wickham

  • Author

Thanks for that guys! Especially Wickham!

What sorts of programmes are there out there to construct these email forms in? Or do I just build it as a HTML page (in Dreamweaver for example) and copy and paste the code straight into the email I am sending out?

Do I need to tell it anything in particular in the HEAD tags? or the HTML tag?

Kind Regards

Rich

Edited by AblazeRich

Check that your ISP will allow you to send HTML emails. Sometimes they only allow rich text which is very limited.

 

If you can send HTML emails. just code a page normally with html head and body tags using the simple table layout described above. No javascript.

See http://www.dwfaq.com/tutorials/miscellaneous/htmlemail.asp

 

My ISP won't process HTML emails so I have to code them in PHP and send via my own website hosting service.

 

When using PHP you have to add a MIME type header as part of the PHP code:-

$headers = 'MIME-Version: 1.0' . "\r\n";

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.