QuarkXPress est fourni avec une sélection de modèles soigneusement conçus pour vous permettre de démarrer rapidement la création d’un site Web réactif lorsque le temps est compté.
Mais vous pouvez vraiment montrer votre pouvoir créatif lorsque vous laissez les modèles derrière vous et commencez à créer vos propres pages. Vous pouvez le faire en utilisant l’outil Flex pour créer des conteneurs, en convertissant des éléments existants en conteneurs, ou peut-être plus utilement, en faisant glisser des blocs et des éléments dans la mise en page à partir de la fenêtre Flex Layout Blocks.
Le conteneur racine
Avec une mise en page fixe, vous pouvez littéralement prendre une page d’impression et la transformer en une page HTML5 fixe. Si vous avez juste besoin de créer un document imprimé et de lui donner une interaction de base, cela pourrait être la bonne solution. Pour Flex cependant, la structure de la page est importante. Comprendre cela est la chose conceptuelle la plus difficile à propos de Flex.
Essentiellement, pour que le navigateur Web (Safari, Chrome, Explorer, etc.) rende correctement la page de manière réactive, tout doit être à l’intérieur d’autre chose, avec un conteneur racine contenant toutes les autres choses. Utilisez la fenêtre Flex Object Browser pour voir comment cela fonctionne. Cela vaut la peine d’explorer cela en utilisant d’abord un modèle.
Si vous ne faites que quelques conteneurs à l’aide de l’outil flexible, ils ne seront pas les uns dans les autres. Cela peut sembler bien sur la page, et cela peut sembler bien sur certains sites Web, mais lorsqu’il est affiché sur un appareil différent, ce sera imprévisible et certainement pas ce que vous voulez. Cependant, cela ne doit pas être un problème car vous pouvez simplement les couper dans le Navigateur d’objets flexibles, puis les coller dans le conteneur de votre choix.
Les conteneurs peuvent être à l’intérieur d’autres conteneurs, et vous avez alors la hiérarchie des lignes, des colonnes et des objets. Les choses peuvent être à l’intérieur d’autres choses, à condition qu’elles soient toutes dans le conteneur racine.
Panneau des mesures : conteneur et flex
Si vous vérifiez le Panneau de mesures avec un objet Flex sélectionné, vous verrez alors deux nouveaux onglets : Conteneur et Flex. Le conteneur occupe toute la largeur dont il dispose. S’il s’agit du conteneur racine, il s’agit de la largeur de votre appareil ou de la fenêtre du navigateur. S’il se trouve à l’intérieur d’un autre conteneur, c’est la largeur qui lui a été rendue disponible par la façon dont ce conteneur est divisé.
L’onglet Conteneur du panneau des mesures détermine son contenu. Par exemple, « horizontal » signifie que les éléments à l’intérieur seront placés dans l’ordre horizontal ; « vertical » signifie qu’ils seront placés dans l’ordre vertical. L’emballage détermine ce qui se passe lorsque le conteneur devient trop petit pour les choses qu’il contient. Le conteneur peut également avoir un rembourrage qui agit comme une marge interne.
L’onglet Flex détermine comment il réagit lorsque le conteneur dans lequel il se trouve change de taille. Vous définissez essentiellement des règles sur ce qu’il doit faire : quelle est sa largeur maximale, quelle est sa largeur minimale, etc.
Vous pouvez définir toutes ces propriétés indépendamment, mais il existe un moyen plus rapide.
Blocs de mise en page flexibles
Window>Flex Layout Blocks vous donne des blocs que vous pouvez faire glisser sur des conteneurs pour créer rapidement la page. N’oubliez pas qu’après la mise en page initiale, vous devez toujours faire glisser quelque chose dans quelque chose. Si vous manquez, coupez-le et collez-le à l’aide du navigateur d’objets Flex.
Ces blocs sont des éléments flexibles essentiels qui ont déjà été préparés avec toutes les propriétés Container et Flex qui les feront fonctionner. Celles-ci ont été réalisées selon les normes du Web, vous n’avez donc pas à vous demander « qu’est-ce qu’une bonne quantité de rembourrage ? »
Il y a un fil d’Ariane utile au bas de ce panneau pour que vous puissiez voir où vous vous situez dans la hiérarchie.
Hors réseau
Vous remarquerez que lorsque vous créez la mise en page, cela vous permet de spécifier une grille. Cela aura beaucoup plus de colonnes que vous n’en utiliseriez généralement dans une mise en page papier basée sur une grille. Flex utilise cette grille pour déterminer comment les choses réagissent. Mais cela vous laisse avec la question : comment puis-je donner à mon site Web un aspect « conçu » plutôt que d’être simplement un tableau en bloc et grumeleux ?
La réponse est que vos éléments graphiques ne doivent pas nécessairement être rectangulaires. Vous pouvez l’obtenir en utilisant des fichiers PNG et des fichiers SVG à fond transparent (ou des graphiques vectoriels provenant d’autres sources que QuarkXPress convertira en SVG pour la sortie).
Dans la hiérarchie des conteneurs, chaque conteneur peut avoir sa propre image, ainsi que tout ce que font les choses à l’intérieur du conteneur. En d’autres termes, vous pouvez disposer des images en couches les unes sur les autres en utilisant des arrière-plans transparents, de sorte que les couches s’animent différemment les unes des autres et se déplacent différemment lorsque la fenêtre du navigateur est redimensionnée. Il faut quelques essais avant de réaliser à quel point c’est puissant. Après cela, vous devez vous empêcher de le rendre trop difficile.
Gardez-le propre
La plupart des animations disponibles sur les mises en page fixes sont également disponibles sur Flex. Avant d’aller trop loin, rappelez-vous que la mise en page est intrinsèquement auto-animée car les éléments se déplacent les uns par rapport aux autres lorsqu’ils sont redimensionnés. Trop de mouvement va juste confondre l’être humain qui essaie réellement de donner un sens à votre site Web. Alors restez simple, restez propre.
Procédure flexible suggérée
Lors de l’expérimentation, c’est amusant d’essayer toutes sortes de choses, mais à un moment donné, vous voulez travailler avec Flex et, à ce moment-là, vous avez besoin d’un bon flux de travail. Encore plus que pour l’impression, il est facile de se perdre dans les possibilités. Voici donc un flux de travail qui peut vous aider :
1) Objectif
Déterminer quel est l’objectif fonctionnel de ce site. Tout en découle.
2) Public cible
Qui va l’utiliser : des joueurs de 15 ans ou des directeurs de banque de 60 ans ? Non seulement le style, mais la méthode d’interaction et le degré de jeu changeront.
3) Message
Le site doit diriger l’utilisateur vers les messages clés. Cela signifie que, comme il fléchit, ils doivent toujours être proéminents.
4) Vignette
Esquissez une vignette de ce à quoi cela devrait ressembler sur une feuille de papier avant de commencer.
5) Éléments
Préparez vos éléments graphiques et textuels. Souvent, ceux-ci existent déjà en raison d’un travail d’impression ou de marque. Si vous souhaitez utiliser des objets transparents, assurez-vous de les enregistrer avec transparence au format PNG.
6) Construire sur la fenêtre de référence
Construisez la page à l’aide des blocs de mise en page afin qu’elle corresponde à votre vignette. Faites-le à la taille par défaut et testez-le en utilisant l’aperçu de la page HTML5.
7) Modifiez-le
Dans un navigateur de bureau, remodelez la page et observez comment elle réagit. Prenez des notes sur la façon dont il devrait réagir différemment. Revenez ensuite à l’onglet Flex du panneau Mesures pour apporter des modifications. Vous devrez peut-être également accéder au conteneur situé au-dessus. N’oubliez pas que les modifications que vous apportez aux paramètres du conteneur des objets affecteront les objets qu’il contient, et non son propre comportement.
8) Liez et animez
Lorsque le flex fonctionne comme prévu, ajoutez des liens et des animations, tels que des boutons de survol. C’est également le point d’ajouter du code HTML spécial que vous avez peut-être récupéré sous forme d’extraits de code. N’importe quel objet peut fonctionner comme un mini-site Web dans la page, servant tout ce que fait ce code.
9) Définir les balises alt et les métadonnées
Chaque élément graphique doit avoir sa balise alt définie, afin d’être compatible HTML5. Définissez-les un par un depuis Élément> Options d’exportation. Pour les objets qui n’ont pas de contenu, tels que les graphiques de remplissage, vous pouvez cocher la case « artefacts ». Définissez les métadonnées dans Layout>Metadata. Ce sera crucial pour les moteurs de recherche.
10) Déployer et tester
Lorsque le site (ou cette partie est prêt), déployez-le sur un serveur Web et testez-le sur des smartphones, des tablettes, des téléviseurs intelligents et différents navigateurs sur Mac et PC. Avec le Web, supposez que si vous ne l’avez pas testé, cela ne fonctionne pas.
Regardez le tutoriel sur Sites Web axés sur la conception.