Avatar for Martin Turner

by Martin Turner  |  mai 10, 2022

Explorer la création de sites Web avec QuarkXPress 2022

Content Design

S’adapter ou ne pas s’adapter lors de la création d’un site Web

Flex est une technologie qui redimensionne et repositionne automatiquement les éléments Web afin qu’ils fonctionnent sur n’importe quel appareil de n’importe quelle taille et de n’importe quelle forme. C’est ce qu’on appelle la conception Web réactive, utilisant une fonctionnalité intégrée de HTML5 appelée « flexbox ». Vous n’avez pas besoin de le savoir pour l’utiliser. De nos jours, presque tous les sites Web sont « réactifs », et la majorité utilise Flex.

Vous en voyez probablement immédiatement l’un des pièges : si l’appareil redimensionne et remodèle le site Web, comment savez-vous que l’intégrité de votre conception sera préservée ?

Il y a deux réponses à cela. La première consiste à tester, tester et retester sur une variété d’appareils. Parfois, vous voudrez peut-être tracer une ligne et dire « seulement les smartphones, les tablettes et les ordinateurs ». La seconde consiste à ne pas utiliser Flex mais plutôt l’ancienne méthode de création d’une série de mises en page fixes. Vous pouvez les créer dans QuarkXPress en utilisant «fixe» plutôt que «flex», pour insérer un script dans votre site Web afin que l’appareil choisisse automatiquement la taille la plus proche. Il s’agit également d’une forme de conception Web réactive.

En fin de compte, si vous souhaitez un contrôle absolu sur votre site Web, la création d’un ensemble de mises en page à l’aide de « fixe » vous donnera le meilleur résultat possible, mais cela prendra également plus de temps à créer et à mettre à jour.

La plupart des sites Web optent pour Flex.

Comment utilisez-vous Flex sur QuarkXPress 2022 ?

Lorsque vous créez une nouvelle mise en page, si vous cliquez sur « numérique » plutôt que sur « impression », vous obtenez l’option Fixe ou Flex. Choisissez Flex. Vous pouvez vous lancer directement en créant des éléments et en les spécifiant comme Flex, mais il est préférable de procéder par étapes. Flex fait de son mieux pour ressembler à de l’imprimé, mais ce n’est pas de l’imprimé et il se comporte d’une manière fondamentalement différente.

Essentiellement, avec Flex – et la plupart des choses en HTML5 – tout est contenu dans quelque chose d’autre, au lieu d’être placé sur la page comme c’est le cas avec l’impression. Si vous gardez cela à l’esprit, votre voyage Flex sera plus facile.

La façon la plus simple de voir cela est d’ouvrir Fenêtre> Navigateur d’objets flexibles et Fenêtre> Générateur de pages flexibles, et faites glisser l’un des modèles sur le document principal. Bien que ces modèles puissent sembler un peu spécifiques ou même difficiles, ils sont en fait très puissants et peuvent être personnalisés à l’aide des outils Quark que vous connaissez d’une manière que les modèles WordPress (par exemple) ne peuvent généralement pas.

Cliquez sur n’importe quelle case et vous verrez le changement du navigateur d’objets Flex pour vous montrer où il se trouve. Au niveau supérieur, vous avez le conteneur racine, puis une série de conteneurs, de lignes, de colonnes et d’objets.

Pour le moment, vous n’avez pas besoin de jouer avec eux, sachez simplement qu’ils sont là. La personnalisation du modèle vous prendra beaucoup de temps pour produire un site Web rapide lorsque cela doit être fait non seulement rapidement mais aussi correctement.

Principes de base de Flex dans QuarkXPress

Deux types de conception de sites Web sont populaires en ce moment. L’une est la mise en page structurée traditionnelle avec plusieurs pages. L’autre est une seule page que vous faites défiler vers le bas. Ce type est en fait plus facile à créer car vous concevez simplement une très longue page avec des éléments placés de manière séquentielle. À l’aide des modèles QuarkXPress Flex, vous pouvez faire glisser des modèles supplémentaires les uns après les autres. S’il a l’air ou se comporte bizarrement, vérifiez que vous n’avez pas fait glisser l’un dans l’autre : le navigateur d’objets Flex vous permettra de le voir.

Pour la mise en page multipage, vous créez plusieurs pages dans QuarkXPress, puis, à l’aide du panneau de mise en page et d’un clic droit/ctrl-clic, utilisez les propriétés de la page pour leur attribuer un nom Web et un nom d’affichage.

Votre page d’accueil doit s’appeler index.html pour son nom Web. Sinon, le navigateur ne le trouvera pas. Vous pouvez donner aux autres pages les noms que vous voulez, mais respectez les lettres, les chiffres, les tirets et les rayures. La plupart des serveurs Web font la distinction entre les majuscules et les minuscules, mais il est préférable de s’en tenir aux minuscules.

Lorsque vous créez des hyperliens, à l’aide du panneau des hyperliens, vous choisissez « page » plutôt que « URL ».

Pour le reste, vous pouvez appliquer n’importe quelle interaction à partir de la palette Fenêtre>HTML5, mais soyez prudent. L’époque de l’interaction multimédia sur les sites Web est révolue depuis longtemps et les gens sont habitués à la philosophie du « moins c’est plus ». Ma recommandation personnelle est de s’en tenir aux boutons et aux vidéos YouTube, et de laisser tout le reste.

Aperçu et publication

Vous pouvez déplacer la poignée à droite de la mise en page pour voir comment elle changera au fur et à mesure que la forme change, mais vous devez vraiment vérifier dans un navigateur. Au bas de l’écran, il y a un petit « globe » qui vous offre un aperçu de la page HTML. Cela ouvrira la page dans votre navigateur par défaut et vous pourrez voir comment elle apparaîtra. Les liens ne fonctionneront pas, c’est une seule page. Pour vérifier les liens, ouvrez l’aperçu de la mise en page. Cela l’ouvrira en fait comme une publication HTML5 plutôt que comme un site Web, mais ce sera bien de vérifier avec.

Pour publier, vous aurez besoin d’un espace Web, d’une URL (c’est-à-dire d’un nom Web) et d’un téléchargeur FTP. Pour le téléchargeur, vous pouvez essayer CyberDuck, qui est gratuit pour un don. Il s’agit alors simplement de Fichier> Exporter sous> HTML5, puis de faire glisser les fichiers sur votre site Web via CyberDuck (ou tout ce que vous utilisez). Tant que votre URL fonctionnait déjà, vous devriez pouvoir la voir immédiatement. Si vous ne pouvez pas, vérifiez que votre page d’accueil s’appelle index.html, et non Index.html ou toute autre variante.

Si vous venez tout juste d’acheter l’URL ou si vous venez de la pointer vers votre espace Web (demandez des instructions à votre fournisseur), il faut généralement 24 heures pour qu’elle soit disponible.

Quand utiliser Flex ?

Les modèles de QuarkXPress vous permettent de créer rapidement un site Web simple et élégant.

Pour plus de contrôle, vous pouvez créer le site à partir de rien à l’aide du panneau Flex Layout Blocks et de l’outil Conteneur, qui se trouve dans la palette Outils. Plus de contrôle, bien sûr, permet à plus de choses de mal tourner. Il est probablement préférable d’expérimenter d’abord les modèles intégrés. Lors de la construction avec les blocs de disposition flexibles et l’outil conteneur, utilisez le navigateur d’objets flexibles pour vous assurer que tout est au bon endroit.

Cependant, lorsque vous développez au-delà d’une simple page défilante ou d’un petit site Web structuré, il est souvent temps de recadrer le projet. Des outils tels que PineGrow peuvent transformer une mise en page QuarkXPress en une mise en page WordPress (un tiers de tous les sites Web et la moitié de tous les sites Web de systèmes de gestion de contenu utilisent WordPress). À ce stade, vous vous lancez dans un gros projet et il n’est probablement plus efficace de créer le code final dans QuarkXPress.

C’est à ce stade qu’il est préférable d’utiliser QuarkXPress pour développer un prototype (les grands sites Web passent par des mois de prototypage avant d’être prêts à coder). Les prototypes sont souvent réalisés dans PowerPoint, mais cette approche ne produit que des wireframes plats, et il peut y avoir un grand écart entre les attentes et la réalité. En vous permettant de prototyper un site Web Flex avec des éléments interactifs, QuarkXPress peut être votre arme secrète pour communiquer efficacement avec l’équipe de codage à chaque fois.

Regardez le didacticiel sur la création d’un « Site Web de 10 minutes. »

Copied to clipboard

Recent Blogs

S’attaquer à la complexité du contenu de l’entreprise – L’automatisation permet d’y parvenir facilement

  • |

Célébrer la créativité : L’enthousiasme de Naman Kumar pour le design avec QuarkXPress

  • |

La créativité sans frontières : La passion d’Ove Detlevsen pour l’imprimerie

  • |