{"id":98791,"date":"2025-02-23T23:12:44","date_gmt":"2025-02-23T19:42:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%aa%d9%88%d8%b3%d8%b9%d9%87-%d8%ae%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%be%d8%a7%d8%b3%d8%ae%da%af%d9%88-%d8%a8%d8%a7-mjml-%d8%b1%d8%a7-%d8%b3%d8%a7%d8%af%d9%87-%da%a9%d9%86\/"},"modified":"2025-02-23T23:12:44","modified_gmt":"2025-02-23T19:42:44","slug":"%d8%aa%d9%88%d8%b3%d8%b9%d9%87-%d8%ae%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%be%d8%a7%d8%b3%d8%ae%da%af%d9%88-%d8%a8%d8%a7-mjml-%d8%b1%d8%a7-%d8%b3%d8%a7%d8%af%d9%87-%da%a9%d9%86","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%aa%d9%88%d8%b3%d8%b9%d9%87-%d8%ae%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%be%d8%a7%d8%b3%d8%ae%da%af%d9%88-%d8%a8%d8%a7-mjml-%d8%b1%d8%a7-%d8%b3%d8%a7%d8%af%d9%87-%da%a9%d9%86\/","title":{"rendered":"\u062a\u0648\u0633\u0639\u0647 \u062e\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0628\u0627 MJML \u0631\u0627 \u0633\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f"},"content":{"rendered":"
\n

\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0631 HTML \u06cc\u06a9 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a. \u0628\u06cc\u0646 \u0686\u0631\u0627\u063a\u0647\u0627
<\/p>\n \u00e0 r\u00e9p\u00e9tition<\/strong>, le CSS inline *obligatoire *<\/em> et les nombreux clients mails qui interpr\u00e8tent le code diff\u00e9remment, cr\u00e9er une newsletter responsive et compatible partout peut vite devenir un cauchemar.<\/p>\n

Mais il existe une solution qui change la donne : MJML<\/strong>.<\/p>\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n

pour structurer le contenu.<\/p>\n
  • CSS inline obligatoire pour garantir un rendu correct.<\/li>\n
  • Gestion du responsive laborieuse, souvent n\u00e9cessitant des hacks.<\/li>\n
  • Probl\u00e8mes d'affichage al\u00e9atoires selon les clients mails.<\/li>\n

    Avec plus de 60% des emails ouverts sur mobile<\/strong>, assurer un rendu responsive est essentiel, mais tr\u00e8s complexe \u00e0 r\u00e9aliser en HTML pur.<\/p>\n

    \"\u0634\u0631\u062d<\/p>\n

    <\/span>\n

    Qu'est-ce que MJML ?
    \n<\/span><\/h2>\n

    \"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

    MJML (\u0632\u0628\u0627\u0646 MailJet Markup Language) \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 MailJet \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f \u0627\u06cc\u0645\u06cc\u0644 \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

    \u0627\u06cc\u062f\u0647 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a: \u0634\u0645\u0627 \u0628\u0627 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0648 \u0645\u0639\u0646\u0627\u06cc\u06cc (\u0645\u0627\u0646\u0646\u062f OR) \u06a9\u062f \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0648 MJML \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 HTML \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0648 \u0628\u0627 \u0627\u06a9\u062b\u0631 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u0633\u0627\u0632\u06af\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

    \u0645\u062b\u0627\u0644:<\/p>\n

    \n
    <\/span>\n  <\/span>\n    <\/span>\n      <\/span>\n        <\/span>\n          Bonjour le monde !\n        \n         href=<\/span>\"https:\/\/example.com\"<\/span>><\/span>Cliquez ici<\/mj-button><\/span>\n      \n    \n  \n\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \u0627\u06cc\u0646 \u06a9\u062f \u0633\u0627\u062f\u0647 MJML \u062f\u0631 \u06cc\u06a9 HTML \u06a9\u0627\u0645\u0644 \u0628\u0627 \u062a\u0645\u0627\u0645 \u0686\u0631\u0627\u063a\u0647\u0627 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f <\/p>\n

    • n\u00e9cessaires et du CSS inline pour assurer un rendu parfait.<\/p>\n

    <\/span>\n

    Les avantages de MJML
    \n<\/span><\/h2>\n

    <\/span>\n

    1. Responsive by design
    \n<\/span><\/h3>\n

    Chaque composant MJML est con\u00e7u pour \u00eatre responsive par d\u00e9faut. Plus besoin d\u2019\u00e9crire des media queries complexes ou de tester chaque mise en page sur mobile.<\/p>\n

    <\/span>\n

    2. Compatibilit\u00e9 multi-clients
    \n<\/span><\/h3>\n

    MJML g\u00e9n\u00e8re un HTML optimis\u00e9 pour les principaux clients mails, r\u00e9duisant consid\u00e9rablement les risques de bugs d'affichage entre Outlook, Gmail, Yahoo, etc.<\/p>\n

    <\/span>\n

    3. Gain de temps
    \n<\/span><\/h3>\n

    Le code MJML est plus court et plus lisible que le HTML traditionnel pour emails. Moins de lignes de code, moins de complexit\u00e9, donc plus de productivit\u00e9.<\/p>\n

    <\/span>\n

    4. Int\u00e9gration facile
    \n<\/span><\/h3>\n

    Les emails g\u00e9n\u00e9r\u00e9s peuvent \u00eatre directement int\u00e9gr\u00e9s dans des outils comme Mailchimp, Brevo (ex-Sendinblue), ou tout autre outil d\u2019emailing.<\/p>\n

    <\/span>\n

    5. Pr\u00e9visualisation en temps r\u00e9el
    \n<\/span><\/h3>\n

    Gr\u00e2ce aux outils comme l\u2019\u00e9diteur en ligne de MJML ou des extensions pour VS Code, vous pouvez pr\u00e9visualiser vos emails en temps r\u00e9el tout en d\u00e9veloppant.<\/p>\n

    <\/span>\n

    Quand utiliser MJML ?
    \n<\/span><\/h2>\n

      \n
    • Si vous d\u00e9veloppez des newsletters r\u00e9guli\u00e8rement.<\/li>\n
    • Si vous cherchez \u00e0 gagner du temps tout en garantissant un rendu parfait.<\/li>\n
    • Si vous voulez \u00e9viter les tracas li\u00e9s \u00e0 la compatibilit\u00e9 entre clients mails.<\/li>\n<\/ul>\n
      \n

      <\/span>Read next<\/span><\/h2>\n
      \n
      \n \"\u062a\u0635\u0648\u06cc\u0631
      \n <\/span><\/p>\n
      \n

      <\/span>Dealing with open database transactions in Prisma<\/span><\/h3>\n

      \n Ronald Rey -

      \n
      \n \"\u062a\u0635\u0648\u06cc\u0631
      \n <\/span><\/p>\n
      \n

      <\/span>\u0686\u0631\u0627 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0631\u0627\u06cc \u062d\u062f\u0627\u06a9\u062b\u0631 \u06a9\u0627\u0631\u0622\u06cc\u06cc \u0628\u0627\u06cc\u062f \u0648\u0638\u0627\u06cc\u0641 \u062e\u0648\u062f \u0631\u0627 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u06a9\u0646\u0646\u062f<\/span><\/h3>\n

      \n

      \u062c\u06a9 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0633\u0648\u0631\u0646 -

      \n
      \n \"\u062a\u0635\u0648\u06cc\u0631
      \n <\/span><\/p>\n
      \n

      <\/span>\u0628\u0627\u0632\u06cc \u0628\u0627 Hashmap <> () \u061b \u062f\u0631 \u062c\u0627\u0648\u0627<\/span><\/h3>\n

      \n

      VASANTH S -

      \n
      \n \"\u062a\u0635\u0648\u06cc\u0631
      \n <\/span><\/p>\n
      \n

      <\/span>5 API \u0647\u0627\u06cc \u0628\u0631\u062a\u0631 \u062f\u0627\u062f\u0647 \u0645\u0627\u0644\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0631\u062f\u06cc\u0627\u0628 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0633\u0647\u0627\u0645 \u0633\u0647\u0627\u0645 \u26a1<\/span><\/h3>\n

      \n

      \u0648\u06cc\u0644\u06cc\u0627\u0645 \u0627\u0633\u0645\u06cc\u062a -

      \n
      \n
      \n \"\u062c\u0627\u0645\u0639\u0647
      \n <\/figure>\n
      \n

      \n

      \u0645\u0627 \u0645\u06a9\u0627\u0646\u06cc \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u0647\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u06cc \u06af\u0630\u0627\u0631\u0646\u062f \u060c \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u0634\u063a\u0644 \u062e\u0648\u062f \u0631\u0627 \u0631\u0634\u062f \u0645\u06cc \u062f\u0647\u0646\u062f.\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/table>\n

      <\/code><\/p>\n<\/table>\n

      <\/code><\/li>\n<\/ul>\n<\/table>\n

      <\/code><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0631 HTML \u06cc\u06a9 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a. \u0628\u06cc\u0646 \u0686\u0631\u0627\u063a\u0647\u0627 \u00e0 r\u00e9p\u00e9tition, le CSS inline *obligatoire * et les nombreux clients mails qui interpr\u00e8tent le code diff\u00e9remment, cr\u00e9er une newsletter responsive et compatible partout peut vite devenir un cauchemar. Mais il existe une solution qui change la donne : MJML. Pourquoi coder des emails …<\/p>\n","protected":false},"author":2,"featured_media":98792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm18o0kxqr2tgpa3b2jyg.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-98791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/98791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=98791"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/98791\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/98792"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=98791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=98791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=98791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}