Following the announcement of iOS 7 at Apple’s WWDC keynote yesterday, we manned our battle stations and got straight to testing the refreshed Mail app for the iPhone. So, will this updated mobile client make a difference to how we design for email? Here’s our verdict.

While still in beta, our early email tests with iOS 7 Mail, like the keynote itself, have been largely trouble-free. If anything, the big changes made to the app have really centered on its look and feel, usability and perhaps best of all, improved search functionality. Overall, the rendering experience is identical to iOS 6, but we’ll be keeping watch to see if this changes as iOS 7 matures.

Campaign Monitor newsletter on iOS 7 Mail

None of this comes as a huge surprise, considering Mail’s coupling with Mobile Safari – both of which are powered by the WebKit layout engine. However, outside of its already model HTML and CSS support, there is one thing to keep in mind when designing for this mobile client.

A matter of margins

While not so much a rendering issue, it should be noted that iOS 7 Mail does introduce a margin either side of responsive email content that has been that adapted to fit the iPhone’s 320px viewport width (see above). Unlike iOS 6 Mail, these newsletter designs no longer display wall-to-wall. Some may consider this to be an unnecessary use of precious screen real-estate, but it may well prevent situations in which email content may find itself awkwardly pressed hard against the side of the screen (say, when the email designer hasn’t added their own margins or padding).

Newsletters that haven’t been optimized for mobile in this manner display as before, that is, sufficiently zoomed out to fit the width of the HTML email content and without a surrounding margin.

So, after this early look, we can assure email designers that it’s business as usual. Should we notice any quirks or curiosities as we further test this client, we’ll be sure to note them in this blog.

What are your impressions of iOS 7 Mail? Are you a fan of its look and feel? Let us know in the comments below.

  • Polano

    I wonder what will showcase Android in its new edition.

  • Ted Goas

    Jeez you’re quick! Thanks for the early test results, as always.

  • Gary

    Just tested some existing mailers on the new mail for iOS7 and they look sexy. My worry with HTML email is when ever Microsoft change Outlook….

  • Elliot

    the border thing is interesting – does it automatically add a border, and if so does it use whatever background you have on the <body> tag? also what size is the margin?

  • Ros Hodgekiss

    Hey Elliot, good questions – as our email template includes both <body bgcolor=”#e4e4e4″> and

    , we’ll have to test exactly what the border is being added to here. I’ll update this thread as soon as I have exact details. My hunch is that the margin is being added to one of the tables that the content is being nested in and the “border color” is the background color defined in <body>. Watch this space.

    The left and right margin looks to be ~20px.

  • Mark

    Bit annoying for those of us who already add a bit of a margin. Don’t want to double it up, we’re already working in a tight space.

    Would be interested to know exactly what they do so I can replicate it for a bit of consistency across mobile clients.

  • Rhys Harry

    We like to add preview text for IOS mail & mac mail to combat seeing ‘view webversion unsubscribe’ etc. in the mail preview panel. Any idea if this is still relevant?

  • Ros Hodgekiss

    Mark – Sorry for not getting results sooner, but I’ll aim to poke around at these margins a bit more later in the week.

    Rhys – Yes, this preview/preheader text is still relevant in iOS 7 Mail. Your best bet is to take a look at our post on preheaders, as there’s some great tips on how to wrangle them there. Best of luck!

  • Nico Rohrbach

    I really would like my Newsletters to have no extra margins under iOS 7. If you find a solution to get rid of the surrounding margin, let us know!

  • Ros Hodgekiss

    Hi there Nico and company, I have found a workaround for the margin issue, but it’s awkward and may not be practical to use in email.

    It turns out that iOS 7 treats the position CSS property differently from iOS 6. As a result, you can use position: fixed/relative; left: 0; right: 0; to rid the left/right margins that we’ve been seeing in iOS 7 Mail (and other mail clients like Mailbox and Postbox), however we don’t encourage you go around applying position to all your HTML elements.

    I’ll be updating the Guide to CSS support in email to mention this issue, it’s odd, odd, odd.

  • Craig W

    ok, just noticed this margin today in our emails on my newly-iOS 7-updated phone, and I don’t see anything on the interwebs addressing it other than this post. Coincidentally, I did get the usually slick Campaign Monitor email today, also showing the margin.

    We no likey. Has anyone else gotten out their big hammers to fix this yet? I was hoping to find something simple and hand-crafted.

  • Juan Rojo

    Well, I just upgraded to iOS7 over the weekend and tested a responsive email today. The extra margin is kind of annoying, as Mark said: ‘We are already working in a tight space’

    If anyone finds a solution, please post it here.

  • Ros Hodgekiss

    Hi there Craig and Juan, to extend my previous post, there is a fix. You can try the following…

    table[class=marginfix] { position: relative; top: 0; left: 0; right: 0; }

    <table width=”100%” class=”marginfix”> … All your email content nested here … </table>

    Please note that I don’t 100% recommend this – it also removes the margin that exists in a few other email clients (like Mailbox), which can make the message look a tad awkward in the reading pane. But for the sake of a fix, it’s worth a try.

  • KaleidoMatt

    I have just noticed this in the midst of test rendering a design. Thanks for the heads up guys, I initially thought that resolution sizes had changed somehow.

  • Juan Rojo

    Oddly enough, I did a test sending from from Mailchimp, using the framework that I have always used to develop email templates for MC and it worked beautifully. No extra margins or any other issues. I thought, why not try this framework with Campaign Monitor tags to send from the CM editor? Well, it worked, sort of.

    I got the following error message at the very bottom of the email:

    mportant; margin-bottom:0
    !important; margin-right:0
    !important; margin-left:0
    !important; padding-top:0
    !important; padding-bottom:0
    !important; padding-right:0
    !important; paddding-left:0 !important;line-height:100%;outline-style:none;text-decoration:none;”/>

    In addition, some of the HTML code for some images I included in the preheader is displayed in the brief preview text shown below the subject line.

  • Juan Rojo

    Please disregard my previous comments, as the couple of issues mentioned (using the MC responsive framework) have been fixed after updating to iOS 7.0.2

  • Ros Hodgekiss

    No worries Juan – glad the update fixed up a few issues for you there. Keep sharing your observations, we’re always keen to find out what’s going on in email clients :)

  • Heather Crotsley

    Hi, I’m new to responsive design email. I launched my first one right before iOS 7 was released. Now, I am having trouble with my email . Its essentially a 2 column that is supposed to wrap around into 1 column. When I run my email through simulators for i OS6 it works great, but I send a test email to my phone running iOS 7 and it only displays the left hand column of the table. The right side is completely hidden. Any guesses?

  • Ros Hodgekiss

    Hi there Heather, we’d love to take a look at what’s happening here, so by all means, feel free to post code and details in our Email Design and Coding forums. Hope to see you there!

  • Nick C

    Hey All, I recently got my hands on a iPhone 5S and the intresting thing that appears where on previous versions of iOS and older model iOS devices, when not on a wifi and having to download emails fully it appears at least on my version of iOS 7 that it cuts the email in two giving a part downloaded email twice starting at the code so for example if you start a row it will start that row again on the rest of the email when you download it.

    Is this something anyone else has had a issue with?

  • Ros Hodgekiss

    Hi Nick, this is very unusual indeed! Would it be possible for you to kindly post details and a screenshot of what you’re seeing on our forums? We’d be keen to try reproducing this on our end!

  • Craig W

    Thanks for the tip, Ros. I see this thread also got picked up on the Litmus blog.

    I hammered away a little further and searched a little, and I think this can be solved with really simple CSS, possibly something that many already include since not everyone sees this issue. I tested in Litmus and so far, so good, we’re back to a full-width message with no margin, and no other tradeoffs in other email clients.

    <html> – i usually don’t include this tag, but code for it and test it.
    usual message

    add these rules to your message, at least in the mobile css:

    html, body { margin:0; padding:0; }

    Simple, hand-crafted, and no trickery. Please let me know if you find any problems in your personal tests.

    As an aside, I dissected an iTunes Music weekly email to see how they solved it — they use an html tag and margin/padding 0 on the body only, but that didn’t work for me.

  • Craig W

    Grrr. My code got hijacked from the post. Try this:

    html – i usually don’t include this tag, but code for it and test it.
    usual message

    add these rules to your message, at least in the mobile css:
    html, body { margin:0; padding:0; }

    Good luck!

  • Tommy Grimes

    This worked well for me, Craig. Thanks!

  • Ros Hodgekiss

    Thanks, Craig – you’re legendary!

  • Heather Elliott

    Interestingly enough it didn’t work on my email. Then again I have background images and aligned tables all over the place. And a million other strange bits of code.

    I found that if I have an empty table aligned right somewhere in the email, it won’t happen though.

  • Ros Hodgekiss

    Hi there Heather, we’d love if you could post your code and a few extra details in our forums – our community will be able to help out there. Heads up that our comments tend to eat code from time to time, so the forums are your best bet for working on code issues :)

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 120,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free