Logo

Le superblog de l'email marketing Le blog emailing de référence par Sarbacane: retrouvez toute l'info de l'email marketing sur emailing.biz
clear image

L'astuce du jour

de Captain Inbox

Vous avez du mal à atteindre vos objectifs marketing ?

Je vous recommande Sarbacane, la meilleure application française pour créer et automatiser vos campagnes Email & SMS marketing.

Le plus : Les experts de Sarbacane suivent vos projets et vous aident à optimiser vos performances.

Captain Inbox
Par
Il lutte depuis toujours pour le Bien de l’emailing et apporte son aide auprès de ceux qui exigent le meilleur pour leurs contenus.
le 11 septembre 2014 | 0 commentaire

iPhone 6 : quel impact sur l’email responsive ?

Après l’annonce d’Apple concernant la sortie de son nouvel iPhone, il m’a semblé judicieux de jeter mon super-œil de lynx sur les impacts que l’iPhone 6 aura sur l’email responsive. 

L’iOS 8 n’apporte pas de changement majeure en termes de rendu des emails pour les utilisateurs cependant le fait de passer à une résolution d’écran supérieure marque une rupture avec les iPhones précédents et offre de nouvelles possibilités aux super-créateurs de newsletters.

Rappel du fonctionnement

Qu’est ce qu’un media queries ?

Pour adapter le design de votre email marketing aux écrans les plus larges comme les plus petits, il vous faudra utiliser les media queries. Il s’agit de règles qui appliquent des styles différents en fonction de la taille du support.

Exemple :  @media only screen and (max-device-width : 360px)

Dans l’exemple ci-dessus nous avons fixé la limite à 360px. Cela signifie que les mails ouverts sur un téléphone dont la largeur est inférieure à 360px CSS, afficheront la version optimisée. A quoi correspondent ces 360px ? Il s’agit de la largeur du téléphone (soit le plus grand côté) exprimé en Pixel CSS.

Qu’est ce que la surface réelle ?

C’est le nombre physique de pixels qui composent la matrice de l’écran, en d’autres termes il s’agit de la « définition ».

  • 320x480px pour l’iPhone 3
  • 640x960px pour l’iPhone 4
  • 640x1136px pour l’iPhone 5
  • 750x1334px pour l’iPhone 6
  • 1080x1920px pour l’iPhone 6+
  • 1080x1920px pour Samsung Galaxy Note 3
  • 1440x2560px pour LG G3

Qu’est ce que la surface en « pixels CSS » ?

Il s’agit du nombre de pixels virtuels que le terminal pense avoir pour afficher le message.

  • 320x480px pour l’iPhone 3
  • 320x480px pour l’iPhone 4
  • 320x568px pour l’iPhone 5
  • 360x640px pour Samsung Galaxy Note 3
  • 360x640px pour LG G3
  • 375x667px pour l’iPhone 6
  • 414x736px pour l’iPhone 6+

L’email responsive et les iPhones 6 et 6 Plus

Si vous avez bien suivi, vous comprendrez qu’en fixant le media queries à 360px, votre version optimisée ne sera pas prise en compte par les iPhones 6 et 6 Plus.

Pour y remédier, il vous faudra modifier la limite du media queries :

  • à 375px pour l’iPhone 6 : @media only screen and (max-device-width : 375px)
  • à 414px pour l’iPhone 6+ : @media only screen and (max-device-width : 414px)

Pour connaître la résolution d’une majeure partie de smartphones, cliquez ici.

Quelle est la limite idéale pour afficher la version responsive ?

Tout va dépendre de la manière dont est conçue la version optimisée et du rendu de la campagne sur les téléphones. En effet, l’objectif est d’apporter un confort de lecture à vos destinataires, ainsi nous vous conseillons de comparer les 2 versions pour fixer votre limite idéale.

L’optimisation sur les téléphones inférieurs à 480px de large est clairement indispensable dans tous les cas de figure.

Tags:

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués *


*