Like anything in life, you can generally choose to code things up in different ways. Everyone has their own techniques that they’ve honed through practice, each with their pros, cons, and differences. While many times the visual output is the same, under the hood tells a very different story.
You could go with <strong> or you could go with <b>
Both will make your text bold. So what’s the difference? Is it worth using <b> to save on characters? In my opinion, if your concern is file size, this isn’t the place to make cuts. Screen readers treat <strong> and <b> in very different ways.
Use <strong> when something is important and need to be called out.
Use <b> when you’re bolding for decorative purposes.
You could go with <em> or you could go with <i>
Similar to <strong> vs <b>, <em> and <i> look the same, but serve different purposes with screen readers.
Use <em> when emphasizing a word.
Use <i> for styling. Examples include foreign words and character thoughts.
Bonus! Need to style a book title? Use <cite> instead!
You could go with <div> or you could go with <table>
Oh, this is a fun debate. Should you use <div> or should you use <table>? Or why not…both!? I could probably dedicate an entire newsletter just to this debate.
I say, you do you! Whatever you like. I started with only tables, but in the last year switched to divs. I can say that when you’re used to only using tables, switching to divs can be head-spinning!
Technically, <div>s are more semantic than just using <table>, so it’s good for accessibility purposes. You can also create layouts that rely less on media queries.
BUT! (this is email development, there’s always a “but”)
Outlook doesn’t like to read styling on <div>s, so you need ghost tables for layouts to work there, anyway.
You could go with spacers, or you could go with padding
Again, this is preference, but padding is basically supported everywhere, so I vote using padding to control your spacing rather than separate spacers.
Spacers use additional code like <td>s to control your spacing. I’ve used them for horizontal lines to separate content, but pretty much stay away from them to control my whitespace. Today, I think it adds additional bloat and can make code harder to read while developing or debugging.
Use spacers when you want to separate content in a more decorative way (like a solid line with your brand color!)
Use padding when controlling your white space.
Some other fun things!
Email devs, make sure you join Email Markup Consortium
! It’s a community-led group where we talk about email coding standards and how we can bring everyone in the industry closer to supporting things across the board.
Today’s my 1 year anniversary at Email on Acid! I was terrified/excited to take this job. It’s been the best, most challenging job I’ve ever had, and every day I’m so thankful to work with the some of the most rad people in the industry.
The world is forever on fire, and we need to celebrate some joy. Reply back and tell me: what brought you joy in the last week or so? For me, it was an amazing 7 mile hike with a new friend!
Catch up next month?