24/03/2017

Des contenus éditoriaux clés en main pour optimiser votre savoir-faire !

Avec R&A, designer de contenus et raconteur d’histoires, découvrez une offre qui vous facilitera enfin la vie ! Cliquez sur l’image pour découvrir notre offre :

 

22/11/2016

Avec PubliLink, Rampazzo & Associés simplifie le passage du print au web

Rampazzo & Associés présente au salon La Presse au futur son outil PubliLink, qui transforme vos publications en e-magazines lisibles sur tous les écrans.

Venez nous retrouver mercredi 23 ou jeudi 24 novembre sur le stand des Incubateurs ou participez à notre atelier de jeudi à 14 h 55.

 

A5+FLAER_OK.indd

 

A5+FLAER_OK.indd

21/11/2016

L’ARF devient Régions de France et choisit PubliLink pour sa « Lettre »

Cet automne, l’ancienne Association des régions de France (ARF) est devenue Régions de France et a changé d’identité visuelle.

« La Lettre des Régions », que Rampazzo & Associés réalise depuis début 2015, a logiquement suivi le mouvement, avec notamment de nouvelles couleurs.

 

Mais l’innovation la plus importante n’est pas là : désormais, la version papier de « La Lettre des Régions » se double d’une version numérique, réalisée avec PubliLink, la solution mise au point par Rampazzo & Associés.

Cette version est accessible depuis tous les écrans car PubliLink est un outil nativement responsive. Il propose également un outil de recherche internuméros ainsi que la possibilité d’ajouter aux contenus de la version imprimée des enrichissements multimédias (diaporamas, vidéos, liens, etc.).

La version PubliLink de « La Lettre des régions » a été intégrée dans le site de Régions de France : regions-france.org/lettre-des-regions

30/05/2016

Mission Capitale print et numérique !

Rampazzo & Associés a récemment remporté l’appel d’offres de la Mairie de Paris concernant leur magazine interne. L’enjeu était d’associer au magazine imprimé une déclinaison numérique qui permette la reprise des contenus, accessible sur tous types d’appareils. C’est chose faite avec PubliLink, modèle de site conçu par l’agence, gérant les publications successives, un « chemin de fer », les fonctionnalités de partage, la recherche… En privilégiant un grand confort de lecture ainsi que l’editing du magazine. Le tout en full responsive.

Retrouvez le site sur missioncapitale.paris.fr

Page d'accueil de Mission Capitale

La page d’accueil de Mission Capitale

Le dossier sport de Mission Capitale

Le dossier sport

L'article "Grand angle"

L’article « Grand angle »

Un article de la rubrique "Horizons"

Un article de la rubrique « Horizons »

12/01/2016

Unis et debout : un numéro spécial hommage

À l’occasion de la commémoration des événements tragiques de janvier 2015 et à la suite des attentats qui ont frappé la capitale le 13 novembre dernier, la Ville a souhaité réaliser un numéro spécial d’ »àParis »  donnant la parole aux Parisiens, mais pas que…

Depuis 2009, c’est Rampazzo & Associés qui s’occupe chaque trimestre de la maquette du magazine et de l’agenda qui l’accompagne dans les boîtes aux lettres des Parisiens. C’est elle qui s’est également chargée de ce hors-série qui est disponible à l’Hôtel de Ville, dans les mairies d’arrondissement et dans de nombreux lieux municipaux

17/11/2014

Relooking des supports numériques d’Indigo Publications

Cette année, Indigo Publications a sollicité l’agence pour revisiter ses supports numériques, La Lettre A et les lettres confidentielles d’Africa Intelligence, avec des maquettes plus dynamiques et des rubriques mieux identifiées.
La Lettre A est consacrée à l’actualité politique, économique et médiatique en France, tandis que les lettres confidentielles d’Africa Intelligence – La Lettre du Continent, La Lettre de l’Océan Indien, Maghreb Confidentiel, Africa Energy Intelligence, Africa Mining Intelligence – sont dédiées à l’actualité des réseaux d’affaires et des pouvoirs politiques en Afrique.
L’accent a notamment été mis sur l’interactivité, de nombreux articles des lettres renvoyant vers des contenus complémentaires sur le portail Africa Intelligence, et le nouveau format est conçu pour une lecture adaptée aux écrans d’ordinateurs et aux tablettes.

21/10/2014

Rampazzo & Associés repense les supports d’information de Force ouvrière

Le site de la confédération Force ouvrière, ainsi que son journal interne, ont été repensés en profondeur par notre agence. L’accent a été mis sur la valorisation des contenus print et online, leur clarification, ainsi que la modernisation graphique et structurelle des supports.

 

Le journal, qui se nomme désormais FO Hebdo, a changé de format et de pagination, avec des papiers plus synthétiques, une lecture multi-entrées, mais aussi un editing étoffé et une complémentarité accentuée avec le site, sur lequel la place est faite à des articles longs, des dossiers mis à jour selon l’actualité, et des campagnes interactives engageant le lecteur et le militant.

 

Le site, désormais consultable sur tous les terminaux grâce à une conception en responsive design, a été restructuré en fonction des contenus et organisé autour de trois grands axes, l’information, la défense des droits des salariés et l’action du syndicat. Visitez-le !

Homepage du site de Force ouvrière, desktop et smartphone

Homepage du site de Force ouvrière, desktop et smartphone

Page article du site de Force ouvrière, desktop et smartphone

Page article du site de Force ouvrière, desktop et smartphone

27/09/2013

Rampazzo & Associés décline « Une vie, une œuvre » pour l’iPad

« Le Monde » a confié à Rampazzo & Associés la première déclinaison pour l’iPad de sa collection à succès « Une vie, une œuvre ». La réédition, à l’occasion du centenaire de la naissance de l’écrivain, du volume consacré à Albert Camus se double de la sortie d’une application entièrement conçue et réalisée à l’agence. Adaptant la maquette imaginée pour le papier à la lecture sur écran tactile, l’agence a livré au « Monde » une application « clés en main » intégrant de la vidéo, du son et un plus grand nombre de photos que l’édition papier. Une innovation à découvrir sur l’App Store.

18/02/2013

La Vie : une nouvelle formule prometteuse


Les premiers numéros de la nouvelle formule de l’hebdomadaire chrétien La Vie
, conçue par l’agence Rampazzo & Associés et lancée le 31 janvier, témoignent d’une belle maîtrise de l’équipe du magazine : épurés et efficaces, ils mettent en avant de façon claire les choix de la rédaction. L’agence a par ailleurs réalisé une harmonisation graphique du site pour maintenir la cohérence de l’ensemble.

 

15/03/2012

La lisibilité sur écran : comment l’améliorer ?

Sur Internet, 95% du contenu est du texte. Partant de ce constat, on comprend vite que, dans la création de sites Web, il est essentiel d’accorder une grande attention à la lisibilité du texte, c’est-à-dire à sa capacité à être compris par le lecteur.

La lisibilité dépend de plusieurs facteurs complémentaires : le choix de la ou des polices de caractères, la mise en forme des textes, la structuration des contenus dans la page et du site dans son ensemble, la rédaction. Sur un support imprimé, le respect de règles pour chacun de ces facteurs peut garantir une bonne lisibilité. Sur le Web, des obstacles se rajoutent : l’aspect du texte se modifie en fonction du système d’exploitation, du navigateur et de la résolution de l’écran du lecteur, ainsi que des polices disponibles sur son poste. De plus, non seulement le support informatique transforme le texte, mais la lecture elle-même change. Alors que la lecture sur papier procède par séquence, du haut au bas de la page, sur l’écran, on effectue un scan de la page à la recherche de points de repère. L’œil passe rapidement d’un contenu à l’autre, d’une page à l’autre, en fonction de l’information recherchée.  La capacité à lire des textes longs diminue et l’on privilégie des textes courts.

Autant de changements affaiblissent la lisibilité d’un texte sur écran par rapport à celle d’un texte imprimé. Même s’il a été démontré qu’avec le progrès technologique, l’écart de vitesse se réduit, la lecture sur le Web demeure plus pénible et fatigante.

Que faire?

Ces obstacles imposent une révision des critères de la lisibilité. C’est pourquoi, lors de la conception de sites web, il essentiel de maîtriser correctement l’art de se servir des caractères pour conférer à l’information une forme écrite, en d’autres mots : la typographie. Son but est de rendre un document intelligible et lisible, tout en soignant l’esthétique de la page dans son ensemble, et son efficacité influence directement la rapidité d’acquisition du lecteur. « Le design n’est pas inhérent à l’aspect. Il est inhérent au fonctionnement », avait d’ailleurs affirmé Steve Jobs, le fondateur d’Apple.

De quoi faut-il donc tenir compte pour qu’un texte soit agréable à lire? Comment l’organiser dans un page pour qu’il donne envie au lecteur de le suivre, en évitant tant que possible la fatigue visuelle? Voici les bonnes pratiques et les conseils techniques à suivre.

D’abord : le choix des polices

Une étape primordiale de la conception graphique d’un site est le choix des polices. En théorie on peut utiliser n’importe quel caractère, mais il faut veiller à ce qu’il soit disponible sur le poste de l’internaute et qu’il soit lisible à l’écran.

Les polices se divisent en « serif » ou « sans serif ». Dans une police avec empattements (serif), on distingue des petites pattes qui prolongent la fin des traits d’un caractère, qui sont censées guider l’œil dans la lecture. Une police sans serif présente des caractères tracés uniquement par des lignes et des barres basiques.

On a longtemps considéré que seules les polices sans serif permettaient la lecture sur écran. En effet, sur un vieil écran avec une résolution médiocre de 600 x 400 pixels, lire une police avec serif était presque impossible. Les caractères étaient mal définis et les empattements pixélisées. On a donc longtemps privilégié des polices sans serif (Verdana, Arial, Helvetica, Tahoma, etc.) ou avec serif optimisées pour les écrans (Georgia). Aujourd’hui, le problème des empattements n’existe presque plus, parce que les écrans ont des résolutions plus performantes.

Pour avoir la certitude d’utiliser une police installée par tous les navigateurs, il convient d’en choisir une « web-safe », comme Arial, Times New Roman, Verdana, Georgia, Lucida, Courier New, etc. Mais cela ne suffit pas. En effet, grâce à Css (ou feuille de style en cascade, un langage informatique qui définit la présentation des pages HTML), le développeur demande à l’ordinateur de sélectionner une suite de fontes (une famille) de la plus spécifique à la plus générique. Le navigateur va donc tenter d’afficher les pages avec la police souhaitée ; sinon, il essayera les autres de la famille, jusqu’à ce qu’une soit disponible.

Il est donc important de bien choisir la famille de polices. Voici quelques exemples[1] :

Polices à empattements (serif)

font-family: « Times New Roman », Times, « Liberation Serif », FreeSerif, serif;

font-family: Georgia, « DejaVu Serif », Norasi, serif;

Polices sans empattements (sans-serif)

font-family: Arial, Helvetica, « Liberation Sans », FreeSans, sans-serif;

font-family: « Trebuchet MS », Arial, Helvetica, sans-serif;

font-family: « Lucida Sans », « Lucida Grande », « Lucida Sans Unicode », « Luxi Sans », sans-serif;

font-family: Tahoma, Geneva, Kalimati, sans-serif;

font-family: Verdana, « DejaVu Sans », « Bitstream Vera Sans », Geneva, sans-serif;

font-family: Impact, « Arial Black », sans-serif;

Polices à chasse fixe (ou monospace, désignant la largeur fixe des caractères ; utilisées par les développeurs pour l’affichage de codes)

font-family: « Courier New », Courier, « Liberation Mono », monospace;

font-family: Monaco, « DejaVu Sans Mono », « Lucida Console », « Andale Mono », monospace;

D’après la même source, la composition d’une famille de polices doit, au-delà de proposer des fontes web-safe, rassembler des caractères proches non seulement par leur style, mais aussi par leur taille, la largeur relative des caractères, etc. Ainsi, placer Arial et Verdana dans une même collection est une erreur: Verdana est plus haute et beaucoup plus large. En revanche, on substitue facilement Arial à Trebuchet, bien que le style d’Arial soit sensiblement différent.

La contrainte de la disponibilité des caractères va néanmoins peser de moins en moins. Grâce à une nouvelle commande Css, le @font-face, le développeur peut désormais demander à l’ordinateur d’envoyer une police spécifique à tous les postes, et cela indépendamment du fait qu’elle soit disponible ou pas sur le système de l’internaute.

Le corps (ou taille) du texte devrait se situer entre 12 et 16 pixels (px), avec une exception pour les notes, dont la taille peut descendre à 10px. Une valeur de 16px peut paraître très grande, mais elle correspond à peu près à un corps de 11 points sur papier, qui garantit une bonne lisibilité. Il faut donc faire attention à ne pas diminuer systématiquement la taille, cela ayant pour conséquence une perte de lisibilité.

Quelle que soit la police choisie, pour garantir une bonne lisibilité il faut s’assurer qu’elle a une hauteur d’x confortable. La x indique la hauteur du tracé d’un caractère en minuscules, sans hampe ni jambage, tel qu’il est imprimé. Les polices sans serif et celles qui sont optimisées pour les écrans ont une hauteur suffisamment grande.

On peut définir la taille des caractères en valeur absolue. Mais il existe aussi une définition en taille relative, ou em. Celle-ci permet l’adaptation des caractères aux résolutions et aux paramètres de l’utilisateur, en évitant le risque que les lignes se chevauchent. Cela facilite l’accessibilité aux pages.

L’utilisation de polices distinctes pour différencier les contenus (titre, chapô, texte, intertitres, légendes, encadrés, liens, etc.) est très recommandée. La lecture sur écran, du fait qu’elle procède par scan, requiert des points de repère bien visibles : la mise en évidence des différents niveaux de lecture favorisera une bonne lisibilité. Par le contraste entre caractères, le lecteur trouvera plus facilement l’information recherchée.

Ensuite : la mise en page du texte

La mise en page du texte ne peut se passer d’un élément essentiel: le rythme vertical. Il s’agit de l’organisation de l’espace et de l’arrangement du texte dans la page. On parle de rythme parce qu’il confère harmonie et stabilité à la page. Cela améliore la lisibilité en facilitant le suivi du texte et apporte une certaine cohérence stylistique.

Concrètement, le texte doit s’aligner dans une grille de référence qui met en étroite relation la hauteur de ligne et celle du corps du texte : la hauteur de ligne de n’importe quel élément devra être un multiple de la hauteur de base pour que le rythme soit respecté. Les marges entre les paragraphes doivent eux aussi s’adapter à ce rythme.

L’interlignage, la distance qui sépare les lignes de base de deux lignes de texte, est un élément capital du rythme vertical. Pour qu’un paragraphe soit lisible, il faut que le texte respire, que l’on distingue bien les lignes. La hauteur de ligne va influer sur « l’aération » du texte. Le graphiste Peter Gabor explique justement que « serrée, la composition se densifie ; lâche, elle se clarifie et devient aérienne ». On peut considérer qu’un bon interlignage est compris entre 140% et 150% par rapport au corps de la fonte utilisée. Le texte peut être ultérieurement aéré en plaçant des espaces blancs sur chacun de ses côtés.

Il faut aussi éviter les lignes trop longues. Une justification de 65 signes par ligne semble correcte. Si la justification est trop importante, le lecteur aura du mal à repérer la ligne suivante à chaque saut de ligne. De fastidieux « couloirs » de blanc pourraient également se former dans le paragraphe. Pour trouver le bon compromis, il existe une méthode simple, celle du typographe Robert Bringhurst, qui consiste à multiplier la taille de la fonte par 30. Par exemple, si corps de texte est en 14px, la justification sera de 420px.

Le contraste des couleurs joue aussi un rôle important. Il faudra éviter les contrastes trop nets, comme du texte noir sur un fond blanc, qui brouille légèrement la vue. Des contrastes moins forts favoriseront une bonne lisibilité, à condition que les couleurs choisis ne se ressemblent pas trop.

Adaptation aux différents contextes de lecture

La problématique de la lisibilité se complique sensiblement par la multiplication des supports. L’interface d’un site (son organisation visuelle) doit en effet pouvoir s’adapter aux différents terminaux : ordinateurs de bureau, ordinateurs portables, iPad et autres tablettes, iPhone et autres smartphones.

Pour faire en sorte que le contenu soit lisible sur tous les supports, il est donc nécessaire de créer des feuilles Css pour chacun d’entre eux. La définition de feuilles Css pour les sites mobiles doit tenir compte de deux problèmes : une résolution moins importante et une connexion souvent moins rapide que sur PC. Un contenu simplifié et optimisé est donc indispensable, ainsi que des pages légères en chargement. La navigation tactile requiert d’avantage de simplicité dans la construction de la page : il faut éviter des colonnes multiples de contenus et afficher les contenus empilés dans une seule colonne facile à parcourir. Des gros caractères, larges et lisibles, sont à privilégier : même si l’écran est petit, les polices ne doivent pas l’être pour garantir une bonne lisibilité. Les fichiers Flash player sont à oublier pour des nombreux smartphones, et surtout pour l’iPhone, qui ne l’affiche pas du tout.

Cela dit, rien n’empêche un smartphone, par exemple, d’afficher le contenu défini par une feuille de style pensée pour un site Web mais, dans ce cas, l’affichage du contenu ne sera pas adapté aux dimensions de l’écran, pénalisant ainsi la lisibilité.

 

Francesca Motta pour Rampazzo & Associés

13/01/2012

lamontagne.fr fait peau neuve

Pour le grand quotidien du Massif Central, Rampazzo et Associés a conçu un nouveau site dont l’architecture principale est celle des territoires couverts par le journal. Le graphisme, inspiré de celui de la version papier a été adaptée au support numérique et sert de base à tous les titres du groupe Centre France (Le Berry républicain, le Journal du Centre, le Populaire du Centre, l’Yonne républicaine… titres également relookés par l’agence).

Pour aller sur le site, cliquez ici.

Rampazzo & Associés, artisan du nouveau PresseNews

L’agence Rampazzo & Associés a créé les nouvelles formules graphiques de PresseNews. La lettre confidentielle spécialisée a lancé mardi 10 janvier son bimensuel entièrement relooké, en même temps que son nouveau site Internet, dont l’organisation des contenus a été totalement repensée. Un symbole de la convergence bimédias qui a présidé au travail de l’agence. Ainsi, le site et le bimensuel partagent la police Unit et une maquette horizontale qui facilitent la lecture sur tablette et le transfert des contenus d’un support à l’autre. La version PDF de la lettre se lit comme un site, par navigation et clics.

Pour visiter le site de PresseNews, cliquez ici.