10 comments

  • Kevin RabinovichKevin Rabinovich, 9 years ago (edited 9 years ago )

    It works if you emulate an iPhone 5 in Chrome's emulator: Email on mobile

    6 points
  • Jesse Fornear, 9 years ago (edited 9 years ago )

    Interesting, this responsive email technique relies on media queries:

    ` @media only screen and (max-device-width: 320px) {

    } `

    This targets max-device-width (not max-width), so adjusting the size of your browser window doesn't adapt the layout.

    Media queries aren't supported by the Gmail app on iOS or Android – Google uses a fluid layout technique for responsive email.

    3 points
  • Ed LeaEd Lea, 9 years ago

    am I not very good at detecting sarcasm, or is this actually broken? It's about as responsive as my pet hampster (which died when I was 9) https://www.dropbox.com/s/i309w8qrfz098ig/Screenshot%202014-07-01%2013.59.37.png

    2 points
    • Daniel ArcherDaniel Archer, 9 years ago

      Ya, it's not responsive in the way of resizing the browser window, but maybe "adaptive" is a better suited term. It's the first time Apple has made an email that looks great in Mail on iOS (for example).

      2 points
  • Rémi P.Rémi P., 9 years ago (edited 9 years ago )

    This is certainly not Apple's first responsive email. I first noticed they used a responsive email template back in last october. You can see the e-mail for the iPhone 5c and 5s, or for the Macbook Pro (in french).

    Also, if you're curious as to why they use max-device-width and not device-width, it's because some mail clients (like the Windows 8 Mail app or Outlook.com on IE9) incorrectly interprets device-width media queries even when they're not supposed to.

    1 point
  • Johnny LamJohnny Lam, 9 years ago

    That's awesome! I wonder when Apple will redesign their website and maybe be responsive?

    1 point
  • Daniel ArcherDaniel Archer, 9 years ago

    Open it on your Mac, but also check it out in Safari on iOS!

    1 point
  • Jesse Fornear, 9 years ago (edited 9 years ago )

    Interesting, this responsive email technique relies on media queries:

    @media only screen and (max-device-width: 320px) {

    }

    This targets max-device-width (not max-width), so adjusting the size of your browser window will not adapt the layout.

    Media queries aren't supported by the Gmail app on iOS or Android – Google uses a fluid layout technique for responsive email.

    0 points