Solutions Ingeniux pour environnements mobiles

Ces dernières années, la variété et la disponibilité des appareils capables de se connecter à Internet ont explosé. Des smartphones aux tablettes, la manière de parcourir et d'afficher Internet est en constante évolution. Les normes de conception et de développement Web doivent s'adapter pour répondre aux demandes de cette nouvelle technologie. Une conception adaptative et des sites Web pour environnements mobiles sont deux nouvelles tendances de conception Web qui ont émergé pour répondre aux besoins des nouveaux appareils. 

Éléments importants

  • Page Builder pour conception visuelle par « glisser-déposer »
  • Modèles 100 % Native Bootstrap 3 ou Foundation
  • Optimisation automatique de l'image
  • Bibliothèque d'appareils mobiles complète
  • Aperçu sur ordinateur, tablette, smartphone    

Conception adaptative

La conception adaptative est la dernière tendance en matière de développement Web. Elle implique des mises en page Web modulables qui s'adaptent automatiquement à la taille d'écran de l'appareil utilisé. Étant donné que la conception adaptative vous permet de diffuser un ensemble de contenu avec une seule conception sur les sites Web d'ordinateurs, les tablettes et les smartphones, elle a rapidement été adoptée dans le secteur du Web.   

Rendre la conception adaptative possible

La bonne nouvelle est qu'avec la commercialisation de nouveaux appareils tels que les iPhones d'Apple et les téléphones Android de Google, la compatibilité des navigateurs avec les normes Web augmente en conséquence. Les feuilles de style en cascade (CSS) permettent aux concepteurs de gérer la mise en page indépendamment du contenu. Les innovations en matière de CSS jettent les bases de la conception adaptative. À mesure que les normes Web augmentent, de nouvelles spécifications sont ajoutées par le W3C, l'organisme responsable de la création de directives sur le développement et les navigateurs Web. Un nouvel ensemble de règles CSS utilisant les requêtes média permet aux formats HTML5 et XHTML de s'adapter aux différentes tailles d'écran, peu importe le type d'appareil. Les développeurs Web peuvent désormais dimensionner les polices de caractères, redimensionner les graphiques, et même modifier leur mise en page en fonction de la taille de l'écran.

Page Builder Ingeniux CMS à conception adaptative

Ingeniux CMS fournit un créateur de page à conception visuelle adaptative qui permet aux concepteurs et aux responsables marketing de mettre à jour ou de créer des modèles et des mises en page de sites Web à l'aide de la conception adaptative. Le créateur de page utilise une grille adaptative basée sur les structures Twitter Bootstrap ou Foundation. Les mises en page peuvent être facilement modifiées afin d'ajouter ou de supprimer des lignes ou des colonnes, d'ajouter des éléments de contenu ou de nouveaux éléments pour l'édition de contenu.

Recommandations pour une conception adaptative réussie

Avec la conception adaptative, vous disposez d'une série de points d'interruption en fonction de la taille d'écran visée. De manière générale, la plupart des sites adaptés auront une vue plein écran pour ordinateur de bureau ou iPad tenu à l'horizontal, une vue réduite qui conserve une structure en colonne pour iPad tenu à la verticale, et une troisième vue sans colonnes, idéale pour les plus petits appareils, comme un iPhone. La plupart des sites Web adaptés ont des points de rupture définis à 1 200 pixels, 979 pixels, 768 pixels et moins. Avec chaque point de rupture, vous pouvez insérer du code pour masquer ou afficher des éléments, ou bien modifier la position d'un élément et adapter la taille de votre contenu à la taille de l'écran. Ces tailles peuvent également être définies à l'aide de jQuery ou JavaScript si des éléments doivent être ajoutés ou supprimés de manière dynamique. 

Points de rupture pour conception adaptative (extraits de la table d'appareils compatibles avec Twitter Bootstrap)

 

Type d'appareil Largeur de mise en page Largeur de colonne Largeur d'espacement
Affichage large (p.ex., TV HD) 1 200 pixels et plus 70 pixels 30 pixels
Par défaut (p.ex., ordinateur de bureau) 980 pixels et plus 60 pixels 20 pixels
Format portrait tablettes (p.ex., iPad) 768 pixels et plus 42 pixels 20 pixels
Téléphones et tablettes (p.ex., iPhone ou iPad) 767 pixels et moins Colonnes flexibles, pas de largeur fixe
Téléphones (p.ex., iPhone) 480 pixels et moins Colonnes flexibles, pas de largeur fixe

 

Le processus de codage pour tout site à conception adaptative consiste à développer une vue pour ordinateur de bureau, puis d'utiliser les requêtes média basées sur les normes pour redimensionner les éléments en fonction des largeurs minimale et maximale. Le plus large éventail de navigateurs pourra ainsi être pris en charge. N'étant pas compatibles avec la conception adaptative, les navigateurs les plus anciens, tels qu'Internet Explorer 8 et versions précédentes, afficheront par défaut la vue pour ordinateur de bureau. Ingeniux recommande que vos mises en page à conception adaptative dans Adobe Photoshop ou Illustrator correspondent à au moins trois des vues et points de rupture recommandés pour ordinateurs de bureau, tablettes et smartphones. Ainsi, Ingeniux peut ajouter simplement un fichier CSS personnalisé pour concevoir votre site en fonction de votre stratégie de marque.

Votre stratégie de conception adaptative

L'architecture Ingeniux CMS permet d'intégrer la conception adaptative au sein d'un site Web nouveau ou existant et ce, de manière assez simple. Il existe plusieurs stratégies que vous pouvez utiliser pour intégrer la conception adaptative et qui dépendent de l'état de votre site Web et de l'impact du changement d'affichage sur le contenu. Pour les nouveaux sites Web ou les restructurations complètes à l'aide d'Ingeniux CMS, la conception adaptative doit être sérieusement envisagée. Grâce à la conception adaptative, votre stratégie de contenu est plus que jamais importante, car votre contenu déterminera la priorité de vos éléments de conception, leur comportement après redimensionnement de l'écran, et ce qui s'affiche dans chaque vue. À partir de votre stratégie, vous pouvez définir des schémas Ingeniux contenant l'ensemble de votre contenu, et dans certains cas, vous pouvez avoir trois versions différentes d'un seul élément ou composant qui serait affiché sous certaines conditions. Pour les sites Web qui existent déjà, le processus est moins simple. Il est souvent difficile d'adapter une conception existante. L'adaptation fonctionne mieux lorsque le site est conçu dès le départ pour s'adapter à différents formats et différentes tailles. Souvent, avec une conception de site Web existante, ou avec des sites Web dont une grande partie du contenu est conditionnelle du fait de l'intégration d'applications externes, de mises en page basées sur des tableaux ou d'autres difficultés, il est préférable de développer une vue spécialement dédiée aux environnements mobiles. 

Sites Web dédiés aux environnements mobiles

Ingeniux offre la possibilité de détecter un appareil mobile et de diffuser un contenu optimisé en fonction de cet appareil. Grâce à Ingeniux CMS, les utilisateurs peuvent définir un environnement Web mobile qui utilise une nouvelle conception, mais délivre du contenu existant. La version mobile de votre site Web sera affichée sur des appareils mobiles et des tablettes compactes et s'adaptera à la taille de l'appareil. Dans ce scénario, vos URL existantes restent inchangées, comme dans une conception adaptative standard. Pour schématiser, vous créez simplement une zone séparée dans l'arborescence du site pour les pages destinées aux environnements mobiles. Avec la détection de l'agent utilisateur, vous pouvez ensuite diffuser un ensemble différent de contenu optimisé pour les environnements mobiles en fonction du contenu existant sur les pages Web dédiées aux ordinateurs de bureau. Tout comme dans la conception adaptative, vous pouvez toujours ajouter de nouveaux éléments aux pages de contenu qui ne s'afficheraient que sur des écrans d'appareils mobiles plus petits.

Compatibilité d'Ingeniux avec plusieurs appareils

Depuis son lancement, Ingeniux prend en charge le contenu sur plusieurs plates-formes. Nous avons en outre apporté des améliorations à CMS 8 qui permettent à tous les utilisateurs d'utiliser facilement plusieurs appareils. Ingeniux CMS offre une structure pour la détection d'appareils mobiles multifonctions. Plutôt que d'avoir à détecter manuellement les appareils mobiles, le CMS inclut une bibliothèque complète d'appareils qui est mise à jour toutes les semaines. Vous pouvez ainsi toujours distribuer le contenu approprié sur une vaste gamme d'appareils.  De plus, Ingeniux CMS vous permet de prévisualiser votre site sur iPhone, iPad ou tout autre écran d'appareil mobile. Il s'agit là d'un moyen fantastique de définir du contenu différent pour les appareils mobiles et de le prévisualiser avant de le publier sur votre site. Il permet également à vos utilisateurs de savoir exactement ce qu'ils intègrent au site pour chaque plate-forme mobile. Plutôt que d'afficher les éléments de manière adaptative en fonction de requêtes média CSS, les sites Web pour environnements mobiles uniquement utilisent la détection de l'agent utilisateur. Ingeniux intègre également jQuery Mobile qui permet d'afficher les éléments en version mobile et de faciliter les interactions tactiles, telles que taper et balayer.

Votre stratégie de contenu pour les environnements mobiles

Que vous choisissiez la conception adaptative pure ou une architecture distincte pour environnement mobile, votre stratégie de contenu et votre contenu existant seront des facteurs importants.  Vous devez vous demander si le contenu de votre site pour ordinateur de bureau est approprié à un appareil mobile. S'il s'agit d'une zone de texte basique, la réponse sera probablement oui, même si le contenu peut avoir besoin d'être raccourci. S'il s'agit d'une présentation en tableau, d'une vidéo à largeur fixe, ou d'autres éléments qui modifieront la mise en page lors du redimensionnement, la réponse sera non. Vous aurez peut-être besoin de créer de nouveaux éléments ou des schémas pour gérer les données supplémentaires. Dans certains cas, il ne sera peut-être pas possible de réutiliser le contenu. Par exemple, si vous intégrez une application externe avec un iFrame et qu'elle ne se redimensionne pas, ce contenu sera automatiquement coupé. Dans la plupart des cas, un nouveau site pour environnements mobiles est une bonne occasion d'examiner le contenu existant, de le simplifier, et de supprimer des informations obsolètes.

Le futur d'Ingeniux et des appareils mobiles

À mesure de la sortie de nouveaux appareils mobiles et de nouvelles tablettes, ainsi que de l'augmentation des solutions techniques à notre disposition, notre stratégie change en conséquence. Ingeniux cherche en permanence à simplifier et améliorer chaque projet client, et pour cela, nous devons sans cesse modifier notre stratégie. Nous affinons constamment notre bibliothèque de codes pour environnements mobiles et cherchons les moyens d'intégrer plus étroitement la conception adaptative et l'approche de site Web unique. Uniformiser notre approche et adopter les nouvelles tendances du secteur permettront d'assurer l'actualisation de notre stratégie dans un secteur en perpétuel changement.

Démarrer

Ingeniux se tient à votre disposition pour discuter d'une conception adaptative ou d'un projet de site Web pour environnement mobile. Des sites Web à conception adaptative traditionnelle peuvent être mis en œuvre sous n'importe quelle version d'Ingeniux, avec les mises à jour requises pour vos schémas et CSS. Pour un site mobile dédié, nous vous recommandons d'utiliser la dernière version d'Ingeniux qui fournit des outils mobiles importants, notamment l'aperçu initial sur plusieurs appareils et la détection d'appareils mobiles.