Traction-DM-test

We appreciate you taking the time to take this assessment, which helps us gain some valuable insight into your development process and familiarity with the complexities of developing email for compliance across clients.

Please review and employ the attached PNG files as a visual reference. There are separate files for desktop and mobile layout. We would like for you to please develop an email in plain HTML/CSS that matches the layout and styling as defined in the PNG files, while functioning correctly (e.g., links behaving normally) for the following mail clients on desktop and mobile and using a single code base:

• Apple Mail
• iOS Mail for small phones (iPhone SE) and large phones (iPhone X)
• Gmail.com webmail
• Gmail app on Android
• Outlook.com webmail
• Yahoo.com webmail
• Outlook 2013 on Windows 8
• Outlook 2016 on Windows 10

Take into account precision, responsiveness, and cleanliness of code. You can use any third-party tools of your choosing (i.e., Litmus, EmailonAcid, etc.) to test and ensure they will render properly in the respective mail clients. Feel free to deviate if necessary from the specified layouts, as long as there is rationale to do so.

While there is no specific time limit, we'd like to see you work this out on your own and see what you can produce within a couple of days if possible. When you are ready to have your code reviewed, you can point us in the direction of your Github or send us the files!

Notes from Dave C.

Hey Mateo,

First of all, it was great talking to you the other day! Thank you again for taking the time out and giving me the opportunity to move forward in the interview process with this coding exercise! Traction is a really solid outfit from what I've seen so far. I'm excited to learn more about the company and get to know more about the Apple client!

So I've completed the coding challenge, and here is the code and asets for your review if you'd like to clone to your drive and check it out. I may continue to make updates, so I will let Kandy know when I have fixed anything so you can update on your end. Here is a link to the lastest Litmus test that I just ran with all of the browsers/deveices/OS enviros listed on the instructions provided for the test:

Litmus Test

I've run out previews on my free trial, but I'm going to try and use my wife's email address to sneak back in with another free trial to fix at least one of these things...

• Gmail App for Android DOES NOT support media queries! This made it difficult to handle things the way I planned to for the hero section as I did for iOS and others. I was just not aware of this, and was way too far into develoopment to turn back and try another approach. I would love your insight, Mateo, on any workarounds that you know of for this.
• There is a wrapping issue going on in Outlook 2013 in the third module down. The third submodule is wrapping down under the first two. I'm pretty sure I can get that fixed and I will send another link to you once I do.

I look forward to your feedback! Let me know if you have questions or comments as you are reviewing my work.

Thanks again,

Dave Churilla churilla@gmail.com