Client

Mobify, a Vancouver-based mobile customer commerce and engagement platform

Role

Web Developer
*Work done as a contractor for Yesler, B2B marketing agency, owner of the client relationship

Project Brief

Mobify needs front end web development to build the code to implement the new designs for email and landing page templates in Marketo, a marketing automation platform

Key Insight

Mobify’s current landing pages are not responsive and this is hindering the customer experience on mobile devices. The new landing pages, to be coded ‘pixel-perfect’ based on Photoshop files provided by the designer, must be modernized by introducing the use of mobile responsiveness to enhance user experience. The assets will be implemented in Marketo which means the code must be clean and optimized to work with Marketo forms for marketing automation purposes.

Solution

Hand code the HTML for the email and landing pages and prepare it for implementation inside Marketo, making sure to test to eliminate any rendering issues with mobile queries. The design has some slanted graphic and text elements which also needs to be coded to work properly. The bottom of the landing pages will require jQuery to include a non-clickable client logo rotator.

Specialties Used

Web development: HTML5 front end development, CSS3, jQuery, Marketo Design Studio for emails and landing pages

Technologies Used

Adobe Photoshop (Adobe Creative Cloud)
HTML5
CSS3
jQuery
Marketo

Results

Landing page and email template sample

Landing page live code samples (decrease window size to see mobile responsiveness if on a desktop)

See the Pen Mobify Landing Page by Alejandro Finy (@Finy) on CodePen.

This development template prototype identifies the different elements that compose the landing page. It's a good tool to see how the responsive queries work and how they change throughout the different breaking points.

See the Pen Mobify Landing Page Development Template by Alejandro Finy (@Finy) on CodePen.

Email template live code samples (decrease window size to see mobile responsiveness if on a desktop)

See the Pen Mobify Email by Alejandro Finy (@Finy) on CodePen.