Sur d’autres sites (9933)

• Evolution #4391 (Nouveau) : Squelettes de la dist : améliorer le markup et passer à BEM

  13 octobre 2019, par tcharlss (*´_ゝ｀)

  Hello,

  En voulant créer des nouveaux thèmes pour les squelettes de la dist, j’ai rencontré des limitations dûes au markup actuel.

  Par exemple, certains éléments sans classe sont impossibles à cibler, il y a des retours lignes en dur, etc.
  En certains endroits, cela limite pas mal les possibilités.
  J’aimerais lancer un petit refactoring du markup afin qu’il soit plus facile de thémer les squelettes et de maintenir les styles.

  Il s’agirait principalement d’améliorer la nomenclature des classes, en changeant le moins possible le markup afin que les thèmes actuels restent compatibles (ou au prix d’adaptations minimes).
  On ajouterait donc des nouvelles classes, sans supprimer les classes actuelles (dans un 1er temps tout du moins ?).
  Cela pourrait être l’occasion de passer à la méthodologie BEM pour la nomenclature des classes.

  Exemple n°1¶

  Exemple avec le copyright et les liens dans le footer.
  Actuellement, il n’y a pas de classe autour du copyright, les liens ne sont pas encapsulés dans un conteneur, et les séparateurs « | » n’ont pas de classe n’ont plus.
  Il est donc quasiment impossible de changer l’agencement général, de changer l’apparence des séparateurs, etc.

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">colophon</span><span class="delimiter">"</span></span><span class="tag">></span>
  
      2009 - 2019 Thèmes SPIP
  
      <span class="tag"><br /></span>
  
      <span class="tag">span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">contents</span><span class="delimiter">"</span></span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">first</span><span class="delimiter">"</span></span><span class="tag">></span>Plan du site<span class="tag"></span>    | <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">ecrire/</span><span class="delimiter">"</span></span><span class="tag">></span>Espace privé<span class="tag"></span> | <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">nofollow</span><span class="delimiter">"</span></span><span class="tag">></span>Se déconnecter<span class="tag"></span> | 
  
   <span class="tag">span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">nofollow</span><span class="delimiter">"</span></span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span><span class="tag">></span>Contact<span class="tag"></span> | <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">alternate</span><span class="delimiter">"</span></span> <span class="attribute-name">title</span>=<span class="string"><span class="delimiter">"</span><span class="content">Syndiquer tout le site</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">last</span><span class="delimiter">"</span></span><span class="tag">></span>RSS<span class="entity">&amp;nbsp;</span>2.0<span class="tag"></span>
  
  <span class="tag"></span>
  
  </span></span></span></span></span></span></span>

  Voici ce que ça pourrait donner en refactorisant :

  • Le copyright est encapsulé dans un span
  • Les liens sont considérés comme faisant partie d’un menu, et sont donc encapsulés dans un composant « menu »
  • Les séparateurs sont fait en CSS, pas en dur dans le HTML

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">colophon</span><span class="delimiter">"</span></span><span class="tag">></span>
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">colophon__coyright</span><span class="delimiter">"</span></span><span class="tag">></span>2009 - 2019 Thèmes SPIP<span class="tag"></span></span>
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">colophon__menu</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu menu_footer</span><span class="delimiter">"</span></span><span class="tag">></span>
  
              <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_plan</span><span class="delimiter">"</span></span><span class="tag">></span>
  
                  <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__link first</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">contents</span><span class="delimiter">"</span></span><span class="tag">></span>Plan du site<span class="tag"></span>
  
              <span class="tag"></span>
  
              <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_backoffice</span><span class="delimiter">"</span></span><span class="tag">></span>
  
                  <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span><span class="tag">></span>Espace privé<span class="tag"></span>
  
              <span class="tag"></span>
  
              <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_logout</span><span class="delimiter">"</span></span><span class="tag">></span>
  
                  <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__link</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">nofollow</span><span class="delimiter">"</span></span><span class="tag">></span>Se déconnecter<span class="tag"></span>
  
              <span class="tag"></span>
  
              <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_contact</span><span class="delimiter">"</span></span><span class="tag">></span>
  
                  <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__link</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">nofollow</span><span class="delimiter">"</span></span><span class="tag">></span>Contact<span class="tag"></span>
  
              <span class="tag"></span>
  
              <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_rss</span><span class="delimiter">"</span></span><span class="tag">></span>
  
                  <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__link last</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">alternate</span><span class="delimiter">"</span></span> <span class="attribute-name">title</span>=<span class="string"><span class="delimiter">"</span><span class="content">Syndiquer tout le site</span><span class="delimiter">"</span></span><span class="tag">></span>RSS<span class="entity">&amp;nbsp;</span>2.0<span class="tag"></span>
  
              <span class="tag"></span>
  
          <span class="tag"></span>
  
      <span class="tag"></span>
  
  <span class="tag"></span>
  
  </span></span></span></span></span></span></span></span></span></span></span></span></span></span>

  Avec ça, on peut faire beaucoup plus de choses : afficher le copyright et le menu côte-à-côte ou l’un sous l’autre, afficher le menu à l’horizontale ou à la verticale, choisir l’apparence des séparateurs, etc.

  Exemple n°2¶

  Autre exemple avec les résumés d’articles.

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">dir</span>=<span class="string"><span class="delimiter">"</span><span class="content">ltr</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">hentry clearfix text-left</span><span class="delimiter">"</span></span><span class="tag">></span>  
  
      <span class="tag"><strong></strong></span>
  
          <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span><span class="tag">></span>
  
              <span class="tag">span> <span class="attribute-name">src</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spip_logo</span><span class="delimiter">"</span></span> <span class="attribute-name">alt</span>=<span class="string"><span class="delimiter">"</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">150</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">185</span><span class="delimiter">"</span></span><span class="tag">></span>
  
              Joie entourée d’angoisses (1)
  
          <span class="tag"></span>
  
      <span class="tag"></span>
  
      <span class="tag"><br /></span><span class="tag"><small></small></span>6 mai 2009, par  Victor Hugo<span class="tag"></span>
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">introduction entry-content</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag"><p></p></span>
  
              Lorem ipsum<span class="entity">&amp;nbsp;</span>(...)
  
          <span class="tag"></span>
  
      <span class="tag"></span>
  
  <span class="tag"></span>
  
  </span></span></span></span></span>

  En refactorisant :

  • Le composant de base est nommé « resume », et on voit qu’il s’agit d’une variante « article ».
  • Tous les éléments ont une classe.
  • Le titre est encapsulé dans un <h3></h3> plutôt qu’un <strong></strong>.
  • L’image est sortie du titre, et sa largeur n’est pas limitée à 150px (ça se ferait en CSS).

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">dir</span>=<span class="string"><span class="delimiter">"</span><span class="content">ltr</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume resume_article hentry clearfix text-left</span><span class="delimiter">"</span></span><span class="tag">></span>  
  
      <span class="tag">span> <span class="attribute-name">src</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__logo spip_logo</span><span class="delimiter">"</span></span> <span class="attribute-name">alt</span>=<span class="string"><span class="delimiter">"</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">960</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">480</span><span class="delimiter">"</span></span><span class="tag">></span>
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__title</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span><span class="tag">></span>
  
              Joie entourée d’angoisses (1)
  
          <span class="tag"></span>
  
      <span class="tag"></span>
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__publication</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__date</span><span class="delimiter">"</span></span><span class="tag">></span>6 mai 2009<span class="tag"></span></span><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">sep</span><span class="delimiter">"</span></span><span class="tag">></span>,<span class="tag"></span></span> <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__author</span><span class="delimiter">"</span></span><span class="tag">></span>par Victor Hugo<span class="tag"></span></span>
  
      <span class="tag"></span>
  
      <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__content introduction entry-content</span><span class="delimiter">"</span></span><span class="tag">></span>
  
          <span class="tag"><p></p></span>
  
              Lorem ipsum<span class="entity">&amp;nbsp;</span>(...)
  
          <span class="tag"></span>
  
      <span class="tag"></span>
  
  <span class="tag"></span>
  
  </span></span></span></span></span></span></span>

  Voilà, ce ne sont que des exemples et non pas des propositions définitives.
  C’est juste pour montrer la direction dans laquelle aller.

  HTML5¶

  Il est tentant de vouloir en profiter pour passer en HTML5, mais je préfère laisser cet aspect à part (il y a déjà des tickets dessus je pense).

  Français/anglais ?¶

  Actuellement pour la nomenclature des classes, il y a un mélange de français et d’anglais. Personnellement, ça ne me dérange pas :)
  J’ai arrêté d’essayer de tout franciser à tout prix, je préfère partir sur une base en anglais, avec quelques éléments en français quand il n’y a a pas le choix (par exemple quand on fait référence aux objets spip : breve, rubrique, etc.).

  Cahier des charges¶

  • Faire en sorte que les thèmes existants restent globalement compatibles (moyennant peu d’adaptations).
  • Passer la nomenclature des classes à BEM.
  • Ajouter des classes sur tous les éléments n’en ayant pas.
  • Retirer les retours ligne en dur : <br />.
  • Travailler dans une branche nommée « bem » du dépôt git : https://git.spip.net/SPIP/dist/
  • Pas de HTML5 pour l’instant.
  • Classes en english avec des exceptions en français

• Evolution #4379 : Liste des plugins necessités lien vers le dépot/annuaire de plugins

  22 septembre 2019, par b b

  Ok je vois le plan, hésite pas à proposer un patch ou un PR dans la branche de dev.

• Your 6-step guide to increasing acquisition

  2 juillet 2019, par Matomo Core Team — Analytics Tips
  Your 6-step guide to increasing acquisition

  Want to save time and money, as well as increase conversions and acquisition ? Matomo Analytics is here to help with that !

  Let’s start by helping you create a website visitors’ acquisition strategy, without it you might be going in blind and missing opportunities that might’ve been easily found in your metrics.

  To help you craft a strategy for your site, check out the steps below !

  Step one : Get familiar with the Acquisition feature

  The easiest way is to start with Matomo’s Acquisition feature itself. Discover and take action on the marketing channels with the biggest ROI for your business. You’ll learn :

  How to get traffic from external websites : Find out who’s helping you succeed from external websites and convince them to do more of it. Get more traffic by proactively asking for : paid sponsorships ; guest blog posts ; or spending more advertising on the particular website.

  

  About Social Networks : Which social media channels are connecting with the audience you want ? Take the guesswork out by using only the ones you need. By finding out which social channels your ideal audience prefers, you can generate shareable, convincing and engaging content to drive shares and traffic through to your site.

  Campaigns : This helps you understand which marketing campaign is working and which isn’t. You can then shift your efforts to effectively gain more visitors with less costs. Keep track of every ad and content piece you show across internal and external channels to see which has the biggest impact on your business objectives.

  Enhanced SEO : Every acquisition plan needs a focus on maximising your Search Engine Optimization (SEO) efforts. When it comes to getting conclusive search engine referrer metrics, you need to be sure you’re getting ALL the insights to drive your SEO strategy. See keyword position rankings, integrate Google, Bing and Yahoo search consoles, and no longer be restricted with “keyword not defined” showing up in your keywords reports.

  >> Watch Acquisition introduction video (playtime : 2.54 minutes)

  Step two : Set your goals and monitor conversion funnels

  Let the Goals feature guide you

  Goals are essential for building your marketing strategy and getting new customers. The more goals you track, the more you learn about behavioural changes and modify pathways to impact acquisitions over time. 

  Are you checking :

  • Which channels are converting the best for your business ?
  • Which cities/countries are most popular ?
  • What devices will attract the most visitors ?
  • How engaged your visitors are before converting ?

  This way you can see if your campaigns (SEO, PPC, signups, blogs etc.) or optimising efforts (A/B Testing, Funnels) have made an impact with the time and investment you’ve put in.

  >> Watch Goals introduction video (playtime : 2.04 minutes)

  The Funnels feature leads you to success

  Conversion funnels give you the big picture on whether your acquisition plans are paying off and where they may be falling short. If the ultimate goal of your site is to drive conversions, then each funnel can tell you how effectively you’re driving traffic through to your desired outcome.

  >> Watch Funnels introduction video (playtime : 2.29 minutes)

  

  Step three : Measure the success of every touchpoint in your customer’s journey

  Multi Attribution feature

  Accurately identify channels where visitors first engage with your business, as well as the final channel they came from, before purchasing your product/service. This helps you make smarter decisions when determining acquisition spend to accurately calculate the Customer Acquisition Cost (CAC). Here you no longer falsely over-estimate investment in failing marketing channels.

  >> Watch Multi Attribution introduction video (playtime : 2.28 minutes)

  Step four : For ecommerce sites, understand who your customers are to increase sales

  Ecommerce feature to significantly increase $ potential

  If your website’s overall purpose is to generate revenue, the Ecommerce feature gives you comprehensive insights into your customer’s purchasing behaviours.

  This heavily reduces your risks when marketing products to potential customers as you’ll understand who to target, what to target them with and where further opportunities exist.

  >> Watch Ecommerce introduction video (playtime : 2.04 minutes)

  

  Step five : Make sure the forms on your website are easy to complete

  Form Analytics feature

  Once you get visitors through the funnel, the forms on your website are the final step to conversion and need special attention. If not done right, you could be missing out on converting a large portion of your visitors.

  Thankfully, you can now identify and fix pain points on the forms that are most important to your business’ success.

  >> Watch Form Analytics introduction video (playtime : 2.39 minutes)

  

  Step six : Discover what a customer journey looks like on a user-by-user basis and bring in key acquisition elements to your strategy

  Visitor Profiles tell you each visitors’ history

  The Profile feature summarises every visit, action and purchase made.

  Better understand :

  • Why your visitors viewed your website.
  • Why your returning visitors continue to view your website.
  • What specifically your visitors are looking for and whether they found it on your website.

  The benefit is being able to see how a combination of acquisition channels play a part in a single buyer’s journey.

  >> Watch Visitors introduction video (playtime : 1.46 minutes)

  

  To summarise

  This guide will set you on a path to creating a well-planned acquisition strategy. It’s the key to attracting and capturing the attention of potential visitors/leads, and successfully driving them through a funnel/buyer’s journey on your website.

  Because of Matomo’s reputation as a trusted analytics platform, the features above can be used to assist you in making smarter data-driven decisions. You can pursue different acquisition avenues with confidence and create a strategy that’s agile and ready for success, all while respecting user privacy.