Le guide rapide et sale pour créer des sites Web dans InDesign

Nous savons tous que pour créer un site Web tout en chantant avec le logiciel Adobe, vous aurez besoin de Muse, Dreamweaver ou Edge Reflow. Mais quand il s'agit d'un site Web rapide et sale, qu'en est-il d'InDesign? Après tout, InDesign dispose de capacités d'exportation HTML depuis quelques années, n'est-ce pas?

Par le haut, je peux penser à une belle gamme de projets appropriés pour un tel flux de travail. Je ne doute pas que vous le puissiez aussi. Tout d'abord, tout travail de maquette et de présentation pourrait plus facilement être produit en ID par un concepteur qui l'utilise comme application principale au jour le jour.

De plus, bien que la complexité retienne toute l'attention, le fait est qu'il existe de nombreux sites sur le Web qui sont simples, contenant des titres, des illustrations et du corps de texte - ce serait un autre bon match. Et qui n'a jamais vu un client vous demander de créer du matériel marketing dont le contenu est destiné à la fois à l'impression et au Web?



Et si vous y prêtez attention, Adobe a progressivement ajouté de plus en plus de capacités multimédias et d'interactivité à l'identification au cours des dernières années. Certes, ces ajouts ont été ouvertement ciblés sur leurs autres options d'exportation - EPUB, Flash, SWF - mais cela laisse penser qu'InDesign devenait probablement plus performant dans sa sortie HTML, n'est-ce pas?

Eh bien, peut-être pas. J'ai essayé et voici ce qui s'est passé ...

Mise en place

J'ai démarré ID avec un grand sourire sur mon visage et une tasse de café chaud à mes côtés un matin cette semaine. J'étais tout prêt à jouer avec ces outils d'exportation HTML que j'avais vus auparavant, mais je n'ai jamais eu le temps de jouer avec. Oui, j'étais excité. De plus, j'ai naïvement supposé que cela allait être un jeu d'enfant parce que ces options existaient depuis si longtemps, elles doivent être bien polies maintenant, non? Oui, eh bien ... peut-être pas.

J'ai ouvert InDesign CC et choisissez Fichier> Nouveau ...> Document ( Ctrl / Cmd + N ), et là, vous verrez une option dans le menu contextuel «Intention» pour une utilisation «Web».

Choisissez-le et cela nous donne quelques critères de base de page Web remplis pour nous, et une option pour d'autres dimensions de page Web standard. Bien que la valeur par défaut de 800x600 semble très proche de 2007, j'ai opté pour ce test dans l'espoir que cela soulagera quelque peu le fardeau de la création de versions de formats multiples. La vie est un compromis, non?

J'ai alors commencé à créer une page de test qui ne me gagnerait jamais de prix de design, mais je voulais juste jeter quelques éléments de base de la page sur une page et exporter pour voir ce que j'obtiendrais.

Comme vous pouvez le voir sur l'image, je me suis replié sur une ligne de texte non système, deux cases, l'une avec une image et l'autre avec une couleur de remplissage unie et une forme de stylo-outil. J'ai également inclus quelques boutons de contrôle de navigation, juste pour voir s'ils fonctionneraient.

Première fois malchanceux

Ce que j'ai eu était un gâchis (et je ne parle pas du design pour le moment). Vous pouvez voir dans la première image d'exemple de page Web que la zone remplie et l'élément d'outil plume ne s'affichent même pas. Mais il en faut plus pour me dissuader. J'ai réessayé. Hmmm ... et encore.

J'ai pensé que si la boîte avec l'image JPEG apparaissait, cela pourrait faire la même chose en mettre une dans l'élément de l'outil stylo, alors j'ai créé un JPEG carré de 1 pixel dans Photoshop et l'ai glissé / déposé. Succès! Cela a fonctionné et dans l'image suivante du site Web rendu, vous pouvez le voir.

Malheureusement, vous pouvez maintenant également voir comment les éléments n'étaient pas dans les bonnes positions. J'ai essayé comme je pourrais, notant que je pourrais penser à apporter une amélioration significative.

Je l'ai ensuite essayé dans le tout juste sorti InDesign CC 2014 .

Vous pouvez voir dans cette image que l'option d'exportation dans cette version a eu quelques améliorations. Il a rendu la zone de remplissage solide et un remplissage dégradé dans l'autre élément de l'outil Plume. Mais la mise en page était encore très fausse.

Mauvaise direction

J'ai réalisé que je n'agirais pas correctement et que cela n'allait certainement pas être aussi facile et indolore que je l'avais d'abord supposé. J'ai donc demandé des conseils d'experts dans ce domaine restreint. Encore une fois, à ma grande surprise, il y avait peu d'informations sur le sujet sur le Web, jusqu'à ce que je tombe sur un designer très talentueux avec de sérieux talents techniques nommé Michael Murphy.

Murphy a eu la gentillesse de prendre le temps de parler avec moi de ce sujet dont il en sait peut-être plus que quiconque. En fait, il est probablement prudent de dire qu'il avait apporté cela à un art élevé, comme avec ses autres créations visuelles. Il a pu apporter beaucoup de lumière sur ce sujet, et le partage en détail dans une série de deux cours sur le sujet publiés par lynda.com.

Les cours sont InDesign CS6 vers HTML et InDesign pour la conception Web .

Comment bien faire les choses

Murphy a expliqué: `` Lors de la réaffectation du contenu InDesign au format HTML, il existe deux chemins d'exportation intégrés: EPUB (mise en page fixe ou redistribuable dans CC 2014) ou HTML. Les deux destinations nécessitent une utilisation cohérente des styles (caractère, paragraphe et objet) tout au long de votre projet, et que tous les styles soient connectés à un équivalent HTML (par exemple, la balise p pour les paragraphes, h1, h2, h3, etc. pour les en-têtes, et em ou fort pour l'italique ou le gras, respectivement). Ceux-ci vous permettent de maintenir la structure et l'organisation de votre contenu, mais pas son apparence.

«Pour l'apparence, InDesign peut générer du CSS pour EPUB et HTML. Cependant, le CSS InDesign génère s'efforce de conserver les paramètres que vous avez appliqués à une mise en page d'impression (par exemple, un livre ou un article de magazine) et il y a trop de différences entre les expériences de lecture imprimées et à l'écran pour que cela produise résultats.

'Pour cette raison, il est peu probable que vous obteniez du début à la fin sans bricoler sous le capot et entrer au moins dans le CSS, sinon le balisage HTML lui-même.'

Il a poursuivi en expliquant que généralement, le HTML que vous obtiendrez d'InDesign sera plus utile si vous avez un CSS existant que vous ciblez (par exemple, un CSS standard que vous utilisez pour les projets EPUB, ou un CSS utilisé par votre site. ou son système de gestion de contenu).

Dans cette situation, vous pouvez simplement établir les connexions nécessaires entre vos styles InDesign et leurs balises HTML et classes CSS respectives. Ces options se trouvent dans les zones de balisage d'exportation des boîtes de dialogue Options de style de paragraphe, de caractère et d'objet. Dans le cas des styles d'objets, pensez à chaque objet auquel un style est appliqué en tant que DIV dans votre HTML et marquez-le en conséquence.

Des vérités froides et dures

Alors que l'exportation EPUB est plus prévisible, l'exportation Web tente toujours d'atteindre une cible en mouvement. Ainsi, l'exportation HTML d'InDesign ne vous donnera tout simplement pas une sortie Web facile de votre mise en page d'impression. Il ne vous donnera que votre contenu - texte et images, dans l'ordre souhaité - avec un balisage HTML approprié pour une réutilisation sur le Web. Même avec cette limitation, c'est un chemin plus rapide et beaucoup moins répétitif que de le faire manuellement, en particulier lorsque vous avez déjà établi la mise en forme et la hiérarchie dans InDesign.

«Par exemple, explique Michael, chaque mois, j'exporte un mois complet d'articles de magazine à partir de leurs mises en page InDesign vers HTML pour publication sur le site Web du magazine. Avec le marquage d'exportation intégré aux styles de mes modèles, le processus est rapide, relativement propre et élimine le travail répétitif et les erreurs humaines potentielles de l'équation. Donc, tirer pleinement parti de cette fonctionnalité se résume en fin de compte à des attentes réalistes et à la volonté de faire la préparation initiale nécessaire dans vos documents, modèles et styles.

Donc, oui, cela peut être fait et bien fait. C'est juste qu'il faut l'aborder de manière systématique et mettre en place un bon workflow. Tout cela signifie qu'il ne s'agit pas d'un simple projet ponctuel. Cela convient mieux à ceux qui ont des quantités raisonnables de contenu récurrent qui doivent être amenés sur le Web, et un système de gestion de contenu ou un flux de travail qui le prendront en charge.

Utiliser un plugin

Alors qu'en est-il d'un plugin? Heureux que vous ayez demandé! Si toutes ces informations ci-dessus vous font tourner un peu la tête, vous n'êtes pas seul. Pour les non-techniques, il existe l'alternative d'utiliser un plugin appelé In5, réalisé par Productions Ajar . In5 ajoute une option d'exportation supplémentaire, appelée 'Exporter HTML avec In5 ...' juste en dessous de l'exportation qui est nativement dans ID.

Les options de la boîte de dialogue d'In5 ont celles de la version native, ainsi que des sections supplémentaires comme le référencement. Les résultats, quand tout va bien, sont des pages Web et un site très utilisables. C'est une excellente option à avoir, en particulier dans un domaine de niche qui a peu d'options.

L'essentiel: ce serait bien si InDesign était le couteau suisse d'édition que j'espérais. Au crédit d'Adobe, ils travaillent dur pour nous apporter ces outils. Mais comme Michael Murphy me l'a fait remarquer, les différences entre les deux formats, papier et Web, sont si importantes que le fossé est difficile.

Mots: Lance Evans

Lance Evans est directeur créatif de Graphlink Media . Il a écrit des livres sur la 3D et a produit les séminaires 3DNY pour Apple et Alias .