• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Design

HTML Email vs. Web Layout Design

CMDR Mitchcraft

Reading time: 2 minutes

Sometimes the best way to reach a mass of new clients is by using transactional email.  It’s easy to send and people check their email every day (or every hour… or every minute – yes I know some people that do!), so you know that people will get it (providing it doesn’t end up in someone’s spam folder).  But, did you know that designing an email is… well, completely opposite of designing a Web Layout?  Forget everything you’ve learned, and prepare to relearn everything you’ve been told to forget.

1) Coding

Remember those people who told you that CSS is the only way to go?  When you talk about web layouts, that’s very true (and a philsophy I swear by).  But when it comes to an HTML email, don’t listen. You have to use tables to design and send an HTML email.  The old school methods of using tables are still here to stay.  You don’t want to make the template too big either. 450 pixels is pretty good for an email as it gives plenty of room to display the text and images you want to show while also leaving room for an Outlook sidebar.  Also, don’t use CSS shorthand – use long form.  Finally, make sure your style is all inline instead of declaring it in the <head> tag.

2) Display

Yes, it’s true that different browsers interpret code differently, but some email clients don’t even show the code at all.  Make sure you’ve got a plain text version of that email lined up somewhere for people who can’t see the images or are unable to download the images (typically a problem in Outlook if it ends up in someone’s spam folder).

Email, html, Tables
  • Getting into Gutenberg, Part 2: A Knee-Jerk REACTion (and an Introduction to Gutenberg Blocks)

    Getting into Gutenberg, Part 2: A Knee-Jerk REACTion (and an Introduction to Gutenberg Blocks)

    Reading time: 4 minutes

    I wrote yesterday on Gutenberg, WordPress' soon-to-be editing experience, as it was highly mentioned at WordCampUS here in Nashville over the weekend. Yesterday, I focused specifically on the outer facade of Gutenberg – movable blocks, layouts, and modular approaches to content. Today, we're going to look at the back-end. For a WordPress developer, this is…

    WordPress
  • Hangin’ with the ITIVE Crew

    Hangin’ with the ITIVE Crew

    Reading time: 1 minute

    You can see it in action on the Social Media Clubhouse website – the various events have various images, logos, and link categories showing up depending on where you are on the site. You can download the plugin from the official WordPress repository, or install it through your local blog! EDIT: Screencast below 🙂

    WordPress