Novell Home

AppNote: F11 - Your Key to Email that Stands Out

Novell Cool Solutions: AppNote
By Sarah Woods

Digg This - Slashdot This

Posted: 17 Jun 2004
 

Sarah Woods
Webmaster
Hong Kong International School

Generating graphics-rich content for GroupWise 6.5 email has never been easier. Taking advantage of the power of HTML and the convenience of the F11 key, I've implemented newsletters, fundraising mail-outs, and signature cards that raise the standard for all our school mailings.

  1. Creating Graphical email that look the same to everyone
  2. Adding Images without adding megabytes
  3. Using Style Sheets to Idiot-Proof
  4. A Sample e-Card
  5. A Sample HTML Signature
  6. Bringing it all Together

Creating Graphical email that look the same to everyone

Using HTML in email isn't news. In fact, you can use the formatting buttons in GW 6.5 to fancy up your text, add a background image, insert images, align your text, add bullets or numbering, add lines and of course mark up your text into hyperlinks. (If you haven't noticed the buttons, try selecting View > HTML or going to Tools > Options > Environment > Views and selecting HTML for both outgoing and incoming messages.)

That sounds great, so why do anything else?

There's a critical flaw: width.

Width is a problem because no matter how much you align and organize your message, you have no guarantee that your reader will have the same configuration. HTML standardizes the way many aspects look, but if your audience has their email set to full screen and you don't, no amount of fiddling on your part can change that.

In order to create email that's full of graphics and yet looks the same to your recipients, you need tables. To make tables, you need HTML. So all you have to do is create your email in HTML and pop it into GroupWise.

To insert HTML into an email message (it has to be new, existing messages will override your style sheet), simply select New Mail (make sure you've selected View > HTML), click in the body of your message, and press F11. Browse to your HTML file and click ok. The HTML file will now become your email.

You can edit the text, adding formatting, but make sure that your core template is complete because once you've put it into the email, you can't change the tables and other underlying code without resaving the email as HTML (right click in the message, select View Source > Save As > filename.htm > OK).

Adding Images without adding megabytes

Message size, in this day and age, has become critical. It used to be an issue because of low connection speeds and limited bandwidth, but as the superhighway adds lanes, congestion isn't as much a pressing issue. More critical are in-box limits (companies like Hotmail and Yahoo! limit boxes to a few meg) and network level email size restrictions due to worms and viruses. So if you want to create a graphically-rich email, with fancy rounded edges on your boxes or cute photos of your kids, chances are you'll get more bounced messages than enthusiastic replies.

Instead of embedding your images, link them out to your web server. This is a bit tricky in GroupWise, since once you import your graphics, GroupWise collects the graphics and encloses them in your email. In theory this would be okay, but the net result is you end up sending the pictures anyway.

The best work around is to use the background tag. GroupWise doesn't re-write it, so your graphics remain as links to your web server.

Of course the down side is that if your recipients aren't online when they're reading the message, the images will show up as broken links. We've found a link at the top of the email to an online copy is useful for these circumstances as well as any other recipients whose email applications don't like HTML mail.

The specifics:

The best way to use background images is to either use them in a table (see below) or to use a style sheet (see the next section).

If you use an image in a table, the code looks like this:

<table border="0" cellpadding="0" cellspacing="0" width="100" 
height="100">
<tr>
<td background="http://dragonnet.hkis.edu.hk/swoods/sm_transp_logo2.jpg">
</td>
</tr>
</table>

Which will look like this in your email:

Using Style Sheets to Idiot-Proof

In order to pre-define things like fonts and methods of behaviour, one easy option is to use a style sheet. We use http://www.w3.org/TR/REC-CSS1-961217 as a resource to find those elements used the most commonly by all browsers. These are just a few examples of how we've found style sheets can make a big difference, there are certainly more!

Since you will be emailing out this particular file, we recommend that you embed the style sheet, but at the top of your HTML file. We place the "<style></style>" tags in the "<head>" tag. Otherwise if someone opens the file with a text-only browser, all they'll see is your style sheet information, which is gobbledy-gook to most people.

We've found a few useful ways to correct some of GroupWise's defaults and to make background images more effective:

1. The P tag

P stands for paragraph and most html browsers automatically use it whenever you use a line break (ie press the enter key). That would be fine except when working in HTML, that means you often get huge spaces between paragraphs when you actually just want a line break. You can't get into the code to use the <br> tag, but you can use a style sheet to define the margin element thus taking away the default spacing for the P tag:

 p  {

margin-top: 0;

margin-bottom: 0;

}

If you're using table tags and want to only specify the P tags within the table, you can write it like this:

TD p {

margin-top: 0;

margin-bottom: 0;

}

2. Creating Consistent Fonts

For elements that are true for all your text, you can group them together and make one style statement:

p,h1 {
margin:0px 0px 10px 10px;
font-family:Verdana;
text-align: left;
}

For elements that are unique, you can then do additional statements to specify their elements:

a {
font-color: navy;
}

p {
font-size:12px;
}

h1 {
font-size:14px;
color: navy;
padding-top:10px;
}

And for styles within your own tags:

#box h1 {
text-align: center;
color: pink;

face: verdana;
}

Thus the H1 tag in the general document will be look like

this

and the H1 tag within your div id=box tag will look like

this

 

The various tags will inherit their elements from preceding style statements, so you may find there's a certain amount of trial and error in getting your fonts exactly as you want them.

3. Making boxes

In order to create specific borders, we've found that using tables can become quite cumbersome - what if you only want borders on 3 sides? Different colours? While we still use a table to contain the whole email, we've found that creating our own tags and giving them style in the style sheet allows us even greater control:

#box {
width:170px;
background:grey;
border-top:1px solid black;
border-left:1px solid black;
border-right:2px solid black;
border-bottom:2px solid black;
text-align:center;
}

#box h1 {
text-align: center;
color: pink;

face: verdana;
}

That will give us a box that looks like this, with these fonts:

header

Sample text


We can specify all sorts of characteristics through style sheets, including all the borders, the text alignment, the background colour, the background image and even the size of the box itself.

#boxwithimage {
width:100px;
height:100px;
background:gray;
border-top:1px solid black;
border-left:1px solid black;
border-right:2px solid black;
border-bottom:2px solid black;
text-align:center;
background: URL(http://dragonnet.hkis.edu.hk/swoods/sm_transp_logo2.jpg;
background-repeat:norepeat;
}



Another advantage boxes is that it locks our users into certain parameters and yet gives them some flexibility- if you use tables, they can drag borders and cause all sorts of layout problems.

  • To edit text within the box, all they have to do is click in it (when you use tables, sometimes a user will accidentally delete a td tag and ruin the layout).
  • To move the box, they can click on it and place it somewhere else on the page.

A Sample e-Card

To pull all these ideas together, we'll make a simple HTML postcard.

We'll make a table as a shell, throw in an image, add some boxes to hold text, and give it a bit of colour:

A postcard from us....

1 June, 2004

Dear Letter Recipients,


We're excited to announce a new format for our email to you!


We feel that this type of design gives us a way to highlight ideas we couldn't using only plain text, and now of course we can include images!


We look forward to hearing your feedback on this new look,



Your name

Your title

 

Address: 1 Main Street, City, Country | Phone: (123) 234-5678 | Email: you@company.com

The Code:

<html>
<head>
<style>
p{
margin-top:0;
margin-bottom:10px;
}
#boxwithimage {
width:104px;
height:104px;
background:gray;
border-top:1px solid black;
border-left:1px solid black;
border-right:2px solid black;
border-bottom:2px solid black;
text-align:center;
background: URL(http://dragonnet.hkis.edu.hk/swoods/sm_transp_logo2.jpg);
background-repeat: norepeat;
}

#rightbox {
width:380;
border:0px;
border-top:0px;
border-right:0px;
border-left:2px dotted #003399;
border-bottom:0px solid black;
}
#rightbox p {
margin: 5px;
color:#003399;
font-family:Verdana;
font-size: 12px
}
</style>

</head>
<body>
<table align="center" width="550" border="1" bordercolor="#003399">
<tr bordercolor="white">
<td colspan=2 bgcolor="#003399" align="center">
<font color="#FFFFFF"><b>A postcard from us....</b></font>
</td>
</tr>
<tr bordercolor="white">
<td width="130" align="center">
<div id=boxwithimage>
</div>
</td><td><div id="rightbox">
<div align="right"><p>1 June, 2004</p></div>
<p>Dear Letter Recipients,</p><br>
<p>We're excited to announce a new format for our email to you!</p>
<br>
<p>We feel that this type of design gives us a way to highlight ideas we couldn't
using only plain text, and now of course we can include images!</p><br>
<p>We look forward to hearing your feedback on this new look,</p>
<br><br>
<p>Your name</p>
<p>Your title</p>
<p>&nbsp;</p>
</div></td></tr>
<tr>
<td colspan=2 bgcolor="#003399" bordercolor="white" align="center"><font color="white" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>Address:</b>
1 Main Street, City, Country <b>|</b> <b>Phone:</b> (123) 234-5678 <b>|</b>
<b>Email:</b> you@company.com</font></td>
</tr>
</table></body></html>

A Sample HTML Signature

You can also use this technique to add panache to your email in the form of an HTML signature. Groupwise does not have the facility to add HTML signatures automatically, so you'll have to start a new email, press F-11 and attach one. I keep a simple one on my desktop and when I'm sending email outside the company and I want to fancy it up a little, I attach it:

Jane Smith | Webmaster
Your Company Name Inc.
email:. webmaster@hkis.edu.hk
mobile:. 852.1234.5678
phone:. 852.1234.5678
fax:. 852.1234.5678

Please help support continued excellence at Company Name.

Because I've set the table at 100%, no matter what the width of the email, it will automatically fill in across the bottom. I've also added an image, just to spice things up a bit!

The Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table cellspacing="0" cellpadding="0" width="100%"><tr><td colspan="2" bgcolor="black"><font color="white" style="Arial" size="2">
<b>Jane Smith | Webmaster </b></font><br></td></tr><tr>
<td colspan="2">
<font style="Arial" size="3"><b>Your Company Name Inc.</b><br>
<b>email:.</b> <a href="mailto:webmaster@hkis.edu.hk">webmaster@hkis.edu.hk</a> <br>
<b>mobile:.</b> 852.1234.5678<br>
<b>phone:.</b> 852.1234.5678<br>
<b>fax:.</b> 852.1234.5678</font><br>
<tr><td bgcolor="black" align="right"><font color="white" style="Arial" size="1"> Please help support continued excellence at Company Name.</font><br></td> <td width="50" height="50" background="http://dragonnet.hkis.edu.hk/CRD/email/OGbutton.jpg" style="background-repeat: norepeat"></td></tr>
</table>
</body>
</html>

Bringing it all Together

We've found that between tables and style sheets, the F11 key has opened up our options, exponentially. A web designer with a basic level of skill can put together a template that can them be used by complete novices with very little training.

Here are some examples of how we're using the F11 key to bring color and pizzaz to our communications:

  • Formatted newsletters to parents, with images, separate columns, and text anchors to different sections
  • e-Cards to support fundraising effort
  • e-cards to encourage people to attend school functions
  • Formatted letters from the Head of School and Board of Managers to the school community

The response from our community has been overwhelming. Parents feel the newsletters are easier to read and can better distinguish critical information from general updates. Our Annual Fund has saved thousands of dollars on paper marketing efforts. Our school Administration team feels they're better able to communicate plans by having a more graphical interface. Improved communications and cost savings are always important issues in any organization, and for us, F11 proved to be the key that unlocked the door.

 

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]

Novell Cool Solutions (corporate web communities) are produced by WebWise Solutions. www.webwiseone.com

© 2014 Novell