Made for MobileBy Jordan Thomas | December 8th, 2011 in General
At Portable, we’ve noticed that our weekly newsletter is increasingly being viewed on mobile devices. Currently, around 20% and upwards of our email newsletter opens and click-throughs come from the stock mail app on the iPhone alone. This is a significant portion of our viewership. Naturally, we wanted the newsletter to behave in a manner which was more appropriate and user-friendly on a mobile device, so we made some updates.
The default behavior of the iPhone when viewing HTML is to pretend that its screen is bigger than it actually is, the pages display in full but are essentially ‘zoomed out’. Pinching, pushing, and tapping are often required from the user to get in closer to be able to read the text. However, with some simple coding tweaks, the same set of content is easily transformed into an easy to read experience from the instant it is opened. Images are scaled to display at the full width of the screen, while text is adjusted to larger sizes and shorter line lengths, to read more naturally.
There are many important differences in user experience to take into account when designing for a small mobile device and its touch screen. Large bodies of text take more time and effort to scroll through than on a desktop, so if you’ve got a lot of articles stacked on top of each other, those toward the end will be buried. To remedy this, we want to use a technique called progressive disclosure. Showing a headline, and small lead in to an article, then hiding the bulk of the text behind a link or button which can be clicked to show the content. If there’s a ‘call-to-action’ somewhere in our content, for instance a ‘buy now’ button, it needs to be bigger on a mobile device. The most effective placement to fill the width of the screen, towards the bottom, because quite simply, the thumb most people use when one-handedly-multi-tasking along side the rest of their day is much more comfortable tapping that spot than stretching to reach the top of the screen. Clumps of links and buttons need to be bigger and further apart to avoid mis-taps.
Designs built for email are never going to look the same in every mail client, so accept it, and focus on graceful degradation. Luckily, iOS mail and Android mail, which make up the majority of mobile email viewing, are built on Webkit. Webkit is capable of rendering rich CSS effects and treating HTML real nice, so you can be fairly confident your mobile designs are being viewed as you intended them.