front-end development | Bootstrap | email design
code samples available upon request
I was provided a PDF mockup and image assets and asked to create 1) a responsive landing page and 2) an “email-friendly” version of that page to be used for marketing purposes. I used Bootstrap to build the landing page, and inline CSS to build the email.
Style guide: Since I was given a PDF and no other guidelines, I used Photoshop to extract the colors and Adobe Acrobat Pro to get font face and font size information. I created a color palette using coolors.co and, since the document fonts were Google Fonts, I used a simple Google Doc for the typography scheme.
Design: Using Bootstrap’s built-in breakpoints, I designed three initial versions of the landing page: desktop, tablet (landscape), and mobile. From there, I devised the following grid system:
I added three additional breakpoints to account for a slightly shrunken browser window on a desktop, a tablet in portrait or multitasking mode, and a phone in landscape mode.
The marketing email was a bit trickier, since the client had not specified an email marketing tool. I decided to use nested tables and inline CSS, so the client could simply copy and paste the code into a text editor, making it platform-agnostic.
Based on projects I’ve done for other clients, I used a max-width of 650px and a two-column layout that stacks vertically at 480px. I also made the hero much shorter, in case email recipients did not bother to scroll down when opening the email. This way, at least some of the expanded content would be visible immediately upon opening.
Per the client's instruction, the sign-in form is not present in the email. I also removed 2 of the 4 photos, since the images were decorative rather than adding meaning to the text.
The final deliverable was a .zip folder containing:
If you would like to see the final results and source code, please contact me and I will send you a private link.