iPad Pro

First Look: iPad Pro Mail App


The iPad Pro just recently became available, and it’s had mixed reviews so far. We thought we’d grab one and see how it handles email.

First off, this thing is HUGE. The screen is 12.9 inches, with 78% more real estate than the 9.7 inch iPad Air 2. The icons on the home screen look like they are floating in an ocean of empty space. The iPad Pro also has a retina screen, which allows it to pack in twice as many physical pixels as its display parameters would otherwise indicate. Its resolution is 2732 x 2048 at 226 pixels per inch.

What is a retina display?

“Retina display” is a marketing term that Apple uses to refer to their high pixel-density displays, often 300 or more pixels per inch, in which the individual pixels are indistinguishable at a normal viewing distance. The iPhone 6, for example, has a resolution of 1334×750 and 2x pixel density.

“Pixel density” refers to the number of physical pixels that are considered to be a single pixel for display/CSS purposes. So a phone with 2x pixel density considers a 2×2 block (of 4 pixels) to be a single pixel in CSS. This enables the phone to show much higher quality images while keeping text readable.

Note: For the rest of this article, I will be referring to pixel measurements in “display” or CSS pixels, not as physical pixels. To get the number of physical pixels, multiply by two.

Mail App on the iPad Pro

The first thing that I noticed is that emails look tiny in the native app. Most emails are set to have the main content area take up 580-600px in the center of the email. Our new Coffee Shop template is built to use a 600px wide content area. On the iPad Pro, that column takes up just 43% of the horizontal space. That means that more of the email is “gutter space” than anything else! Check out the picture below to see what I mean.

Email Template on mail app ipad

Notice how small the text is? The main content area is actually only 446px wide, instead of the 600px that it was set to expand to. This is probably due to the iPad scaling things according to some logic of its own.

I thought that I might be able to fix these issues with the viewport metatag, below.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Whether or not the viewport metatag is included in the email, it will display at the same size. I also found that setting initial-scale to 2 had no effect. This may cause readability issues for some users.

So what can you do about shrunken emails on iPad Pro?

Adapting to the iPad Pro Mail App

I’ll be using our new Coffee Shop template as an example for this blog. If you don’t already have it, you can download if from the blog or get it by joining our community, where you can download this template and many others.

Use the “CoffeeShop_DarkBG.html” file as a starting point to create an iPad Pro friendly version. You’ll also see a file called “CoffeeShop_DarkBG_iPadPro.html” which has a finished version of the file if you want to skip ahead.

We’ll be aiming for a final product like this:

Finished product goal

To make changes on just the iPad Pro, we’ll need to target it specifically, using the following media query. Its display width, or breakpoint, is 1024px (half of the 2048 physical pixels).

@media only screen and (device-width: 1024px) { ... }

Within this media query, we’ll add a few styles to increase font sizes, image sizes and the widths of various containers.

The first thing we’ll want to do inside of our media query is to define a new width for the “outer” container.

.outer {max-width: 1000px !important;}

At 1000px, the main content container will fill up most of the screen. I think this is a good proportion, and 1000 is an easy number to work with as we recalculate the sizes of images and other elements.

We’ll also want to increase the size of our one-column sections.

.webkit, .one-column {max-width: 1000px !important;}

The two and three-column sections will need to be a bit bigger, as well. I added a new class to the table containing the three column section to facilitate this.

.three-column-container {max-width: 1000px !important;Margin: 0 auto;}
.column {max-width: 400px !important;}
.three-column .column {max-width:270px !important;}

Now that we have resized our containers, we can resize text for better readability. I added classes to the various headings used in the template so that I could resize them.

.heading1 {font-size: 55px !important; line-height:60px !important;}
.heading2 {font-size: 43px !important; line-height:48px !important;}
.heading3 {font-size: 40px !important; line-height:45px !important;}
.p_text {font-size: 25px !important; line-height: 28px !important;}

Images will need to increase in size to fill their new space better. I added these classes based on the size of the images.

.img280, .img180 {max-width:100% !important;}
.img50 {width:100px !important;}

And finally we will want to resize buttons. I added this class to the link and the containing TD.

.button_link {
	padding: 15px !important;
	width:280px !important;
	font-size: 30px !important;
	line-height:32px !important;
	}

Now the email fills the provided space much better, buttons are easier to click, and the text is more readable. This is a good start, but I didn’t change the text in the “hero” area, and you may also want to edit the footer. Feel free to continue tweaking the design!

Note: The updated version of this code is included with the Coffee Shop ZIP file. This is also available in our Resources.

The Gmail App

I haven’t spent a lot of time on it yet, but I did take a look at a few emails in the Gmail app. It appears that the Gmail app does a much better job of fitting the content to the display space. I’m especially pleased about this because media queries don’t work in Gmail. Check out the screenshot below.

Gmail App on ipad

What issues have you seen with the iPad Pro?

If you’ve seen rendering issues or other strange bugs from this device, tell us about them! We would love to help you find a solution.

Author: Alex Ilhan

1 thought on “First Look: iPad Pro Mail App”

  1. That’s weird they are messing with the scale of the email.

    Another option to increase the size back to 600px could be to use something like this
    body{
    transform:scale(1.35)
    }

    Not tested that yet, may need some fine tuning

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies