?
Solved

constructive criticism, suggestions on how to make my code better

Posted on 2008-10-19
3
Medium Priority
?
255 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:Tom Ray
[X]
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
3 Comments
 
LVL 25

Accepted Solution

by:
Rouchie earned 750 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 750 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:Tom Ray
ID: 31507634
Thanks for the input
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

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.
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.
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 google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

765 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