I have a client that I am doing some SEO work for. I had a great teacher when it came to doing SEO work on the actual website. After applying these great tools I took his SEO score from 84% to 99% which is great but that was not enough so we talk it over and decided that we need to do some more things for his site.
His site is a sport point spread picking site that people obviously come to in order to get the picks for the up and coming games. I had his site on page 6 when googling “free NFL picks”. Not too bad but there is a problem, the search was done right before the NFL season started and this changed big time when the season started. What we decided to do was to take the 2000 names he has and set up an email to promote his site and send it out to these people to draw more hits to his site.
This is what brings me to this blog entry, how do you make an email in Dreamweaver? I found this great article which is below. It is one of the best written article that I have read when it comes to finding help out there so here it is:
If, like me, you passed through the early days of table-oriented web design to CSS-based layouts, you’ll be completely baffled—and perhaps a little annoyed—when I tell you to forget everything you know about CSS positioning when it comes to HTML email. What’s old is new again and tables rule the email roost. In fact, it’s not just tables, but nested tables that are the key to maintaining a solid layout across the spectrum of email clients.
Like the outer wrapper <div> tag frequently used in a CSS-based layout, it’s best to start with an outer table. Several email clients strip out any attributes added to the <body> tag, so you’re essentially creating your own defacto container. Here’s how you’d set up the containing table in Dreamweaver CS4:
- Start with a blank HTML page with no links to JavaScript files, external style sheets, or embedded CSS rules.Most email clients ignore or remove anything CSS or JavaScript related in the
<head>.
- From the Insert panel Common category, select Table.
- In the Table dialog box, declare these settings:
- Rows: 1
- Columns: 1
- Table width: 98 percent
- Border thickness: 0
- Cell padding: 0
- Cell spacing: 0
- Header: None
These settings will establish a 1-cell table to hold all of your HTML content together. The width is defined as 98% to give a small gutter around it all; Yahoo! Mail especially seems to require 1% space on the left and right to look right.
- If you want to establish a background color, switch to the CSS tab of the Property inspector and choose a color from the Bg color picker (see Figure 1).The code will be entered as an attribute for the
<td> tag, which is perfectly acceptable in an HTML email.Figure 1. Set basic cell properties in the Property inspector.
- Likewise, to center your content, choose Center from the Horz (Horizontal) list.
Next, you’ll want to nest a series of tables within the initial outer table. It’s better to avoid one big table with a number of colspan attributes; although this attribute works for most email clients, it breaks in Lotus Notes. It’s better to sketch out your design in basic sections—header, content, footer—and then build a table for each section. These tables can stack on top of one another and contain additional tables. The two example files, for example, have a main content area with two columns: one for the main area and the other for a sidebar. In turn, the <td> cells contain other tables as needed.
The default size of the email reader pane varies wildly across email clients, as does the user custom resizing, so it’s best that your content be confined to a relatively small width. At WebAssist, we use a width of 621 pixels, but I’ve seen designs as small as 600 pixels.
Two steps backward for CSS
Remember how all the web standard proponents, including me, urged you to stop using inline CSS styles and to either embed your CSS rules in the <head> or put them in an attached external style sheet? When you’re creating an HTML email… nevermind. Inline styles in HTML email are all the rage and your one sure way of getting consistent results with the full range of email clients. Neither external style sheets nor embedded styles are fully supported.
Although retreating to inline styles is essential for HTML emails, you don’t have to go all the way back to using <font> tags and the like for basic formatting. Even better, Dreamweaver CS4 makes it easy to add most common styling inline. Here’s how you’d set up a particular section in your design with specific font properties:
This is very, very important for those using Dreamweaver!!
- Place your cursor in the
<td> tag you want to style.
- In the Property inspector, switch to the CSS tab.
- From the Targeted Rule list, choose <New Inline Style>.
- Select your typeface from the Font list, for example: Arial, Helvetica, sans-serif.
- The Targeted Rule changes to
<inline style> to indicate that your font choice has been entered as a style attribute in the current <td> tag (see Figure 2).Figure 2. Inline styles can quickly be added in Dreamweaver CS4.
- Choose or enter the size in the Size editable list.
- Select the Color swatch to display the pop-up color picker and choose the desired font color, or enter a hexidecimal value in the Color field.
- Click Bold or Italic to add font stylings.Clicking Bold adds a font-weight property to the style tag, whereas Italic adds a font-style property.
- If desired, set the alignment to left, center, or right by selecting the appropriate button on the Property inspector.
- If you need to add additional styling, such as margin, padding, or line-spacing, click Edit Rule to open the standard CSS Rule Definition dialog box or CSS Panel to display the CSS Styles panel where you can add attributes manually.
Not all email clients support inheritance, so you’ll have to be repetitive when styling your table cells and apply the same styles as needed to individual <td> tags. One technique I’ve found to be helpful is to create a 1-cell table and then set the styles I want on that <td> tag. Then, I’ll press Tab to create another row and table cell, which will carry over the styles previously established.
Absolute images and links, absolutely
In some ways, you can think of an HTML email as a web page without a site. Because it has no enveloping folder or adjacent images folder, the source for all images must be linked absolutely. Most designers create their comps with images from their own local system, and so even seasoned professionals make the mistake of accidentally linking to local images. Dreamweaver is perfectly capable of displaying remote images at design time when given an absolute URL, so I generally gather my graphics first, publish them, and then link to them with a fully qualified URL; for example:
http://www.idest.com/images/email/logo.gif
Another factor to keep in mind with images is that many email clients don’t display them by default to avoid spam attacks. Recipients have to either enable images on a case-by-case basis or accept the sender as safe. Therefore, you’ll need to test your designs with images disabled, either by turning them off in the browser options or by using an add-in such as the Firefox Web Developer Toolbar.
Always add alt and title attributes to your images to provide information should the images not be displayed. Normally, this text is displayed with the default paragraph styling. However, if you need to make an impact—regardless if images are enabled—one trick is to put the image in a <td> tag that has been styled with a larger font size. Figure 3 shows the file sample_email.htm with images turned on and Figure 4, with images turned off. In this example, the <td> tag has this style attribute:
style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:22px; color:#90C424;"
Another approach is to build the graphic into a table where the text is in a separate <td> tag with a solid background color for emphasis, isolated from the decorative graphics. This methodology is shown in the file sample_email2.htm, which is included in this article’s exercise files.
Figure 5 shows what the email looks like with images enabled. Note how the background gradient imagery and primary box figure are separated from the header messaging, which has a solid colored background, and yet the design appears to be of one piece.
With images disabled, the key messaging is displayed against a colored background (see Figure 6). The same background color is applied to the other <td> tags which contain the images, thus allowing the area to span the entire width of the email.
One final tip regarding images. If your design calls for a background image, put it in the <td> tag via the background attribute (which you’ll have to hand-code in Dreamweaver) rather than the CSS property background-image. Outlook 2007 and Lotus Notes do not support the CSS property..
You’ll need to be careful of coding your hyperlinks as well as your images. Again, absolute URLs are an absolute must: there are no document- or site-relative links in HTML emails. Also, be sure to add a target="_blank" attribute to your links so that they open in the browser rather than in the email client.
To add this attribute in Dreamweaver, switch to the HTML tab of the Property inspector and choose _blank from the Target list after inputing your absolute URL in the Link field.
0 comments
20th Oct 09
Jeff Carlson
