Adventures with Html Email Coding!

Html email coding= kind of a bitch. What seems like such a simple task.... actually made me want to rip my hair out. Luckily, I am not the only one that feels this way. A web developer friend sent me an article from A List Apart "Can Email Be Responsive?" after I had vented my frustrations. I'd personally like to quote:

"Still, email design is an outrageously outdated practice. Remember coding before web standards became… standards? Welcome to the living hell of email design."

 Things I learned:

  • Do not use JSBIN for coding this. (In a previous class "Coding for Designers" we had used JSBIN, I assume for novice purposes)
  • Difficult to find solid tutorials that aren't completely outdated.
  • See how the code looks in html, test in Litmus email testing program, note that it does not look the same, google issues, fix code, look in html, test in Litmus email testing program, note that it does not look the same, fix code, lather, rinse, repeat.
  • Patience with email coding and knowing there are talented people trying to make updated best practices.
  • And holy crap, how did I finally get that to look decent?!
Mock up for my html email coding project.

Mock up for my html email coding project.

Screen Shot of how it looks in my Chrome browser

Screen Shot of how it looks in my Chrome browser

And finally, screenshot of how it looks in my gmail after litmus test. 

And finally, screenshot of how it looks in my gmail after litmus test. 

Unfortunately, It is not as beautiful yet in mobile. Just patting myself on the back for having gotten this far!

Thoughts: User Interface and User Experience

As a freelance graphic designer, I take a strict approach on projects that are predominately brand identity, advertising, or layout design. Though I have basic working knowledge of HTML and CSS, I haven't fully jumped into the web design world. More often then not I constantly see job listings that combine a graphic designer and a web designer but also the greater of demand of User Interface and User Experience designers. The time has come to expand my skill set towards UI/UX, which is incredibly daunting. I have many web developer friends who utilize my graphic design skills, but to constantly hear "developer speak" of functions and programs, how this is becoming useless and that is crap or this is moving towards this direction... angular, jquery, boot strap, It's a panic attack of "I have no idea what you are saying." 



I have been talking about expanding more towards the web for some time now... overwhelmed and behind is how I feel in this game. So many things... Where do I get started? What's the difference between user interface and user experience? How does one even present UI/UX in a portfolio to show a potential employer "hey I know what I'm doing"? 

A fantastic metaphor from a Usertesting.com guest post, Craig Morrison (founder of Usabilityhour.com)

"Why You Shouldn't Hire a UI/UX Designer" :

"If we’re talking about delicious cake (and why wouldn’t we be?), UI is the icing, the plates, the flavour, the utensils, and the presentation. UX is the reason we’re serving cake in the first place, and why people would rather eat it than hamburgers."

Of my research, this is the most succinct explanation I have come across. 

Now what?

Where do we go from here? 

Tony, one of my front end developer friend (check out his website and new one in progress), described user experience as a door and a doorknob. Why would a doorknob be located where it's located? Obviously, it wouldn't make sense for it to be placed at the top of the door where no one could reach. The door knob position helps the person (user) reach the end goal which is to open the door and go inside. 

He suggested a few exercises (I look forward to presenting in future blog posts). First, find user experience examples in everyday situations. Second, find websites to assess and critique, take notes, sketch and redesign. Third, we create a website for a fake restaurant we invented, I will be focusing on the user experience, user interface and design, he will focus on developing it.