Solved

constructive criticism, suggestions on how to make my code better

Posted on 2008-10-19
3
247 Views
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:
http://www.tsquared.com/newsletter/full.html

One less article than the above. The red rectangle will be an image (to be determined later) to fill the space.
http://www.tsquared.com/newsletter/oneshort.html

Two less articles than the full grid. Again, the red rectangle will be an image to fill the space.
http://www.tsquared.com/newsletter/twoshorth.html

Same as the above but turning the red box vertically instead of horizontally.
http://www.tsquared.com/newsletter/twoshortv.html

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
0
Comment
Question by:sibgig
3 Comments
 
LVL 25

Accepted Solution

by:
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.
0
 
LVL 70

Assisted Solution

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

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:

http://www.positioniseverything.net/explorer/threepxtest.html
0
 
LVL 11

Author Closing Comment

by:sibgig
ID: 31507634
Thanks for the input
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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 embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

743 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now