Designing HTML E-Mails

This week, I completed the HTML E-mail Design course on Team Treehouse where I learned how to build a mobile-friendly e-mail from scratch using HTML and CSS.

The other day, I opened up one of the e-mails I got from subscribing to Skillcrush and was inspired to recreate it. The e-mail was a simple one column layout, featuring one main photo. There was a lot of text in the e-mail as well, but the text featured about a dozen links back to the Skillcrush site, which is a pretty smart move in my opinion. I get lots of e-mails from retail sites that have all of the info in one huge image.

I tend to check my e-mail when I’m mobile and I almost never choose to view the images since they’ll take too long to load and they rarely fit my phone’s screen. When I get e-mails from Skillcrush, however, the one or two missing images doesn’t keep me from getting the message and clicking through to the site.

So, here is my recreation of the e-mail.

Although I look forward to feeling comfortable designing everything from scratch, being able to study and recreate an existing design works out much better for me than aimlessly building. I just hope that they don’t mind!

I’ve been having fun with taking more courses outside of my track lately. In addition to this one, I’ve finished the SEO Basics course.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s