Dengan iOS Mail menyumbang sekitar sepertiga dari semua email yang dibuka pada paruh pertama tahun 2017 , pembaruan untuk keluarga iPhone dan perubahan pada sistem operasi seluler dan klien emailnya dapat memberikan dampak besar pada dunia email. Sekarang, setelah acara besar Apple pada 12 September, kita tahu bahwa itu bukan hanya satu, tetapi tiga iPhone baru — iPhone 8, 8 Plus, dan iPhone X — yang akan segera masuk ke tangan konsumen, bersama dengan sistem operasi seluler baru. iOS 11.

Tapi apa artinya itu bagi pemasar email?

Meskipun iOS 11 tidak akan dirilis ke publik sebelum 19 September, versi golden master (GM) iOS 11 —yaitu versi sistem operasi yang akan dirilis ke publik dalam beberapa hari—telah tersedia untuk pengembang pada September. 12. Kami telah melihat dari dekat versi terbaru iOS dan pratinjau Apple dari ponsel baru mereka untuk merinci detail yang harus diketahui oleh setiap pemasar email.

Bagaimana tampilan email Anda di iOS 11? Lihat bagaimana iOS 11 merender email Anda dengan Pratinjau Email Litmus untuk iPhone X, iPhone 8, iPhone 8 Plus, dan klien dan perangkat email yang lebih populer. Pelajari tentang Pratinjau Email →

iOS Mail masih mendukung video HTML5

Bolak-balik Apple pada dukungan video HTML5 untuk klien email selulernya telah menyebabkan kebingungan di antara pemasar email selama bertahun-tahun. Apple mendukung video HTML5 di iOS 7, kemudian menghapus dukungan video dengan peluncuran iOS 8 kembali pada tahun 2014, hanya untuk memperkenalkannya kembali dengan rilis iOS 10 pada tahun 2016.

Kemudian, awal musim panas ini, komunitas email memperhatikan bahwa Apple mungkin telah berputar, dengan versi awal iOS 11 beta tidak menunjukkan dukungan untuk video HTML5 — lagi.

Jadi, apa masalahnya dengan video HTML5 di rilis final iOS 11? Pemasar yang menyukai interaktivitas dan kebebasan kreatif yang ditambahkan video HTML5 ke kampanye email dapat bernapas lega: Video masih didukung di iOS 11 , dengan dukungan di iPhone dan iPad.

Namun, perhatikan bahwa atribut poster (poster="") diperlukan untuk menampilkan gambar pratinjau video Anda di email. Sebelumnya, tanpa gambar poster yang ditentukan, bingkai pertama video akan ditampilkan. Namun, di iOS 11, video tampak kosong.

Ukuran & resolusi layar untuk iPhone 8 dan 8 Plus

Tidak ada perubahan ukuran layar pada iPhone 8. Baik iPhone 8 maupun iPhone 8 Plus memiliki ukuran dan resolusi layar yang sama persis dengan pendahulunya (iPhone 7 dan 7 Plus).

Dengan itu, semua kueri media yang ada untuk keluarga iPhone 7 akan berfungsi dengan baik untuk ponsel iPhone 8 baru.

iPhone 8 (Tampilan Zoom):

 @media screen and (max-device-width: 320px) and (max-device-height: 568px) { /* Insert styles here */ }

iPhone 8 (Tampilan Standar) dan iPhone 8 Plus (Tampilan Zoom):

 @media screen and (max-device-width: 375px) and (max-device-height: 667px) { /* Insert styles here */ }

iPhone 8 Plus (Tampilan Standar):

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { /* Insert styles here */ }

Ukuran & resolusi layar untuk iPhone X

Dengan iPhone X, Apple memperkenalkan ukuran layar baru ke dalam campuran.

Dengan diagonal 5,8 inci, layar di iPhone X lebih tinggi daripada yang ada di iPhone 8 Plus. Namun, yang penting adalah lebar layar pada iPhone X sama dengan lebar layar 4,7 inci pada iPhone 8. Peningkatan ukuran layar berasal dari fakta bahwa layarnya 145pt lebih tinggi daripada layar 4,7 inci.

Sementara lebih banyak ukuran layar sering berarti lebih banyak masalah — dan lebih banyak kasus untuk dioptimalkan — fakta bahwa lebar layar tetap sama adalah berita bagus untuk desainer email: Tidak ada perubahan lebar berarti bahwa kueri media yang ada juga akan berfungsi untuk iPhone X.

Kueri media iPhone X:

 @media screen and (max-device-width: 375px) and (max-device-height: 812px) { /* Insert styles here */ }

Pada saat yang sama, iPhone X menyediakan sekitar 20% ruang vertikal tambahan untuk konten—yaitu lebih banyak email yang ditampilkan di kotak masuk dan lebih banyak konten Anda yang terlihat setelah email Anda dibuka.

Memperbaiki masalah penskalaan di iOS 11

Masalah penskalaan otomatis di aplikasi email seluler Apple pertama kali muncul dengan rilis iOS 10 pada September 2016 . Dengan iOS 11, kami terus melihat bug ini. Seperti yang dilaporkan komunitas dalam beberapa diskusi Komunitas (lihat di sini dan di sini ), email tidak menjangkau lebar penuh layar tetapi tampak diperkecil dan tidak terpusat.

Anda dapat mencegah iOS 11 menskalakan email Anda secara otomatis dengan menambahkan sedikit kode berikut ke kepala email Anda:

 <meta name="x-apple-disable-message-reformatting">

Terima kasih banyak kepada Remi Parmentier karena telah membagikan perbaikan ini dengan Komunitas .

Optimalkan untuk kepadatan piksel tinggi

IPhone X hadir dengan Apple yang disebut Super Retina Display . Dengan 2436 x 1125 piksel—atau 458 piksel per inci—itulah kerapatan piksel tertinggi yang pernah ada di layar iPhone.

Dan dengan itu, mengoptimalkan gambar email Anda untuk layar DPI tinggi menjadi lebih penting dari sebelumnya. Jika Anda tidak memperhitungkan tampilan resolusi tinggi, Anda berisiko terlihat ceroboh di mata pelanggan. Karena cara kerja tampilan DPI tinggi, gambar yang tidak dioptimalkan akhirnya terlihat buram dan berpiksel pada layar retina. Berikut ini contohnya:

Anda dapat memastikan gambar Anda tampak tajam dan jelas dengan mengalikan jumlah piksel di setiap gambar dengan faktor skala tertentu. Dengan kata lain, buat gambar Anda dalam format yang lebih besar sehingga, ketika diperkecil dalam email, ada lebih banyak piksel untuk ditampilkan oleh layar retina. Untuk iPhone X dan semua versi Plus dari keluarga iPhone, Apple merekomendasikan faktor skala atau 3x; untuk semua tampilan lainnya 2x .

Namun, saat kami meningkatkan dimensi gambar, ukuran file juga meningkat. Peningkatan ukuran itu memotong paket data pelanggan dan dapat menyebabkan email dimuat dengan lambat. Kedua masalah tersebut merupakan masalah besar dan menciptakan pengalaman pengguna yang kurang ramah. Alat pengoptimalan gambar dapat membantu mengompresi gambar Anda untuk mengurangi ukuran file sekaligus memastikan email Anda terlihat bagus pada tampilan DPI tinggi.

Penargetan iOS 11

Tahun lalu, Remi Parmentier menemukan bahwa dimungkinkan untuk menggunakan deklarasi @supports di CSS untuk menargetkan iOS 10 secara khusus.

Kami dapat menargetkan iOS dengan properti berpemilik “-webkit-overflow-scrolling” yang hanya didukung di iOS. Jika kami menggunakan ini dalam kombinasi dengan salah satu properti yang didukung secara eksklusif di versi webkit terbaru iOS— Notasi warna #RGBA, misalnya—kami dapat secara khusus menargetkan iOS 10 dan yang lebih baru.

Berikut adalah kueri media yang akan menargetkan iOS 10:

 @supports (-webkit-overflow-scrolling:touch) and (color:#ffff) { /* Insert CSS here */ }

Jika Anda ingin secara khusus menargetkan iOS Mail di versi terbaru sistem operasi Apple—yaitu iOS 11.0, 11.1, atau 11.2—deklarasi @support yang dikombinasikan dengan properti padding akan membantu:

Targetkan iOS 11.0 & 11.1

 @supports (padding-left:constant(safe-area-inset-left)) { /* Insert CSS here */ }

Targetkan iOS 11.2

 @supports (padding-left:env(safe-area-inset-left)) { /* Insert CSS here */ }

Apakah Anda melihat pembaruan lain yang kami lewatkan? Beri tahu kami di komentar di bawah.

Bagaimana tampilan email Anda di iOS 11? Lihat bagaimana iOS 11 merender email Anda dengan Pratinjau Email Litmus untuk iPhone 8, iPhone 8 Plus, iPhone 7, iPhone 7 Plus. Pelajari tentang Pratinjau Email →