Engaging Email Receipts: Responsive Design Best Practices
With approximately 50% of emails now being viewed on mobile devices, and the trend continuing to increase, it is necessary to create engaging email receipts that provide an enjoyable mobile user experience. Responsive email receipt design takes into account the screen size of the device that is being used and adjusts the format of the email receipt accordingly. Beyond basic scalable design, responsive design includes the ability to add, hide, replace, move, and stack, etc. the email receipt content. However, it is important to note that support for responsive design depends on the user’s email client (i.e., not all email clients support responsive design). So, it is good practice to build not only a responsive enriched email receipt but a fixed-width backup receipt as well.
Send Your Customers Flawless Digital Receipts
Below is a list of best practices for creating a responsive enriched email receipt for both small and large screen sizes. However, there are four things to keep in mind before you start:
The Purchase Info (i.e. transaction data) is the primary focus, with everything else being secondary.
Use a minimum font size for easy reading. We recommend no smaller than 12px.
Create a consistent brand experience by matching the design of your receipt with your e-commerce website, if you have one.
A cleaner, more streamlined receipt is preferable so customers can easily view the content on the receipt.
These oversights result in frustrating customer experiences that can leave negative impressions. Now, let’s start at the top of the receipt and work our way down.
Best Practices For Creating Responsive Engaging Receipts
Email Pre-header – Personalize the receipt by adding custom From Email Names, From Email Addresses, and Email Subjects.
Small Screen: The subject line can get cut off on smaller mobile devices, so it is important to use pre-header text to support it. Pre-header text (also known as Preview text) is the first text that appears in the email, which is pulled into the inbox preview of most major email clients. Utilize this space as a “second subject line” to entice the reader to open the email.
Large Screen: Also use the pre-header to tell recipients what to expect and compel them to open the email.
Email Header – Further personalize the receipt by adding custom text directed at the customer. For example, “Hi Lisa, thank you for your…” Make sure you have a fallback in case the personal data is not present. For instance, “Valued Customer”.
Small Screen: Limit the amount of text to the bare minimum, if any.
Large Screen: Include more text if you must, but do not get carried away with it.
Receipt Header – There is a tendency to sometimes place too much information here to capture the customer’s attention as soon as possible. This may include logos, social media links, e-commerce links, etc. While this approach may be beneficial on a larger screen, it can annoy customers using mobile devices to view their receipts. Imagine the frustration of having to scroll multiple times before being able to see your purchase info.
Small Screen: Minimize the content placed in the header. For example, keep the brand logo on top, and push any other brand content towards the bottom of the email receipt. This could require you to have a different header for smaller screens. You can also utilize image-swap techniques with CSS rules and @media queries to change out larger banners for smaller, mobile-optimized layouts. This will ensure banners don’t take up too much space on the screen.
Large Screen: You can design a more robust header that includes your logo, social media links, e-commerce links, etc. However, do not get carried away with inserting too much content right off the bat; remember, this is a transactional email first, not a marketing email. Make sure the customer can locate their purchase details quickly. Don’t worry, you will have the opportunity to include marketing content in other areas of the receipt.
Receipt Barcode – The barcode often appears at the bottom of most receipts. However, for return & exchange purposes, it may be better to place the barcode at the top of the receipt.
Small Screen: Consider placing the barcode at the top of the receipt, and maximize its width to make it easier to scan. This allows customers to quickly open the email receipt and make the barcode available for scanning, without having to scroll. Just imagine the nuisance of having to scroll down to the bottom of a CVS receipt for every return you had to do.
Transaction Header – Before getting to the purchase details, some general info appears at the top of the receipt. This can include Store Information (i.e., Name, Address, Phone), Register #, Associate Info, Date, Loyalty Information, etc.
Small Screen: Display only the necessary information to save valuable space. For example, it may be helpful to have the Store Name and Date, but most other details can be removed or moved to the bottom of the receipt.
Large Screen: Do not display all the available general information. Instead, look at each piece of information and make sure it provides value to the customer. Superfluous information is unnecessary. You can put the space and customer’s attention span to more valuable use.
Transaction Details – This is the heart of the email receipt; the reason your customer opted for an email receipt; to have a record of their purchases. While you want to keep the content of this area as straightforward as possible, there are some powerful capabilities you can add to significantly increase consumer engagement. From item-level social media sharing to product rating, this is an area where an engaging email receipt can truly transform a brand’s relationship with their customers by making the receipt much more interactive.
Small Screen: Examine what purchase details are critical to display since horizontal space is limited. Hide “Nice-to-Have” info such as Item Price, Quantity, SKU, etc. Item-level social media share icons can be valuable since most email receipts are opened on a mobile device. However, make sure the icons meet tap size requirements, and that there is adequate white space between icons. Consider displaying multiple social media share icons below the Item Info versus next to it, due to the space constraints. You can also include your corporate social media page at the bottom of this section, after the Payment Information.
Large Screen: Include all key information that would appear on a paper receipt, but also take advantage of the ability to further engage with the customer. For example, add item images and social media share icons next to the Item Info that allows customers to share specific purchases with their friends & family. This gives you the power to use loyal customers to drive people in their trusted social networks to your e-commerce site. Think omnichannel here. You can also include your corporate social media page in any white space towards the bottom of this section (e.g., left of the payment information).
Receipt Sidebar – A sidebar can be a good way to get your customers to see upsell opportunities immediately without requiring them to scroll down, assuming you have the space. Product recommendations and/or promotions may be a good fit here. The sidebar should appear on the right side as the important purchase information should be first.
Small Screen: Do not display a sidebar, since horizontal space is limited. Instead, you can display product recommendations/promotions in the Receipt Footer. Again, if you have a Receipt Sidebar for larger screens, hide that content or move it to the bottom.
Large Screen: Display a sidebar only if you think it adds value. When opening an email receipt, the customer’s primary goal is to review their purchases. By not adding a sidebar, you are keeping the primary focus of the receipt clean and simple. At the same time, you may miss an opportunity to sell them other items. You could get the best of both worlds by moving this info to the bottom of the receipt, assuming scrolling is not a concern. This also helps alleviate content wrapping issues, if the email window width is reduced. If you include a sidebar, limit its width and plan for 1 column with ~2 rows. You don’t want to overload your consumers and scare them away.
Receipt Footer – You can engage with your customer post-sale here. Videos, production recommendations, promotions, surveys and more can be placed here. But remember not to overdo it. Keep it manageable and relevant to the customer.
Small Screen: Plan for one to two rows with a max of two interactions on each. Again, not all interactions are the same, so while it may be ok to squeeze two product recommendations on one row, a video may warrant an entire row to itself. Change the size of the interactions to fit the reduced space (this may include both the height and width). You can also replace the actual design if scaling down makes it difficult to view the interaction. This includes removing hard to read details, ensuring buttons meet minimum tap size requirements, or even eliminating specific interactions altogether. When interactions navigate the customer to a webpage, make sure that the webpage is mobile-friendly. There is no sense in creating a mobile-friendly, engaging and responsive email receipt that generates an actual post-sale action by the consumer, only to lead them to an underwhelming webpage. For videos, look to use the native mobile app, if available, for optimal viewing.
Large Screen: Plan for one row with one to four different interactions that may include a combination of product recommendations, promotions, videos, surveys, etc. Not all interactions are the same, so while it may be ok to fit several product recommendations in a row, a video may warrant at least half a row. Also, if multiple interactions are used, ensure they have the same height dimensions to keep a clean look. Lastly, the interactions should wrap if the width of the email window is reduced. This is where setting a max width on the email receipt is helpful, as it limits you to a boundary.
Transaction Footer – Include any paper receipt footer information here such as return policies, loyalty details, warranty information, terms, etc. at the end so they are available for reference. Do not push your interactions to the bottom of the receipt.
Small Screen: Make sure the text wraps for the smaller width.
Large Screen: Make sure the text wraps if the email receipt window width is reduced.
Email Close – Close with a reminder to customers to add your digital receipt sender email address to their safe sender’s list. Any additional miscellaneous info can also go here.
Small Screen: Make sure the text wraps if the email receipt window width is reduced.
Large Screen: Make the text wraps for the smaller width.
Paperless Receipts to Engage Your Customers
Finally, make sure you test your email receipt using the above mentioned best practices. With the plethora of mobile devices, platforms, and email clients out there, testing is critical to ensuring a pleasant experience for all your customers. By successfully incorporating responsive design for engaging email receipts, you can ensure your customers have a good experience and reciprocate by interacting with your receipt. Recognize the value of this engagement opportunity and take action by going beyond the sale.SEND A SMARTER RECEIPT
Discover even more benefits on our Digital Receipts Product Page.