Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir le design responsive

Développer une stratégie de contenu

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Votre formateur vous explique comment aborder la question du contenu, notamment lorsque celui-ci impose des choix dans la manière de le consulter.

Transcription

La stratégie de contenu est vraiment au coeur du problème. Si aujourd'hui nous mettons en ligne des sites internet, c'est pour proposer des contenus aux utilisateurs mais également pour que ceux-ci puissent interagir avec ces contenus. Que ce soit des sites informatifs ou que ce soit des sites à visée commerciale, le problème reste le même : il faut que les contenus soient particulièrement bien présentés et adaptés au type d'écran sur lesquels ils vont être consultés. Voyons comment mettre en place une stratégie de contenu. Premièrement nous allons devoir identifier le contenu pertinent. Ensuite il va falloir organiser la structure de ce contenu et puis nous allons devoir également gérer ce contenu, et pour gérer ce contenu nous allons devoir savoir comment il va être réparti. Nous pouvons avoir un contenu réparti sur quatre colonnes et puis en fonction d'un point de rupture il va être ensuite réparti sur trois puis sur deux, puis sur une colonne et nous n'allons pas placer le même contenu ni dans la même disposition sur chacun de ces écrans. Il va donc falloir gérer ces contenus. Voyons par exemple une mise en page où nous allons proposer des produits. Ici nous avons dans un premier temps la présentation du visuel du produit, ensuite nous avons son descriptif et puis nous présentons des produits similaires et puis enfin la possibilité de passer la commande. Et sur un écran suffisamment large comme c'est le cas ici, vous voyez que cette disposition est tout à fait satisfaisante et que nous allons pouvoir dérouler un certain nombre de produits et que les utilisateurs vont pouvoir rapidement non seulement faire leur choix mais d'autre part recevoir des suggestions de produits complémentaires. À partir du moment où nous allons passer sur des écrans qui vont être de très faible largeur, la problématique va être différente puisque nous ne pourrons pas présenter les choses de la même façon. Nous serons dans une présentation qui ne sera plus une présentation dans la largeur mais une présentation dans la hauteur. La répartition du contenu va donc être différente et il va falloir gérer ce contenu, c'est-à-dire effectuer des choix et définir des priorités d'affichage des contenus. Vous voyez par exemple sur cet écran que la mise en panier ne peut pas apparaître en affichage de premier niveau. Pour gérer ces contenus, nous allons donc avoir des objectifs prioritaires qui vont être dans un premier temps de faire valoir le contenu le plus important du point de vue de l'utilisateur, et puis ensuite nous allons établir des relations claires et enfin nous allons faciliter l'accès au maximum sur les petits écrans. Nous allons donc commencer par lister le contenu. Nous pouvons ici définir qu'il y a le visuel du produit. Nous avons ensuite la présentation de produits similaires. Nous avons la mise en panier et nous avons la description du produit. Nous allons dans un deuxième temps hiérarchiser ces éléments. Nous pouvons décréter que le visuel produit est le plus important, ensuite la mise en panier pour nous est fondamentale car nous voulons que l'utilisateur puisse effectuer un achat d'impulsion, et nous allons ensuite placer la description du produit et puis enfin les produits similaires. Nous avons donc dans un premier temps défini les contenus et dans un deuxième temps nous les avons hiérarchisés. Nous allons maintenant voir comment répartir ces contenus en fonction des dispositions et en fonction des tailles des écrans pour les périphériques que nous ciblons. Nous pouvons sur quatre colonnes placer les éléments dans l'ordre suivant. Ce n'est pas un problème ici de placer la mise en panier en bout de colonne puisque même si c'est quelque chose qui est considéré comme important en termes de hiérarchie, vous voyez que il apparaît au premier niveau. Sur trois colonnes par contre, nous allons avoir à supprimer un des éléments et nous avons un choix à faire. Donc une fois que nous avons défini les contenus, hiérarchisé les contenus, au moment de la répartition de ces contenus nous allons devoir faire des choix et ici le choix a été de reléguer les suggestions de produits similaires ailleurs. Sur deux colonnes, nous allons pouvoir placer la description du produit sous le visuel du produit et placer en face le dispositif de mise en panier. Et puis sur une colonne, nous n'allons placer que les éléments fondamentaux, c'est-à-dire le produit et la mise en panier. Ça ne veut pas dire que les autres éléments qui ne font pas partie de notre choix primaire vont disparaître, mais simplement ils vont apparaître d'une façon qui sera complémentaire et qui ne sera pas Lorsque nous allons faire notre mise en page, nous allons partir du plus petit vers le plus grand et nous allons donc mettre en place les différents éléments pour réaliser notre mise en page. Vous voyez que ici nous avons des maquettes filaires extrêmement simplifiées à titre d'exemple mais vous devrez réaliser des maquettes peut être un petit peu plus précises pour que tous les éléments qui devront être mis en place soit bien présents sur les écrans pour lesquels vous allez travailler. Une fois que cette étape aura été réalisée, vous voyez que nous avons une compréhension beaucoup plus claire des types de contenu que nous allons avoir à faire réaliser, que ça soit en termes de taille des images ou en terme également de contenu rédactionnel. Il est donc très important de ne pas zapper cette étape et de bien intégrer la phase de contenu responsive dans notre flux de production. un affichage de premier niveau.

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 sept. 2017
Durée :2h02 (25 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !