Scrollitelling : quel outil pour vos récits multimédias immersifs ?

Un an après Snow Fall, les formats multimédias immersifs (parfois baptisés « scrollitelling ») se multiplient sur les sites de presse, et des outils commencent à apparaître pour épauler les journalistes. Plateformes wysiwyg, extensions WordPress, scripts open source à coder : voici un panorama des solutions disponibles à ce jour.

 

1 » Les plateformes en ligne

Pas besoin de mettre les mains dans le code… ou si peu.

ScrollkitVainqueur final (CC/Edward Boatman)

Scrollkit

C’est actuellement la plateforme gratuite la plus aboutie. Son interface simple permet de construire votre récit pas à pas, de façon intuitive, en positionnant des objets dans des bandes (“strips”).

La fonctionnalité la plus puissante de Scrollkit est son module Skrollr, qui gère les effets de parralaxe de façon plutôt intuitive (à condition de connaître un peu de CSS). Vous pouvez créer des translations, des rotations et tout autre changement d’état de vos objets en fonction de la position du scroll dans la page.

La plateforme gère de façon imparfaite le responsive design pour l’affichage mobile, mais ce problème est réglable : le grand point fort de Scrollkit est en effet la possibilité d’exporter le projet en fichier HTML, et de le personnaliser à l’envie – sans aucune dépendance aux serveurs du service. Vous pouvez donc modifier les éléments un à un et les styles grâce au CSS – ou bien vous contenter de laisser le projet sur les serveurs de Scrollkit et l’embedder grâce à une iframe. Si vous êtes utilisateur de WordPress, la plateforme possède également une extension qui facilite l’intégration de votre projet à ce type de site.

Sans animation parralaxe :

Utilisation de Skrollr :

Un tuto en anglais sur l’utilisation basique de Scrollkit

Anglophone, Scrollkit n’est pas conçu pour gérer correctement les accents. Si vous devez les utiliser, rajoutez la ligne suivante après la balise dans votre fichier HTML pour changer l’encodage : <meta charset="utf-8" />

ShorthandPayant (CC/The Morning Sun)

Interface de Shorthand

Cette plateforme très prometteuse a pour seul défaut d’être payante. Encore en version bêta (des comptes de test sont fournis gracieusement par l’équipe sur demande), Shorthand est facturé aux médias au cas par cas – par histoire publiée ou sous la forme d’une license.

Beaucoup moins modulable que Scrollkit, Shorthand a l’avantage d’être parfaitement travaillé au niveau du design, très fluide sur les effets de scroll et extrêmement facile d’utilisation. Les histoires sont créées bande par bande selon trois modèles :

  • Texte sur image : peut être utile pour les séparations de chapitre ou les courtes légendes

  • “Background scrollmaton” : fine bande de texte au premier plan, succession de photos au scroll en arrière-plan

  • “Two-column scrollmaton” : défilement de photos au scroll d’un côté, texte de l’autre

  • D’autres formats pourraient être bientôt implémentés, et notamment des vidéos en pleine largeur

Des fonctionnalités sont progressivement ajoutées à la plateforme au fil des mises à jour de la version bêta : mise en forme du texte, feuilles de style personnalisées, menu de navigation… Des fonctionnalités spécifiques peuvent également être fournies par l’équipe sur demande, moyennant supplément. A l’issue de la création, Shorthand exporte un fichier HTML totalement indépendant de ses serveurs, à utiliser selon votre gré.

Autre point fort à noter : Shorthand est totalement “responsive”, s’adaptant parfaitement à toutes les tailles d’écran et tous les appareils de lecture.

Creatavist

Interface de Creatavist

Cet outil est la version publique de The Atavist, une plateforme américaine de publication de récits de fiction. Il produit de façon relativement intuitive des récits multimédias (plutôt pensés pour la fiction que pour le journalisme) avec de petits effets de parallaxe à partir des blocs suivants : texte, image, vidéo, pdf, galerie photo. Il permet également de faire apparaître au clic des petits “extras” (une image, une carte, une vidéo) et intègre nativement une barre de navigation horizontale entre vos chapitres.

La politique tarifaire de Creatavist est la suivante :

  • Une publication gratuite pour tous les utilisateurs de la version bêta (avec 150 Mo de stockage, mais forcément sur les serveurs d’Atavist)

  • Des publications illimités pour 10 $ par mois (avec 5 Go de stockage et l’utilisation de son propre nom de domaine)

Les possibilités de personnalisation sont relativement larges : intégration de son propre CSS, éditeur de texte, modification des thèmes…

L’astuce : pour que votre récit prenne une forme “snowfallesque”, il faut sélectionner le thème “Bahaus” plutôt que “Legacy Web Viewer” dans l’onglet “Visual”.

Fear Not Living par Clark Mindock, Nicole Vega et Angel Cerritos

Our Kindred Partners – Horses in the West

Berlin’s Streets of Shame par Andrew Connelly and Marine Leduc

Pas encore sorti (CC/Bohdan Burmich)Racontr

 L'interface de Racontr en version alpha (DR).

Cette plateforme n’est pas encore la ligne, mais elle est déjà la plus prometteuse du moment. Version 2 de l’outil Djehouti, bien-connu des créateurs de webdocs, Racontr sera lancé en version bêta privée en février, en bêta publique en mars et officiellement dans quelques mois.

Les démonstrations auxquelles nous avons assistées sont tout simplement stupéfiantes : une interface d’une grande simplicité, basée sur un concept central : le « timeline scroll », qui établit un pont entre le scroll de la souris et le temps qui passe (avec une compatibilité mobile/tablette, et un fonctionnement au sein des iframes). L’interface ressemble donc à un logiciel de montage vidéo et permet de gérer très facilement les animations avec des images-clés.

Le nombre de plugins supportés est impressionnant (Google map, vidéo, etc…), le design est « responsive » et tout est personnalisable : on peut y intégrer du CSS et du javascript à l’envie, des boutons interactifs pour naviguer au sein de l’histoire… Il sera possible de mettre en place des templates pour reproduire plusieurs histoires sur le même modèle, et de modifier les contenus directement depuis une interface simplifiée sur mobile.

Un programme d’autant plus alléchant que Racontr sera gratuit dans la limite de 500 mo de stockage (sans export), et avec une grille tarifaire raisonnable au-delà. Nous ne manquerons pas de vous tenir au courant de la sortie de cet outil sur ce blog…

One year of scrollitelling, la première démo publique de Racontr

Mais aussi…

  • Exposure, une plateforme orientée exclusivement vers la photo, avec une version gratuite et des licences pour utiliser son propre nom de domaine (voir un exemple)

2 » L’outil open source

Beaucoup plus modulable, mais nécessite de savoir (un peu) coder.

sStoryVainqueur d'étape (CC/Edward Boatman)

Il s’agit d’un outil 100% open source signé EJ Fox, modifiable, personnalisable et réutilisable. Une fois le template de base téléchargé, il faut plonger un peu les mains dans le code en définissant le contenu de votre histoire avec un fichier JSON.

Heureusement, le créateur a mis en place un générateur très pratique pour créer le JSON qui servira de base à votre histoire, pour vous économiser du temps et des efforts. Il existe également un tutoriel vidéo pour se familiariser avec l’outil.

L’outil, qui fonctionne en “responsive design”, permet d’aligner les uns après les autres les contenus suivants :

  • Grandes images (avec ou sans texte)

  • Vidéos Vimeo

  • Sons Soundcloud

  • TimelineJS

  • Texte simple

  • Diaporamas

  • Morceaux de code Gist

3 » Les extensions WordPress

Beaucoup plus modulable, mais nécessite de savoir (un peu) coder.

Aesop Story EngineVainqueur d'étape (CC/Edward Boatman)

Image de prévisualisation YouTube

Ce module WordPress permet de créer une histoire de A à Z sans toucher une ligne de code.

Impressionnant de facilité et de beauté, il rajoute un bouton “add component” sur la page d’édition des articles, qui mène vers un menu permettant d’intégrer :

  • Audio

  • Vidéo

  • Image

  • Texte

  • Gallerie photos

  • Marqueur de chapitre

  • Carte

  • Timeline

  • Citation

  • Documents

  • Effets de parallaxe sur les images

Pour tirer le meilleur parti de ce module, il est toutefois conseillé d’utiliser un thème WordPress spécifique, même si les créateurs ont mis à disposition un thème basique.

Les belles démos de l’outil fabriquées par les créateurs.

Il existe une version d’Aseop hébergée sur leurs serveurs, sans besoin d’une installation wordpress. Elle est pour l’instant en version bêta privée. A surveiller.

Page Builder

Wordpress Page Builder

Cette extension fonctionne sur le même modèle qu’Aesop. Elle rajoute un onglet à la page de création d’article de WordPress, et permet de construire pas à pas des pages en ajoutant des composants dans des blocs totalement personnalisables. Elle n’interfère donc en rien avec votre installation WordPress et vous permet de continuer à l’utiliser de façon classique quand vous ne recourrez pas à l’onglet Page Builder (contrairement à Aesop).

Si Page Builder possède l’avantage d’être « responsive », et donc adapté au mobile, le panel des widgets qu’il propose reste assez limité, et il n’existe aucun système de parralaxe. Il propose des modules complémentaires et des thèmes pour customiser l’apparence de vos productions, mais reste quand même un cran au-dessous d’Aesop.

Une vidéo de présentation de l’extension

4 » L’application iPad

Quand vous n’êtes pas à proximité d’un ordinateur.

StorehouseVainqueur d'étape (CC/Edward Boatman)

Storehouse

Cette application lancée début 2014 est tout simplement géniale. 100% gratuite, elle permet de composer un scrollitelling ultra-ergonomique et totalement « responsive » avec grande facilité. Pour preuve : il m’a fallu 1 minute 30 pour composer cet exemple.

En quelques mouvements de doigt, vous pouvez composer, ajuster et redimensionner des blocs de texte, des images (stockées sur votre iPad, sur Flickr, Instagram ou DropBox) et des vidéos (limitées à 30 secondes, elles sont jouées en boucle comme un Vine), dans la limite de 50 objets multimédias par histoire.

Plutôt pensé pour les particuliers, Storehouse n’est pour l’instant guère tournée vers les journalistes. Il est impossible d’exporter les histoires – il faut donc se contenter d’un lien sur les serveurs de Shorthand. Malgré les nombreuses demandes des médias, l’équipe a indiqué au site Journalism.co.uk qu’elle était plutôt déterminée à se focaliser sur le grand public. Espérons qu’elle change bientôt d’avis.

Bonus » Les histoires codées « à la main »

Voici quelques exemples de « scrollitellings » publiés dans les médias français et mondiaux, réalisés sans outil particulier, grâce au dur labeur de développeurs et de graphistes.

Les meilleurs exemples :

Juste pour votre inspiration :

Quelques scripts pour vous aider :

Ils vous permettront de mettre en place des effets de parallaxe :

Quelques lectures pour finir :

N’hésitez pas à :

  • Nous suivre sur TwitterFacebook ou Scoop It
  • Faire part de vos remarques dans les commentaires, suggérer d’autres outils ou donner votre avis sur cette sélection
  • Vous abonner au flux RSS du blog
  • Partager cet article :

4 thoughts on “Scrollitelling : quel outil pour vos récits multimédias immersifs ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>