constructive criticism, suggestions on how to make my code better

Posted on 2008-10-19
Last Modified: 2012-05-05
I have to program an e-newsletter that was designed by a freelancer. I'm not a great programmer, but I have given it my best effort. I know there is usually more than one way to do things. I've done mine, and I'm interested constructive criticism (in regards to the html programming, not the design) and suggestions on how to make the code cleaner, better, easier, more universally acceptable. Because this is going to be an e-newsletter it is important that the file continues to use the old html inline styles and not css.

Using background images apparently is not good practice in email marketing. So any alternate solution for not using a background image on the green rounded corner title heads would be especially appreciated. I think I can fix the header and footer background image easy enough.

The e-newsletter is designed in a grid fashion. This is to allow for a variable number of articles in each distribution. In my mock up, I have correctly sized placeholder images for the header, footer, and various images. The red rectangles are also placeholders. The freelancer is coming up with a library of different images to be used in these spots when necessary. Since the number of articles will vary the design employs four versions:

Full number of articles match the grid system:

One less article than the above. The red rectangle will be an image (to be determined later) to fill the space.

Two less articles than the full grid. Again, the red rectangle will be an image to fill the space.

Same as the above but turning the red box vertically instead of horizontally.

Dreamweaver displays the following errors (each just one time)  that I'm trying to learn about and correct:
Float Drop Problem
Three Pixel Text Jog
Question by:sibgig
LVL 25

Accepted Solution

Rouchie earned 250 total points
ID: 22753723
I read a while back that you should presume all email clients only support the most basic of HTML functionality.   You only need to look at the source code for an email generated using Outlook to realise that Microsoft are completely using their own agenda for email display.

Therefore, I would recommend simplifying your design to remove all DIVS, plus all floats, and use a TABLE-based approach.  For the rounded corners, I would be tempted to use table cells with dark green background colours.  Yes you will lose some of the visual appeal, but the fact is that you are more guaranteed to give your readers something that renders correctly.  Consider how many different email clients are in use, with each user having different versions of that client.  It becomes a real nightmare.

There are many sites devoted to moaning at Microsoft to use standards-compliant code for Outlook.  Its a mystery why they don't (when IE8 is apparently going to support standards), but it makes life real hard for newsletter developers.
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 250 total points
ID: 22754045

You can use divs in an email, but there are two major caveats:

1) You should use inline CSS instead of linked or declaration in the header
2) As Rouchie says, email client support is variable.

>> Float Drop Problem

Float Drop occurs when the floated elements are too wide for the container.  The second element will "drop" below the first.  This issue occurs when using relative measurements (percentages, ems) for the container so to avoid it, declare a container width with a static value (e.g. 700 px) and make sure the floated elements do need exceed the defined width.

>> Three Pixel Text Jog

This is a (more or less) minor IE bug.  Position Is Everything has the definitive explanation and suggest workarounds for it:
LVL 11

Author Closing Comment

ID: 31507634
Thanks for the input

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to use question mark (?) in filename with html 25 73
Insert Button on a table 16 38
Ouput in html in powershell 2 21
Selected in an option list 13 21
This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question