Solved

constructive criticism, suggestions on how to make my code better

Posted on 2008-10-19
3
251 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Big gap on page with the Samsung Galaxy S7 EDGE and no other mobile device! 3 42
Python - desktop use 1 30
Javasctipt 2 24
Web forms being filled out by bots 4 31
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

786 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