We can tell you what changes to make to get your code reflecting your vision, but there are grave underlying problems.
You are using tables to structure your layout. You should use tables only for tabular data.
Your layout is a fixed layout rather than responsive design. This means it will not scale well on mobile devices.
If you are only practicing, then it’s understandable that you must start somewhere; however, using tables to establish your layout is developing very bad habit from the beginning.
Thank you very much for the quick reply! I am just trying to learn and doing as much self teaching as possible. I joined this company and want to show a positive impression that I am adaptable. If it is not a bother would you mind helping me with the changes?
So I am just trying to replicate that email which i included in the dropbox.
Hey!
Thanks for your quick response. I dont know what is the best for this. I feel a simple email template would be the easiest where I can write a small email and include a banner. What would you suggest?
Thanks
As you can probably guess from my earlier question, I don’t send HTML emails, and consequently I’m extremely rusty when it comes to using tables for layout. Fortunately, there are others around who should be better able to assist you, but if all else fails, I can have a go at it tomorrow.
Thank you for the reply!! I do appreciate it! I think I could figure out how to change the colors of the boxes. Last question, how could i take out the columns in the main square to just have one body of text?
Hey! So I am sending these emails through pardot. Would you not suggest HTML. It looks like there is a HTML part where I write the structure of it.
Thanks
If you need that kind of look, as per the image, as opposed to plain text, then you will want to use html with styling.
I would not go so far as to say required. I think it’s more a case of it is still considered acceptable to utilise tables for layout in emails.
The reason being that email clients are something of an unknown, more so than (modern) browsers when it comes to css support. The fear is that some email clients are still in the 90s when it comes to css and don’t support modern layout systems, so people revert to 90s style coding.
In truth some clients do support a lot more css than others, but I suppose the “others” are still there. I recall reading an article a while back that said this way of thinking about emails is now out-dated, which I think is true to an extent. But I honestly don’t know all the email clients and how well they all handle css.
Looking at the actual layout mock-up, it looks to be a single column, so you may well not require a table to achieve it, even with “Luddite” code.
And that’s a god point: just where do you draw the line to what level of css is too new for email?
Just glanced at the code and one important point that jumped straight out at me was that you have relative paths to your images.
That’s not going to work in a email, you need absolute paths with the full URL.
Depending on the particular design you’re looking for, you would need to remove one or more of the inner tables, and probably the 2 <td>s of width 260. It can be difficult finding where one table ends and another begins sometimes which is one reason this design technique is no longer used for web pages.
Where you have an image (img) element the source attribute looks like this:-
src="images/top-shadow-basica.png"
That shows the location of the source image relative to the HTML file, wherever it may exist.
That is fine if the html exists on a your own computer or your (host’s) web server.
But as an email it will be on the recipient’s computer, where such a file is not likely to exist, so will not be found.
So you must use an absolute URL like:-
That’s shown in the image, it appears to be a single column design, so could probably do away with tables altogether, that would make the code a lot more readable.
