Bande dessinée responsive

 

Le début

Il y a plusieurs années, j'ai développé un format pour la création de bandes dessinées destinées à être visionnées sur un appareil mobile. Lorsque j'ai commencé à parler à un ami de mes découvertes avec mobilecomicIl m'a interrompu et a dit

- Quelle bonne idée, réactive.

-Non, ce sont des bandes dessinées destinées à être visionnées uniquement sur un téléphone portable.

Son visage disait tout. D'une certaine manière, il travaillait dans un format incomplet. A-t-il été possible de créer un format d'édition de BD qui s'adapte aux mobiles et aux ordinateurs ?

Le problème

Les webcomics naissent au départ, pour être vus à partir d'un écran d'ordinateur, c'est-à-dire en format horizontal. L'irruption du téléphone portable et sa lecture verticale, rend très complexe l'adaptation des bandes dessinées d'un format à l'autre.

Une bande dessinée sensible doit être lue avec des sensations narratives similaires horizontalement et verticalement. Si les vignettes ont des poids différents, il sera impossible pour l'auteur de jouer avec le rythme et de chercher des ressources qui racontent de la même manière dans les deux formats. Une vignette qui occupe tout l'écran de l'ordinateur, peut paraître petite sur le mobile et perdre l'impact souhaité.

Une solution

Cette discussion avec mon ami a été l'étincelle qui m'a fait commencer à examiner le problème de la recherche d'un format adapté pour créer des bandes dessinées. Quatre ans et demi plus tard et après d'innombrables heures de maux de tête et d'apprentissage des notions de base du HTML et du CSS, ce que je présente ici est une solution. Il existe d'autres solutions. D'autres viendront. C'est une solution dans laquelle on s'accroche à certaines choses et on en abandonne d'autres. Une bande dessinée réactive est un format différent. L'expérience ne sera jamais comme celle que vous vivez en lisant une bande dessinée imprimée, mais c'est un format qui a d'autres qualités.

 

Universalité

Pour moi, cela a toujours été la clé du format. La raison qui a justifié les heures consacrées à cette recherche.

L'existence d'un format de bande dessinée qui peut être affiché sur un site web et être automatiquement consulté dans n'importe quelle langue et de n'importe où, en fait le format le plus accessible et le plus universel pour regarder des bandes dessinées. Sûrement pas le meilleur, mais certainement le plus universel.

 

Publications de qualité

L'autre défi est de parvenir à une publication de qualité, sans erreurs de formatage qui nuisent à la lecture de la bande dessinée. Construire une structure qui permette une expérience de lecture satisfaisante.

 

Poids des balles

Si nous voulons que le lecteur ait une expérience de lecture similaire à partir d'un mobile ou d'un écran, nous devons obtenir des impacts visuels similaires dans les deux formats. Une vignette qui remplit tout l'écran d'un téléphone portable devrait également pouvoir remplir tout l'écran d'un ordinateur ou d'une tablette, de sorte que l'impact sur le lecteur soit le même.

Est-ce possible ?

 

Le mobile d'abord

À la question de savoir si c'est possible, ma réponse est oui. Oui, mais avec des limites. Nous n'aurons pas tout. Nous perdrons en cours de route certaines des libertés que nous donne une page blanche de papier. C'est la première chose que nous devons accepter pour pouvoir continuer.

Tout d'abord, nous devons choisir l'une des deux options comme dominante, voici la fameuse phrase Mobile d'abord ! Pourquoi ? Parce que c'est un format qui a plus de limites. Tout semble plus petit.

La première étape consiste à décomposer le poids des vignettes sur le mobile. Autrement dit, trouvez les différents types de vignettes qui peuvent être bien lues à partir d'un mobile et classez-les en fonction de l'espace qu'elles occupent à l'écran. D'un plein écran à une vignette d'une hauteur minimale et divisée en deux verticalement.

Ces puces marquent les options de formatage dont nous disposons.

 

Adaptation à l'horizontale.
Les grands renoncements.

Dans l'étape précédente, les seules options de vignette qui nous sont offertes ont été définies. Le format réactif oblige à renoncer à d'éventuelles vignettes qui fonctionnent très fortement à l'horizontale car elles ne peuvent être adaptées en respectant les hiérarchies de l'espace écran occupé.

Pour remplir les espaces dans la version horizontale, les balles doivent être regroupées en groupes de même hauteur.

 

Multilingue

Il s'agit d'un résultat de mon expérience en mobilecomique, que j'incorpore à la version réactive. Le fait d'avoir des textes en html rend les bandes dessinées traduisibles par les navigateurs. C'est la deuxième qualité qui renforce le caractère universel du format.

Il est vrai qu'il y a un problème de traduction. Nous devons nous efforcer de trouver des moyens de créer des traductions correctes et de les mettre en œuvre, car à l'heure actuelle, les traductions automatiques posent de sérieux problèmes. Depuis WordPress, il existe des plugins qui ouvrent ces possibilités.

 

Conclusion

Une bande dessinée réactive part de limites très larges et strictes, mais elle est une option pour créer un récit visuel. Tous les styles créatifs ne pourront pas s'adapter à ce type de bande dessinée, mais il y aura des choix artistiques qui le feront.

Le grand défi consiste à travailler sur des bandes dessinées conçues pour ce format et à obtenir des publications d'une qualité qui ait de la valeur pour les lecteurs.

Est-ce possible ?

À l'adresse suivante : cette page Je publie les histoires que je crée avec ce système.
 
Et voici un schéma des différents types de vignettes que j'ai pu présenter.

Groupe A
Vignette de hauteur XL
Occupe tout l'écran
horizontalement et verticalement

Groupe B.
Hauteur des balles M
Deuxième degré d'importance.

Groupe B.
Structure 1:1

GroupC.
Balles de hauteur M.
Un des deux se sépare.
Structure 1:2.

GroupC.

GroupC.

Groupe D.
Balles de hauteur M.
4 blocs qui sont regroupés par paires.
Structure 2:2.

Groupe D.

Groupe D.

Groupe D.

Groupe E.
Balles de hauteur S.
Structure 1:1.

GroupE

GroupF.
Balles de hauteur S.
Structure 2:2.

GroupF

GroupF.

GroupF.

GroupG.
Balles de hauteur S.
Structure 1:2.

GroupG

GroupG