Chapter 1

New Email Clients, Apps,
& Operating Systems

iPhone 6 AND iPhone 6 Plus

In September 2014, Apple released two new phones—the iPhone 6 and iPhone 6 Plus. While the latest additions to the iPhone fleet offer plenty of new features to get excited about, many email designers were wondering how their emails would display on these new devices.

Media queries will have to be adjusted

While earlier iPhone models shared the same screen width, the iPhone 6 and iPhone 6 Plus have thrown a wrench in this synchronicity. With these changes, email designers need to account for more diversity in screen sizes when creating responsive and mobile-friendly emails. In many cases, adjustments to media queries and breakpoints for responsive or adaptive emails will be necessary.

Due to the popularity of the iPhone (and its previously consistent screen size), 320px became the standard breakpoint in media queries and other mobile optimization strategies. However, with the new screen sizes introduced with the iPhone 6 and 6 Plus, media queries utilizing a 320px breakpoint need to be adapted. There is no longer “one media query to rule them all” for iPhones.

A bigger inbox view

Due to larger screen sizes, more emails fit in the inbox view on the iPhone 6 and iPhone 6 Plus.

In addition, Mail on the new iPhones display more characters in the from name, subject line, and preview text. The iPhone 6 Plus boasts three lines of preview text—a whole line more than previous iPhone versions.

Action items: iPhone 6 and iPhone 6 Plus

iOS 8 Release

A new mobile operating system for iPhone and iPad was introduced alongside the iPhone 6 and iPhone 6 Plus. Fortunately for designers, not much has changed with regards to coding for iOS 8. Apple’s mobile client has always been one of the best clients around in terms of support for HTML and CSS, and this continues to be the case with iOS 8.

No support for video

As reported by Elliot Ross, there has been one major change with the latest update—the video tag is not supported. While it has been supported in previous iOS versions, it no longer is. The play button will display, but tapping it has no effect.

Action item: iOS 8

Outlook for Mac 2015

Over the years, Microsoft has introduced a wide variety of email programs and apps—many of which have caused major headaches for email designers (we’re looking at you, Outlook 2007–2013). Luckily, Outlook 2011—also known as Outlook for Mac—has been a completely different story. With great support for CSS and HTML, it’s even the ideal client for experimental techniques in email.

In October 2014, Microsoft launched the latest version of Outlook for Mac—Outlook 2015. It’s currently only available for those with certain Office 365 subscriptions. A public beta will be launched in the first half of 2015, with the final release available later in the year.

While the latest version has taken on a flat, updated design, it has essentially the same UI as its predecessor. The majority of the updates seem to be “under the hood”—performance, infrastructure, and reliability improvements—rather than a drastic UI facelift.

Rendering in Outlook 2015

Like Outlook 2011, the newest version of Outlook for Mac uses WebKit as a rendering engine. WebKit has great support for HTML and CSS, including techniques like:

  • Animated GIFs
  • Background images
  • HTML5 video
  • Web fonts

Also, like its predecessor, Outlook 2015 blocks images by default. In order to display images, subscribers have to click “Download pictures.”

The biggest change between the newest version of Outlook for Mac and Outlook 2011 is the way it displays envelope fields in the inbox. With added whitespace in Outlook 2015, the inbox looks cleaner and less crowded.

In addition, previously Outlook for Mac did not display preview text, but now it does. It’s displayed in the third line in the inbox (after the from name and subject line).

Other notable changes include:


The from name now appears first (and in larger text) and is followed by the subject line.

Unread messages

The subject line is now bold (and blue) when messages are unread.

Action items: Outlook for Mac

Inbox by Gmail

In October 2014, Gmail introduced an entirely new email app—Inbox by Gmail. While it was built by the Gmail team, Inbox is not intended to be a replacement for Gmail. Currently in the invitation-only stage (you can email to request access), the app is only available for addresses—business users are out of luck for now. At the moment, it’s only accessible via the Chrome browser, and iOS and Android apps.

How does it organize emails?

Similar to Gmail’s tabbed inbox, Inbox automatically sorts emails into categories. Emails in each category are “bundled” together in the inbox. While this allows for a clean inbox, it does require users to click into each bundle to view the emails each bundle.

Standard bundles that Gmail automatically creates include travel, purchases, finance, social, updates, forums, and promos. These can be turned off, or you can create your own. In addition, users can choose whether to receive emails in each category immediately, once a day, or once a week.

Users can also set reminders as to-dos in the inbox. Reminders will appear in the main inbox alongside all other unread email, combining to-dos and emails in one view!

Taking actions on your emails

Reminders and new messages sit in the inbox—either as bundles or individual emails—and users can take various actions:


Pinned emails (or email threads) are brought to the top of the inbox and remain there until further action is taken.


Marking a pinned email as “Done” moves it out of the inbox and into the done category.


Sweeping unpinned emails or bundles moves them into the “Done” category. This excludes any pinned emails in the bundle.


Snoozing emails or reminders, temporarily removes them from the inbox. Once removed, they will return to the top of the inbox after a specified amount of time.

Move to

Emails can be moved to another bundle, added to a new bundle, removed from all bundles, marked as spam, or deleted.

Highlights in the inbox

Inbox takes the concept of a visual inbox to a whole new level with “Highlights,” showcasing information from the email in the inbox view under the sender image, from name, subject line, and preview text.

Similar to quick actions, you can use a bit of specialized markup, called a schema, to include these visible actions in the inbox. You can use schemas to add images and reservation information directly within your subscriber’s inbox.

No support for responsive design

Similar to the Gmail app, there is no support for responsive email in Inbox.

Action items: Inbox by Gmail