The iPhone Native Mail App vs The Gmail App
Both of these apps are capable of recieving emails from Gmail but they are, in fact, completely different.
Occasionally, an excited email designer contacts us, saying, “I was testing on my iOS and suddenly my styles are working in Gmail! It’s actually responding to my responsive design!” Or a frustrated designer will email us, saying, “I thought responsive designs worked on the iPhone? My customer says this email isn’t working at all.” These misunderstandings have a common source: confusion about the mail apps for the iPhone (and the rest of the iOS family.)
Quick tip: The easiest way to tell these two apart at a glance is the status bar at the top of the screen, which displays the current time, battery power, reception and so on. If the status bar is black, it’s the Gmail app. If the status bar is blue, it’s the native Mail app.
Sometimes things get confusing in the wild.
A Gmail account can be connected to the native mail app, or a user can choose to download the Gmail app itself. These two clients don’t render emails quite the same way, so it’s important to know the difference. This is especially true when it comes to responsive design, which isn’t functional in the Gmail app. In fact, the Gmail app strips out the entire style block.
How do users get these apps?
The native “Mail” app is so called because it comes installed on all iOS devices. The Gmail app is available for free download from the app store. Users may install more than one mail app on their phones, which means that a phone with both apps can display a given email both with and without responsive design.
Let’s take a look at the visual differences between these two apps.
|Native App Icon ||Gmail App Icon |
|Native “Mailboxes” ||Gmail “Tabs” |
|From this screen, it’s easy to tell the difference between these two apps. The native mail app (left) has “Mailboxes” at the top, with blue on white. The “Tabs” screen of the Gmail app (right) has lighter text on a dark background and should have a mailbox called “Primary” at the top. Note that the status bar at the top of the screen (with time, battery power, etc) is black in the Gmail app in all screens. Touch “Inbox” in the native app or “Primary” in the Gmail app to go to the next example screen.|
|Native Inbox ||Gmail Inbox |
|The native mail app’s inbox (left) uses a blue on white interface. The button at the top-left reads “Mailboxes.” In the Gmail app’s inbox (right), the interface is grey on white, and the top-left button has three lines. Next we’ll look at a responsive email in both clients.|
|Responsive Email in Native App||Responsive Email in Gmail App|
|The native mail app (left) has an increased font size and a different header layout. In the Gmail app (right), this email’s text is too small and the header is still all on one line. If you’re curious about responsive design, or need a responsive email for testing, check out our responsive template.|
If you’re having trouble with a responsive design, check out our article on 5 Reasons Why the Mobile Version of your Email Might Not be Displaying. We also just released a blog of 7 tips for designing for the iPhone. If it’s the Gmail app you’re curious about, check out our 12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps blog.
Got a question not covered here? Let us know in the comments below!