Hacks| Issue 4
One for Email
Language: Html & Css

Yes, I stole this from shutterstock. Bite me
New to writing html for emails? Read this easy to read thingy by my senior sister Afopefoluwa Ojo.
So this week I did my first html template and here are a few things I picked up. So as you probably read in Fope’s article, email apps (services? what do they call them kinis abeg?) just don’t allow you to use divs like you would love to. I think they crash or something. Bottom line, just don’t do it.

What you need to learn is the delicate art of using tables. This reminds me of a joke
A man and his 5 friends walk into a restaurant
Man: I would like a table for sex
Waiter: What did you say?
Man: Six! I meant six!
No? Not funny? Okay

There is quite some amount of nesting going on in the tables and I will explain what seems to be general idea. The first table, the outermost, that one is like the background body, it takes the width of the webpage or email page (for real I need a name for these things) The next level of table is where your actual email does it’s living. This one usually determines the width of the email. The next table level which I feel might be optional is where the email content actually lives. So all your text and stuff will just be chilling here.
Typically, this arrangement is done separately for each section in the email, it’s general practice but i don’t know any particular advantage of using this. There is one occasion when I put my third layer of table nesting in the same table (second level) and the reason being for something i advice you don’t do.
So I can have a background image for email but I advice that you avoid using background images in emails as much as you can.
I bet all this talk of nesting tables is giving you headache so i will make a few code examples and add link at the end of the post.
Here are some things I keep in mind when writing html/css for emails.
1. Forget everything I know about divs for peace of mind
2. Nest those tables and separate the sections for order and peace of mind.
3. Align everything inside the first table (i.e second layer upward/downward depends on how you see it.) to the center for peace of mind.
4. For images, you are gonna be using url links to wherever the image is stored online for peace of mind (also it’s the only way it can be done)
5. Write your css inline for peace of mind.
6. I use google fonts to make it look sexy and for peace of mind.
7. Make it responsive you buffoon and for peace of mind.
When I am done with the examples, links will be here and here.
Thank you for reading

