Création de sites web haute résolution à l’aide d’Adobe Muse

Améliorations dans Adobe Muse CC 2014.3 | Février 2015

Adobe Muse prend désormais en charge les écrans HiDPI sous Windows. Si vous utilisez un appareil Windows doté d’un écran HiDPI, vous remarquerez que l’interface d’Adobe Muse est beaucoup plus nette.

HiDPI (« High Dots Per Inch ») est un terme spécifique aux écrans à densité élevée de pixels ou simplement à haute résolution. Grâce à une densité accrue des pixels, les écrans HiDPI permettent un affichage plus détaillé du texte et des images que les affichages standard. Par exemple, l’écran Retina d’Apple disponible avec iPhone, iPad, certains appareils Windows, iPhone Touch et autres peut afficher du texte et des images haute résolution.

Les conceptions web créées dans Adobe Muse peuvent bénéficier pleinement de la qualité d’affichage fournie par les écrans haute résolution (HiDPI), comme les écrans Retina d’Apple.

Il est simple de bénéficier de l’affichage HiDPI dans Muse :

• Modification du paramètre de résolution de site en HiDPI.
• Création d’images d’au moins deux fois (x2) la taille qu’elles auront sur le site.

Lorsque vous téléchargez ou exportez un site HiDPI depuis Muse, le code généré inclut des images standard et x2 et détecte automatiquement les images à utiliser lorsque le site est affiché sur un écran HiDPI ou à résolution standard.

Activation HiDPI dans Adobe Muse

Le menu Résolution de la boîte de dialogue Site vous donne la possibilité de choisir entre l’affichage standard et HiDPI (x2).

Pour modifier le paramètre de résolution après avoir créé un site, sélectionnez Fichier > Propriétés du site.

Création de ressources avec des données d’image x2

Pour tirer pleinement parti des écrans HiDPI, vos fichiers doivent être d’une résolution plus haute pour obtenir un affichage de qualité supérieure. Au minimum, la taille d’un fichier doit être deux fois celle de l’affichage sur votre site.

Il est simple de créer des images x2. Une ressource x2 doit être d’au moins deux fois sa taille d’affichage à l’écran. Par exemple :

Lorsque vous importez un fichier HiDPI sur la zone de travail de la page web, Adobe Muse optimise l’image en réduisant la taille à 50 %. La réduction de la taille visuelle facilite une expérience de conception plus fluide et efficace. Ces images sont indiquées par « 2x » dans le panneau Ressources. Notez qu’Adobe Muse préserve les données du fichier d’origine pour permettre une densité accrue des pixels lorsque le fichier est affiché sur un écran HiDPI. Le texte pixellisé, ainsi que les effets rendus sous forme d’images, sont automatiquement générés à une taille standard et x2 (double) par Adobe Muse lors de la publication ou de l’exportation.

Pour vous assurer que vos ressources sont agrandies x2 (doublées) et contiennent ainsi suffisamment de données pour un affichage de qualité supérieure, vérifiez le panneau Ressources (Fenêtre > Ressources). Lorsqu’un fichier contient suffisamment de données, l’icône 2x s’affiche en regard de son entrée dans la liste. Si l’icône x2 n’apparaît pas en regard de votre ressource, il ne contient pas suffisamment de données pour un affichage de qualité supérieure et s’affichera avec une résolution standard.

Exportation d’images HiDPI

Il existe des cas spéciaux lorsqu’Adobe Muse n’exporte pas une image haute résolution, c’est-à-dire une image avec des données x2. Lorsque les images sont redimensionnées pour s’adapter aux conteneurs, notamment pour les pages comportant des images d’arrière-plan, les diaporamas en plein écran etc., Adobe Muse n’exporte pas une version HiDPI de l’image à la publication. Plus particulièrement dans les scénarios suivants, seule la version standard de l’image est exportée :

• Largeur de 100 % : Ajuster/Ajuster au fond
• Diaporama plein écran : Ajuster/Ajuster au fond
• Arrière-plan de navigateur/page : Ajuster/Ajuster au fond

Notez également que les images d’arrière-plan en mosaïque sont traitées différemment lorsqu’elles sont comparées aux images d’arrière-plan définies sur Ajuster/Ajuster au fond. Dans le cas d’images en mosaïque, Adobe Muse propose des images standard et haute résolution pour les écrans standard et HiDPI respectivement, lors de l’exportation du site web.   Dans Adobe Muse, si vous affichez en mosaïque une image haute résolution avec des données 2x, elle est traitée comme toute autre image et placée sur la zone de travail de la page web à 50 % de sa taille d’origine. A l’exportation, l’image redimensionnée de moitié (50 %) est exportée en tant qu’image à résolution standard, et l’image native en tant qu’image haute résolution avec des données x2.

Prise en compte des internautes

L’affichage HiDPI permet aux internautes de visionner un contenu web vidéo de qualité supérieure grâce à une quantité plus importante de données d’image. Les tailles d’image x2 donnent des fichiers d’images d’une taille 4 fois supérieure à une image de résolution standard. Pour afficher des images HiDPI, les internautes doivent charger 4 fois plus de données. Pour que le contenu s’affiche plus rapidement sur les sites HiDPI, Muse exporte les ressources HiDPI ainsi que les ressources de résolution standard. Les ressources de résolution standard sont chargées en premier, tandis que les ressources HiDPI se chargent progressivement par-dessus les versions standard.

Widget de bouton HiDPI (activé/désactivé)

Bien que la solution de chargement progressif soit pratique pour de nombreux internautes, elle peut être gênante pour les internautes disposant d’un forfait de données limité ou de toute autre connexion avec des quotas de téléchargement limités ou coûteux. Pour ces derniers, vous pouvez ajouter le widget de bouton HiDPI (activé/désactivé). Lorsque le bouton HiDPI (activé/désactivé) est placé sur une page, cette page charge tout d’abord uniquement la résolution standard et le bouton HiDPI s’affiche désactivé. Si l’internaute active le bouton HiDPI, toutes les pages contenant le bouton HiDPI (activé/désactivé) chargeront dès lors les images HiDPI, jusqu’à ce que l’internaute désactive l’affichage HiDPI, ferme son navigateur ou efface les cookies. Les pages qui ne contiennent pas de bouton HiDPI (activé/désactivé) chargeront toujours des images HiDPI lors de leur affichage sur un écran HiDPI ou Retina. Si le site n’est pas visionné sur un appareil avec écran Retina ou HiDPI, le bouton n’est pas disponible et seules les images de résolution standard sont chargées.