Page & Email Responsivity

Page & Email Responsivity

The requirements

I’ve met a host of challenging Magento frontend requirements: One client wanted a new build Magento store based on Community edition with a look and feel that would set them apart and provide great customer experience across all platforms. Another, on Enterprise 1.13, wanted to bin its static transactional emails and replace them with emails that were engaging, responsive and provided product images of an order, related products also available, or the contents of their abandoned cart.

Solution – New Custom Site

I provided a fully customized theme with new layout, block and template files. Responsive CSS comprised CSS3, media queries and workarounds for partially compliant browser versions. Resultant pages flex nicely from desktop through smart phone, and access is simple and fast. See the site here.

Solution – Engaging, responsive emails

The full panoply of attention-grabbing responsive transactional emails were created for a particular client’s instance of Magento Enterprise 1.13, including order confirmation, order update, dispatch, new account, new email subscriber, abandoned cart, review reminder and refund. Here was an opportunity to revisit seldom-used HTML, and deploy inline CSS and layers of nested table tags to provide product menus, special offers, product images and a number of other features. Block classes were created to get product images from quote or order models including images for product review, related products and abandoned carts. Responsivity was enabled with media queries, toggling table cells as needed to display as block and wrapping or stacking multiple images as required based on container and image widths. Testing across multiple email clients and devices was facilitated with Litmus ®.