Responsive Design

  • Nous allons voir dans ce tutoriel comment utiliser le framework Bootstrap de Twitter pour créer de zéro un template Joomla dit Responsive Design.

    Lorsque vous créez un site, vous devez décider s'il vaut mieux créer votre propre template ou en acheter un. Vous avez également la possibilité d'en modifier un existant.

    Dans tous les cas, pour être en mesure de prendre la bonne décision, vous devez comprendre le processus de création d'un template Joomla.

  • logo gantryLe framework Gantry, dans sa version 4, prend maintenant en charge le Responsive Design (cf. Le Responsive Design : l'UX de Joomla abat sa première carte). Basé sur le Framework Bootstrap, Gantry vous permet maintenant de concevoir des templates Joomla qui s'adaptent automatiquement à la résolution du périphérique utilisé par l'internaute (Smartphone, PC, Tablette,...).

    RocketTheme, le concepteur de Gantry, a bien compris qu'avec la forte croissance des appareils mobiles, aux tailles d'écrans très variés, il était rapidement devenu ingérable de proposer une vue spécifique à chaque type d'appareils indépendemment du design principal. D'où la nouvelle tendance du Responsive Design et son intégration dans le Framework Gantry.

  • Dans ce tutoriel vidéo, vous découvrirez ce qui est la base Responsive Design de Joomla.

    Ce tutoriel fait partie de la formation vidéo complète sur Joomla! 3.
     

    icone infoLiens complémentaires

     
  • Lorsque l'on se lance dans un projet de création de site Internet sous Joomla avec comme objectif d'avoir un site web Responsive Design, bien choisir ses extensions Joomla devient alors un travail minitieux puisque celles-ci doivent elles-aussi être Responsive.

    En effet, pour avoir un site Joomla 100% Responsive, avoir seulement un template Responsive Design ne suffit pas. Tout doit être Responsive et permettre un affichage optimale sur l'ensemble des périphériques clients (Smartphone, tablette, PC,...).

    Je vais donc ici vous présenter les avantages de l'utilisation d'un Framework comme Gantry qui permet de trouver tout le nécessaire (Framework, Extensions, Templates) en un seul et même lieu : chez RocketTheme, concepteur de Gantry.

  • Cette vidéo présentant une des grandes nouveautés de Joomla 3.0 : le Responsive Design, rentre dans le cadre de la formation Joomla 3.0 proposé par Joomea, le centre de formation Joomla en ligne.

    Pour en savoir plus :
    http://www.nosyweb.fr/news-joomea/formation-joomla-3-0-30-tutoriels-pour-debuter-avec-joomla.html
  • Fin 2016, alors que la navigation web sur mobile commençait à gagner du terrain, Google, le moteur de recherche dominant annonça une nouvelle façon d’indexer les sites web. Les robots d’indexation ou les crawlers de Google tendent de plus en plus vers ce que l’on appelle le Mobile First Index. Depuis le 1er Juin 2019, ce nouveau mode d’indexation est pris en compte pour le référencement naturel de tout nouveau site web et cette année, la firme de Mountain View confirme que désormais, les sites conçus avec une approche Mobile First seront priorisés sur les SERP (page de résultats des moteurs de recherche). Cela pousse les entreprises à concevoir d’abord la version mobile des sites web avant de l’adapter pour les ordinateurs, soit l’inverse de ce qui se faisait avant.

    Ce chamboulement n’est pas sans conséquences sur l’art et la manière de rédiger des contenus, car en effet, écrire pour un site web mobile et écrire sur un site desktop n’est pas tout à fait la même chose.

    Pourquoi rédiger du contenu pour le mobile est-il différent ?

    On a déjà compris depuis quelques années que l’on ne peut proposer les mêmes interfaces graphiques sur mobile et sur ordinateur. Raison pour laquelle il a fallu travailler les versions mobiles des sites web classiques pour les adapter sur un plus petit écran. De la même manière, il est peu recommandé de proposer les mêmes textes pour ces deux supports. En voici la raison principale : la majorité des internautes ne liront jamais jusqu’à la fin un long texte sur mobile. Quand bien même le sujet est intéressant pour un mobinaute, il n’y accordera pas beaucoup de temps comme il le ferait sur ordinateur. Un mobinaute navigue souvent en mouvement et dans les lieux publics. Il ne peut pas toujours se permettre de se poser et de se plonger dans une lecture de 10 minutes voire plus.

    Sur mobile, les attentes des internautes sont différentes. On souhaite trouver quasi-instantanément ce que l’on cherche. Il devient alors nécessaire de proposer des contenus qui fournissent rapidement et clairement l’information à délivrer.

    Comment adapter la rédaction de contenus web au mobile ?

    On voit de moins en moins d’articles avec plus de 1250 caractères sur mobile. Pour que l’information soit partagée de manière claire et concise, tout en étant complète, il faut donc privilégier les textes courts.

    Des études ont permis de comprendre que les mobinautes sont plus attentifs aux informations contenues dans le haut de la page. Ce qui signifie que les informations essentielles doivent être visibles avant de scroller vers la partie basse du texte.

    Bien évidemment, cela ne dispense pas le rédacteur des règles de base en matière de rédaction web. Les informations doivent toujours être partagées selon une certaine logique. Vous devez donc les hiérarchiser et les structurer. Vous aurez également à décider si les données de second plan sont à délivrer ou non. Le schéma idéal étant d’aller à l’essentiel tout en proposant au lecteur d’accéder aux détails des informations un peu plus bas sur la page.

    Pour alléger l’aperçu du texte, il est nécessaire de faire bon usage des titres et des puces. Pensez également à aérer le texte et à mettre en gras les informations importantes.

    Quelques conseils pour optimiser la rédaction web mobile

    Si vous maîtrisez déjà la rédaction web dans son ensemble, vous n’aurez pas beaucoup de mal à adapter votre méthode pour les smartphones et les tablettes. Pour autant, ne vous reposez pas sur ces acquis, car l’univers du web est en constante évolution et il est important d’être en phase avec les exigences du moment, en l’occurrence la maîtrise de la rédaction web mobile. Pour réussir dans cette voie, voici quelques conseils.

     

    Conseil n°1 : Un titre concis pour une seule colonne

    Si pour les versions desktop, on préconise un titre qui se tient sur une seule ligne, pour la version mobile veillez à ce que le titre H1 ne dépasse pas 3 lignes. Si vous raisonnez exactement comme sur ordinateur, vous risquez d’avoir un titre qui s’étend sur 5 ou 6 lignes sur un écran de smartphone. Rédigez le texte sur une seule et unique colonne qui s’adaptera à toute la largeur de l’écran.

     


    Conseil n°2 : Allez à l’essentiel

    Comme nous l’avons expliqué plus haut, évitez les longs textes. Un paragraphe ne devrait pas avoir plus de 500 caractères et l’essentiel doit être rédigé dans les 2 premières phrases afin de susciter rapidement l’intérêt du lecteur. Les phrases simples et courtes ont plus de valeur pour ce type de rédaction. Aussi, évitez de tourner autour du pot ou de faire étalage d’une grande inspiration pour un sujet. Allez droit au but !

     


    Conseil n°3 : Bien choisir ses mots en pensant SEO

    Le poids des mots demeure important, car vous devez constamment penser référencement naturel. Comme le nombre de caractères doit être limité, ne lésinez pas sur les mots-clés. N’oubliez pas les mots-clés secondaires de la longue traîne et faites en sorte que le texte ait un champ sémantique riche autour du sujet.

     


    Conseil n°4 : Faites la part belle aux sous-titres et aux listes à puce

    La plupart des mobinautes survolent le texte avec une lecture en diagonale. Ils recherchent rapidement les informations que vous aurez mises en exergue, c’est-à-dire les titres, les mots en gras, les groupes de mots avec une police ou une couleur différente et les listes à puces.

    Vous devez faire un effort pour que les titres soient très révélateurs et que les réponses se trouvent déjà dans les sous-titres.

     


    Conseil n°5 : Soignez les balises méta

    Faire des recherches sur Google via mobile n’est pas chose aisée, surtout lorsqu’on est dehors et en déplacement. Entre le clavier réduit et la barre de recherche qui l’est encore plus, on a tendance à rechercher la facilité en tapant des mots-clés génériques ou des expressions très courtes en guise de requêtes. Pour que votre site ait toutes ses chances d’apparaître en tête de peloton sur les SERP, il faut travailler minutieusement les balises méta, id-est : le méta-titre et la méta-description.

     


    Conseil n°6 : Choisissez bien la typographie

    La lisibilité est primordiale. On préconise une taille de police supérieure ou égale 16px. Choisissez une police facile à lire et gardez-la pour tout le corps de texte. Vous pouvez utiliser d’autres polices pour les titres. D’ailleurs, l’idéal est de garder la même police pour tous les textes du site mobile.

    Ne minimisez pas trop l’interligne au risque de décourager le lecteur. De plus, ce n’est pas très pratique pour cliquer sur les liens hypertextes, pensez ergonomie ! En outre, n’ayez pas peur d’aérer le texte. Grâce aux nouvelles habitudes acquises sur les réseaux sociaux, les mobinautes sont de plus en plus habitués à scroller jusqu’à la fin si les informations délivrées en haut de la page sont assez intéressantes et que le texte ne soit pas particulièrement long. Enfin, n’oubliez pas de choisir une couleur de police qui contraste bien avec le fond.

    Besoin d’assistance pour la création de vos contenus mobile ou desktop ? La rédaction web fait partie de la panoplie de services de Nosyweb Digital. N’hésitez pas à nous confier vos besoins !

      


     

    Le saviez-vous ? La rédaction d’articles pour un site web mobile ne répond pas aux mêmes standards que la rédaction classique pour un site desktop. Vu les enjeux du Mobile First Indexation et dans un souci de satisfaction de vos visiteurs, découvrez les bonnes techniques pour offrir un contenu bien adapté au mobile.

  • La souplesse d'utilisation des modules est une grande force de Joomla. Parmi ses avantages citons notamment ses nombreuses possibilités de positionnement sur la page, l'assignation à plusieurs pages, l'insertion dans un article. Les versions récentes de Joomla (intégration de notes pour une recherche rapide) favorisent le développement de l'utilisation des modules.
    Chez NosyWeb nous incitons à leur mise en oeuvre, 100% compatible avec les templates performants et modernes que nous pratiquons, notamment sous Gantry.

    Malgré cette richesse fonctionnelle, en standard Joomla n'offre pas la possibilité d'afficher un module par type d'écran (desktop, tablette, mobile). Ce besoin est de plus en plus important à mesure que les statistiques de connexions mobiles progressent jusqu'à dépasser désormais les affichages sur desktop.

    Dans quels cas un affichage différent sur mobile est-il utile?

Contact