Définitions et Conception Adaptative

Étape 2 - Modèle >

Définitions et Conception Adaptative

Previous pageReturn to chapter overviewNext page

Du fait de la diffusion croissante des dispositifs mobiles et de leur fréquence d'utilisation pour accéder à Internet, avant de réaliser un nouveau Site Web, vous devez prendre en compte le public auquel vous souhaitez vous adresser et décider si vous voulez le concevoir de manière à l'optimiser uniquement pour l'affichage sur Bureau, ou bien pour la navigation sur n'importe quel type de dispositif. Un Site Web dont la mise en page et les contenus peuvent s'adapter aux dimensions du dispositif sur lequel il s'affiche, que ce soit un bureau, une tablette ou un smartphone, est qualifié d'adaptatif.

Bien qu'il s'agisse de la solution recommandée, la procédure pour rendre un Site Adaptatif n'est pas obligatoire. Selon le Projet, la réalisation d'une double version bureau/mobile du Site peut, par exemple, représenter la solution la plus pratique. Dans certaines circonstances, par ailleurs, l'optimisation de base garantie par WebSite X5 peut suffire, puisqu'elle exploite la capacité des Navigateurs à zoomer les Pages pour leur permettre de s'afficher sur les dispositifs mobiles.

Pour plus d'informations, voir Comment créer un Site Web "Mobile-friendly"

Dans cette section, vous pouvez donc définir le type de Site que vous souhaitez réaliser, au choix entre :

Site Bureau : le Site sera optimisé pour l'affichage sur Bureau. Cela signifie que le Site s'affichera sur les dispositifs mobiles de la même manière que sur le Bureau: la mise en page et les contenus ne seront pas modifiés en fonction de la définition mais uniquement zoomés par le Navigateur.
Site Adaptatif : le Site sera optimisé pour l'affichage sur n'importe quel type de dispositif, du Bureau au smartphone, afin de permettre la meilleure expérience d'utilisation possible aux Utilisateurs, indépendamment du dispositif qu'ils utilisent pour la navigation.

Si vous choisissez de réaliser un Site Bureau, vous devez définir la :

Définition du Site  : indique la valeur exprimée en pixels pour la largeur des Pages du Site. La valeur configurée par défaut varie selon le Modèle choisi, vous pouvez toujours la modifier en toute liberté.

La valeur de la Définition du Site configurée par défaut est calculée pour obtenir un Site optimisé pour un affichage à 1024x768 pixels.

Si, au contraire, vous choisissez de réaliser un Site Adaptatif, vous devez définir les points de rupture.

Un point de rupture est un point, sur la ligne idéale qui exprime la définition des éventuels dispositifs sur lesquels un Site peut être affiché, où se trouve une modification quelconque de la mise en page de la Page.

Pour plus de clarté, un schéma s'affiche dans la fenêtre et met à l'échelle les principales typologies de dispositifs.

Cliquez pour etendre/reduire

Sur la ligne des Définitions de Référence figurent les points de rupture correspondant aux définitions généralement utilisées pour chaque dispositif :

Bureau : 960 px
Tablette avec orientation paysage : 720px
Tablette avec orientation portrait : 600px
Smartphone avec orientation paysage : 480px
Smartphone avec orientation portrait : inférieure à 480px

Immédiatement en dessous s'affiche la ligne des Définitions Configurées qui, par défaut, propose 3 points de rupture à l'ouverture d'un nouveau que nous pouvons identifier comme suit :

Bureau : définit les dimensions au-delà desquelles le Site s'affiche toujours avec la modalité bureau.
Intermédiaire : ce point de rupture sert à permettre un passage plus fluide de l'affichage bureau à l'affichage mobile.
Smartphone : définit les dimensions minimum en-dessous desquelles le Site s'affiche complètement linéarisé.

Par défaut, les définitions associées à ces 3 points de ruptures sont reprises automatiquement en fonction du Modèle actuellement sélectionné.

Sur la ligne des Définitions Configurées, les segments délimités par deux points de rupture, correspondant à l'intervalle de valeur pour lequel un affichage spécifique est prévu, prennent des couleurs différentes. Pour plus de clarté, les mêmes couleurs sont reprises également dans les icônes présentes dans le Tableau disponible dans la fenêtre Paramètres Adaptatifs et sur la Barre des définitions disponible dans la fenêtre Structure du Modèle et le Navigateur utilisé pour l'affichage du Site en Aperçu.

En plus de s'afficher sur la ligne des Définitions Configurées, les points de ruptures figurent dans un tableau qui indique les champs suivants :

Points de rupture : tous les points de rupture activés pour le Projet figurent dans cette colonne. Chaque point de rupture est identifié par la valeur de la définition à laquelle celui-ci est déclenché.
Affichages : tous les Affichages déterminés par les points de rupture figurent dans cette colonne. Chaque Affichage est accompagné de l'icône d'une petite boule, chacune d'une couleur différente: la même couleur est reprise sur la ligne des Définitions Configurées pour le segment correspondant à l'intervalle auquel s'applique l'Affichage. Pour plus de clarté, les mêmes couleurs sont reprises également dans les icônes présentes dans le Tableau de la fenêtre Paramètres Adaptatifs et sur la Barre des définitions disponible dans la fenêtre Structure du Modèle et dans le Navigateur utilisé pour l'affichage de l'Aperçu du Site.
Intervalles : dans cette colonne sont spécifiés les intervalles déterminés par deux points de rupture consécutifs pour lesquels les Affichages correspondants seront proposés. Pour l'Affichage Bureau, l'intervalle n'est pas compris entre deux points de rupture, mais défini de manière générique comme supérieur au point de rupture le plus élevé.

Pour intervenir sur la liste des points de rupture suggérés et sur les Affichages déterminés par ceux-ci, il suffit d'utiliser les commandes présents à côté du tableau :

Ajouter : ajoute un nouveau point de rupture en spécifiant la définition à laquelle il doit être déclenché. Vous pouvez configurer jusqu'à 10 points de rupture au total.
Modifier... : permet de modifier la valeur de la définition du point de rupture sélectionné.
Supprimer : élimine le point de rupture sélectionné. Tandis que le point de rupture Smartphone ne peut pas être éliminé, le point de rupture Bureau peut être sélectionné et enlevé, mais, de cette manière, le point de rupture suivant devient automatiquement le nouveau point de rupture Bureau. En éliminant un point de rupture, tous les paramètres associés à celui-ci (configurés à l'aide de la fenêtre Paramètres Adaptatifs) sont appliqués au point de rupture inférieur.  Il doit y avoir au moins 2 points de rupture : Bureau et Smartphone.

Comme on peut le voir, l'édition Pro offre la possibilité de gérer les points de rupture avec plus de liberté, en ajoutant jusqu'à 10 points de rupture, notamment ceux liés aux Affichages Bureau et Smartphone.

Il est impossible d'établir a priori combien de points de rupture doivent être activés : l'important est de configurer les points de rupture de manière à identifier des macro-catégories qui couvrent tous les cas et permettent de garantir une expérience d'utilisation satisfaisante sur tout type de dispositif.

Ainsi, en prenant par exemple un Site auquel a été appliqué un Modèle de 960 px de largeur, les 3 points de rupture configurés par défaut déterminent 4 intervalles, correspondant à 4 modalités différentes d'affichage :

Point de rupture : 960px - Affichage Bureau - Intervalle : Supérieur ou égal à 960px

Pour les définitions supérieures à celle configurée pour le point de rupture Bureau, le Modèle configuré pour le bureau Affichage bureau (défini également à l'aide de la fenêtre Structure du Modèle) est utilisé et les contenus sont placés selon la construction des Pages effectuée à l'Étape 4 - Pages.

Point de rupture : 720px - Affichage: Affichage 1 - Intervalle : Compris entre 959px et 720px

Pour des définitions comprises entre le point de rupture Bureau et le point de rupture Intermédiaire, le Modèle se présente en fonction de ce qui a été défini pour cet Affichage  dans la fenêtre Structure du Modèle est utilisé. Dans ce cas, la largeur du Contenu de la page est fixée à la définition établie pour le point de rupture Intermédiaire: étant donné que la fenêtre du Navigateur peut s'élargir jusqu'à la définition fixée pour le point de rupture Bureau, l'espace excédentaire est occupé par le Arrière-plan de la page. Les Objets des Pages, en revanche, sont disposés comme dans l'intervalle précédent, correspondant à l'affichage Bureau.

Dans l'édition Pro ce point de rupture peut être modifié ou supprimé et, contrairement à l'édition Evo, les Objets des Pages, en revanche, sont disposés selon la configuration définie pour cet Affichage dans la fenêtre Paramètres Adaptatifs.

Point de rupture : 480px - Affichage: Affichage 2 - Intervalle : Compris entre 719px et 480px

Pour les définitions comprises entre le point de rupture Intermédiaire et le point de rupture Smartphone, le Site est linéarisé: cela signifie que tous les Objets s'affichent l'un en-dessous de l'autre (en respectant l'ordre et le choix des Objets à rendre non visibles effectués dans la fenêtre Paramètres Adaptatifs). Comme pour l'Intervalle précédent, le Modèle se présente en fonction de ce qui a été configuré pour cet Affichage dans la fenêtre Structure du Modèle: la largeur du Contenu de la page est fixée à 480px, tandis que la fenêtre du Navigateur peut atteindre 719px et être occupée par le Arrière-plan de la page.

Dans l'édition Pro ce point de rupture peut être non seulement modifié mais aussi supprimé et, contrairement à l'édition Evo, les Objets des Pages ne sont pas linéarisés mais disposés en fonction de ce qui a été configuré pour cet Affichage dans la fenêtre Paramètres Adaptatifs.

Point de rupture: 0px - Affichage : Smartphone - Intervalle : Inférieur à 479px

Le Site s'affiche linéarisé. Le Modèle se présente en fonction de ce qui a été configuré pour cet Affichage dans la fenêtre Structure du Modèle et la largeur de la Page n'est pas configurée de manière absolue, mais de manière relative afin de toujours occuper 100% de l'espace disponible. Dans le Site linéarisé, tous les Objets s'affichent l'un en-dessous de l'autre (en respectant l'ordre et le choix des Objets à rendre non visibles effectués dans la fenêtre Paramètres Adaptatifs) et sont également configurés de manière à occuper 100% de l'espace en largeur.

Dans l'édition Pro aussi, ce point de rupture s'affiche pour compléter, mais il ne peut pas être modifié ni éliminé.

Si vous ouvrez avec l'édition Pro un Projet réalisé avec l'édition Evo, pour lequel le Site Adaptatif avait été activé, tous les points de rupture configurés sont automatiquement repris. En travaillant avec la version Pro il est ensuite possible d'activer de nouveaux points de rupture et/ou de modifier les points de rupture existants.

Lorsque vous lancez un nouveau Projet, le programme établit un Modèle prédéfini choisi par hasard: ce Modèle est conservé jusqu'à ce que vous choisissiez le Modèle à utiliser.

 


Bonnes pratiques :

-

Comment créer un Site Web Adaptatif