The Amazon Fire Phone entered the Smartphone market last year but following a lukewarm reception and disappointing sales, it has been overlooked by many – including email marketers.
However with the weight of one of the world’s largest online retailers behind it, we doubt this will be the last we see of it. And let’s not forget that there are already people out there viewing emails on this device.
So how does the Amazon Fire Phone handle email, and what does it mean for how you design and code? Here we take a look at some of the key rendering and display issues you should be aware of.
Rendering desktop and mobile-optimized emails
In desktop emails, HTML with unspecified values – such as widths – can cause problems on the Fire Phone as it automatically introduces mobile elements, such as stacking, to the desktop design. This can result in unintended spaces and breaks in the email and so should be avoided by using thorough and specific coding.
For mobile-optimized emails, coding to best practices with the same media queries, breakpoints and HTML tags as your existing responsive code should mean that your email displays as intended – with a few exceptions.
In the screenshot below left, the HTML did not specify explicitly enough for the Amazon Fire Phone to display the mobile version of the navigation bar. Further below, The Goodwood Hotel email shows how elements can be rendered out of position if sizes are not specified.
Background images
While most phones can support background images, rendering on the Fire Phone seems to be inconsistent. The background image either appears as blank (as shown below), or a section of the desktop background image is displayed rather than the scaled-down mobile version.
Font sizes
As with most phones, the Fire Phone has a minimum font size to ensure text is legible. In this case it is 13px and any text smaller than that will automatically increase, causing text to wrap onto new lines and break the surrounding design.
Again continuing current best practices such as using a web-safe font at the correct size, adding padding and leaving space within the container table and surrounding areas, should ensure the text displays as intended. An example below where areas haven’t been clearly defined, resulting in the Fire Phone rendering text and images incorrectly.
Screen scaling
Unlike Android models, the Fire Phone fits all mobile-optimized emails at full width on its 1280 x 720px screen, and displays desktop versions in their entirety rather than just the top left corner.
Whether this is an advantage for marketers or not depends on the design of the email, but it’s worth bearing in mind.
Below, the Fire Phone displays a scaled down version of the email while the Android model shows just the top left corner.
Generally speaking, the Amazon Fire Phone shares many similarities with Android and iOS phones, and its email rendering does support responsive email coding including CSS and media queries.
However, as we’ve seen, the phone can still adjust and overwrite some code, breaking the email and substituting desktop elements or reformatting layouts. As always this is why consistent and thorough best-practice coding and testing for mobile layouts should be a priority.
Last updated: Feb 02, 2015 admin
