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:Tom Ray
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

by:Tom Ray
ID: 31507634
Thanks for the input

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

724 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