CINXE.COM
Blog Du Webdesign de l'UX et UI pour les experts du web
<!DOCTYPE html> <html lang="fr"> <head> <title>Blog Du Webdesign de l'UX et UI pour les experts du web</title> <meta name="theme-color" content="rgb(6, 8, 51)"> <meta name="msapplication-navbutton-color" content="rgb(6, 8, 51)"> <!-- METATAGS --> <!-- rebirth / basic --> <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <![endif]--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="alternate" type="application/rss+xml" href="https://www.blogduwebdesign.com/blog/do/rss.xml" /> <link href="//www.blogduwebdesign.com/themes/designlines/page/index.css?v=1739532857" rel="stylesheet"> <meta name="description" content="Ressource de r茅f茅rence dans le domaine du web design, de l'UX et de l'UI, le Blog du Webdesign est un hub d'expertise Internet. Ce blog design propose des articles de qualit茅, boites 脿 outils, ressources en lignes, tutoriels et analyses des derni猫res tendances UX et UI, le tout con莽u pour les experts du web." /> <link href="//www.blogduwebdesign.com/themes/designlines/bottomsite/index.css?v=1740386414" rel="stylesheet"> <link rel="canonical" href="https://www.blogduwebdesign.com/"> <meta name="generator" content="e-monsite (e-monsite.com)"> <link rel="icon" href="https://www.blogduwebdesign.com/medias/site/favicon/fav-bdwd-33.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Poppins:300,300italic,400,400italic,700,700italic&display=swap" rel="stylesheet"> <link href="//www.blogduwebdesign.com/themes/combined.css?v=6_1642769533_883" rel="stylesheet"> <link rel="preload" href="//www.blogduwebdesign.com/medias/static/themes/bootstrap_v4/js/jquery-3.6.3.min.js?v=26012023" as="script"> <script src="//www.blogduwebdesign.com/medias/static/themes/bootstrap_v4/js/jquery-3.6.3.min.js?v=26012023"></script> <link rel="preload" href="//www.blogduwebdesign.com/medias/static/themes/bootstrap_v4/js/popper.min.js?v=31012023" as="script"> <script src="//www.blogduwebdesign.com/medias/static/themes/bootstrap_v4/js/popper.min.js?v=31012023"></script> <link rel="preload" href="//www.blogduwebdesign.com/medias/static/themes/bootstrap_v4/js/bootstrap.min.js?v=31012023" as="script"> <script src="//www.blogduwebdesign.com/medias/static/themes/bootstrap_v4/js/bootstrap.min.js?v=31012023"></script> <script src="//www.blogduwebdesign.com/themes/combined.js?v=6_1642769533_883&lang=fr"></script> <script type="application/ld+json"> { "@context" : "https://schema.org/", "@type" : "WebSite", "name" : "blogduwebdesign", "url" : "https://www.blogduwebdesign.com/" } </script> <!-- Sendinblue newsletter --> <script type="text/javascript"> var sib_prefix = 'sib'; var sib_dateformat = 'dd-mm-yyyy'; </script> <!--<script type='text/javascript' src='https://app.emailing-ems.com/public/theme/version4/assets/js/src/subscribe-validate.js?v=1686291188'></script>--> <!-- Adsense --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1322338178895671" crossorigin="anonymous"></script> <!-- Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-GQRDZ6CXGF"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-GQRDZ6CXGF'); </script> <!-- Meta --> <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '239037031182877'); fbq('track', 'PageView'); </script> <meta name="facebook-domain-verification" content="6pqjh45ku8uy3paigz3kvk7gtyjjqt" /> <!-- //METATAGS --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-4VN4372P6E"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-4VN4372P6E'); </script> </head> <body id="welcome_index" data-template="accueil"> <!-- CUSTOMIZE AREA --> <div id="top-site" class="sticky-top"> <div class="row-container container"> <div class="row-content"> <div class="row pt-3"> <div class="col d-flex order-2 mb-0"> <div class="col-content w-100 position-relative"> <p class="mb-0 d-flex align-items-center justify-content-lg-end justify-content-between"><a class="mr-5" href="/pages/contact.html">Nous contacter</a><button aria-controls="collapseToolbox" aria-expanded="false" class="btn btn-main toggle-btn" data-target="#collapseToolbox" data-toggle="collapse" type="button">Toolbox<span class="d-none d-lg-inline-block position-relative"><span class="ms-4 middle-line"></span></span></button></p> <div class="collapse position-absolute" id="collapseToolbox"> <ul class="list-group"> <li class="list-group-item"><a href="/pages/outils-web/outils-tech/cms/"><i aria-hidden="true" class="material-icons md-web mr-3"></i>Outils de création de site</a></li> <li class="list-group-item"><a href="/pages/outils-web/outils-productivite/"><i aria-hidden="true" class="material-icons md-free_breakfast mr-3"></i>Outils productivité</a></li> <li class="list-group-item"><a href="/pages/outils-web/outils-de-gestion-d-entreprise/"><i aria-hidden="true" class="material-icons md-business_center mr-3"></i>Outils de gestion d'entreprise</a></li> <li class="list-group-item"><a href="/pages/outils-web/outils-marketing-digital/"><i aria-hidden="true" class="material-icons md-record_voice_over mr-3"></i>Outils marketing digital</a></li> <li class="list-group-item"><a href="/pages/outils-web/outils-design/"><i aria-hidden="true" class="material-icons md-color_lens mr-3"></i>Outils design</a></li> <li class="list-group-item"><a class="btn btn-outline-white rounded-sm" href="/pages/outils-web/">Tous les outils</a></li> </ul> </div> </div> </div> <div class="col order-1 d-none d-lg-block"> <div class="col-content"> <ul class="website-social-links"> <li><a class="btn text-linkedin" href="https://www.linkedin.com/company/blogduwebdesign/" target="_blank"><i class="sn-icon-linkedin"></i></a></li> <li><a class="btn text-twitter" href="https://twitter.com/BlogDuWebdesign" target="_blank"><i class="sn-icon-twitter"></i></a></li> <li><a class="btn text-facebook" href="https://www.facebook.com/BlogDuWebdesign/?locale=fr_FR" target="_blank"><i class="sn-icon-facebook"></i></a></li> <li><a class="btn text-instagram" href="https://www.instagram.com/blogduwebdesign/" target="_blank"><i class="sn-icon-instagram"></i></a></li> <li><a class="btn text-pinterest" href="https://www.pinterest.fr/BlogDuWebdesign/" target="_blank"><i class="sn-icon-pinterest"></i></a></li> </ul> </div> </div> </div> </div> </div> </div> <!-- BRAND TOP --> <!-- NAVBAR --> <nav class="navbar navbar-expand-lg position-sticky" id="navbar" data-animation="sliding"> <div class="container"> <a aria-label="brand" class="navbar-brand d-inline-flex align-items-center" href="https://www.blogduwebdesign.com/"> <img src="https://www.blogduwebdesign.com/medias/site/logos/logo-bdwd.png" alt="blogduwebdesign" class="img-fluid brand-logo mr-2 d-inline-block"> <span class="brand-titles d-lg-flex flex-column align-items-start"> <span class="brand-title d-none">blogduwebdesign</span> </span> </a> <button id="buttonBurgerMenu" title="BurgerMenu" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#menu"> <span></span> <span></span> <span></span> <span></span> </button> <div class="collapse navbar-collapse flex-lg-grow-0 ml-lg-auto" id="menu"> <ul class="navbar-nav navbar-menu nav-left"> <li class="nav-item" data-index="1"> <a class="nav-link" href="https://www.blogduwebdesign.com/blog/tech/"> Tech </a> </li> <li class="nav-item" data-index="2"> <a class="nav-link" href="https://www.blogduwebdesign.com/blog/webdesign/"> Webdesign </a> </li> <li class="nav-item" data-index="3"> <a class="nav-link" href="https://www.blogduwebdesign.com/blog/business-web/"> Business </a> </li> </ul> <a class="navbar-brand d-none" href="https://www.blogduwebdesign.com/"> <img src="https://www.blogduwebdesign.com/medias/site/logos/logo-bdwd.png" alt="blogduwebdesign" class="img-fluid brand-logo d-inline-block"> <span class="brand-titles d-lg-flex flex-column"> <span class="brand-title d-none">blogduwebdesign</span> </span> </a> <ul class="navbar-nav navbar-menu nav-right"> <li class="nav-item dropdown" data-index="1"> <a class="nav-link dropdown-toggle" href="https://www.blogduwebdesign.com/blog/graphisme/"> Graphisme </a> <div class="collapse dropdown-menu"> <ul class="list-unstyled"> <li> <a class="dropdown-item" href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/"> Inspiration </a> </li> <li class="dropdown-menu-root"> <a class="dropdown-item" href="https://www.blogduwebdesign.com/blog/graphisme/">Graphisme</a> </li> </ul> </div> </li> <li class="nav-item" data-index="2"> <a class="nav-link" href="https://www.blogduwebdesign.com/blog/developpement/"> D茅veloppement </a> </li> <li class="nav-item dropdown" data-index="3"> <a class="nav-link dropdown-toggle" href="https://www.blogduwebdesign.com/blog/creation-de-site/"> Cr茅ation de site </a> <div class="collapse dropdown-menu"> <ul class="list-unstyled"> <li> <a class="dropdown-item" href="https://www.blogduwebdesign.com/blog/creation-de-site/e-monsite/"> E-monsite </a> </li> <li> <a class="dropdown-item" href="https://www.blogduwebdesign.com/blog/creation-de-site/wordpress/"> WordPress </a> </li> <li> <a class="dropdown-item" href="https://www.blogduwebdesign.com/blog/creation-de-site/e-commerce/"> E-commerce </a> </li> <li> <a class="dropdown-item" href="https://www.blogduwebdesign.com/blog/creation-de-site/seo/"> SEO </a> </li> <li class="dropdown-menu-root"> <a class="dropdown-item" href="https://www.blogduwebdesign.com/blog/creation-de-site/">Cr茅ation de site</a> </li> </ul> </div> </li> </ul> </div> </div> </nav> <!-- HEADER --> <header id="header" class="container"> </header> <!-- //HEADER --> <!-- WRAPPER --> <div id="wrapper" class="margin-top"> <main id="main"> <div class="view view-pages" id="view-index" data-id-page="647da5edc28152c36f0f8f76"> <div id="site-module" class="site-module" data-itemid="647da5effd656478f5b71e5b" data-siteid="647da5ec63c6dcf507f8e891" data-category="item"></div> <div id="rows-647da5edc2a7d25e6bc88137" class="rows" data-total-pages="1" data-current-page="1"> <div id="row-647da5edc2a7d25e6bc88137-1" class="row-container pos-1 page_1 container"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" data-size="lg" id="cell-64897c95b234d4558d13ec71" class="col"> <div class="col-content col-no-widget"> <h1 style="max-width:700px;"><span>Par et pour des passionnés</span> experts du web</h1> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-2" class="row-container pos-2 page_1 container"> <div class="row-content"> <div class="row align-items-stretch" data-role="line"> <div data-role="cell" data-size="md" id="cell-649d56f388add4558d135af4" class="col widget-blog-single" style="-ms-flex-preferred-size:68%;flex-basis:68%"> <div class="col-content"> <div id=""> <div class="card-deck blog-items list-style no-gutters mr-0" data-addon="blog"> <div class="card blog-item" data-category="inspiration-graphique" data-date="02/14/2025"> <div class="row no-gutters"> <div class="d-flex col item-img-col"> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/meilleures-campagnes-saint-valentin.html" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/blogduwebdesign-meilleures-campagnes-st-valentin-ikea-2.jpg?fx=c_650_366" alt="Top 14 des meilleures campagnes de pub Saint Valentin" class="mx-auto d-block" width="650" height="366"> </a> </div> <div class="col item-txt-col"> <div class="card-body"> <p class="item-category"> <span class="in-category"><i class="material-icons text-muted md-folder_open"></i> Dans</span> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/">Inspiration</a> </p> <p class="metas"> <span class="meta-date">Le 14/02/2025</span> </p> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/meilleures-campagnes-saint-valentin.html">Top 14 des meilleures campagnes de pub Saint Valentin</a> </p> <div class="description mb-3"> <p>Faites le plein de <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design/">créativité</a> avec les meilleures campagnes de pub pour la Saint Valentin !</p> <p>Le 14 février est une occasion spéciale pour les marques de faire preuve de créativité dans leur communication. Que ce soit pour vendre des produits ou simplement pour célébrer l'amour, les <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/exemples-campagnes-marketing-black-friday.html">campagnes marketing</a> qui sortent du lot sont celles qui réussissent à toucher les consommateurs de manière émotionnelle.</p> <p>Nous avons donc sélectionné pour vous 14 publicités marquantes de la Saint-Valentin pour vous <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/">inspirer</a> et stimuler votre créativité.</p> </div> <p> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/meilleures-campagnes-saint-valentin.html" class="btn btn-primary btn-sm">Lire la suite</a> </p> </div> </div> </div> </div> </div> </div> </div> </div> <div data-role="cell" data-size="sm" id="cell-64e717b0687bfaa963cb722f" class="col edito ml-lg-4 d-none d-xl-block" style="-ms-flex-preferred-size:32%;flex-basis:32%"> <div class="col-content col-no-widget"> <p><i aria-hidden="true" class="bubble-icon material-icons md-laptop_mac"></i></p> <h2>La référence dans le domaine du web</h2> <p class="mb-4">Ressource de <strong>référence dans le domaine du web design, de l'UX et de l'UI</strong>, le Blog du Webdesign est un hub d'expertise Internet. Ce blog design propose des articles de qualité, des <a href="/pages/outils-web/">boites à outils web</a>, des <a href="/pages/ressources-web/">ressources design</a> en ligne, des <a href="/pages/tutoriels/">tutoriels webdesign</a> approfondis et des analyses pointues des dernières tendances UX et UI. Le tout conçu par et pour des passionnés experts du web.</p> <p><a class="btn btn-default" href="pages/contact.html"><i aria-hidden="true" class="material-icons md-arrow_forward mr-2"></i>Nous contacter</a></p> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-3" class="row-container pos-3 page_1 container"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" data-size="lg" id="cell-6480a4e8bce8d4558d134091" class="col widget-blog-items"> <div class="col-content"> <div id="blog_items0"> <div class="card-deck blog-items default-style default-4-col" data-addon="blog"> <div class="card blog-item" data-category="inspiration-graphique" data-date="02/11/2025"> <div class="card-header"> <span class="in-category"><i class="material-icons text-muted md-folder_open"></i> Dans</span> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/">Inspiration</a> </div> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/meilleures-pubs-superbowl.html" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/pub-super-bowl-2025.webp?fx=c_1200_675" alt="Les 15 meilleures pubs du Super Bowl 2025" class="mx-auto d-block" width="1200" height="675"> </a> <div class="card-body"> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/meilleures-pubs-superbowl.html">Les 15 meilleures pubs du Super Bowl 2025</a> </p> <p class="meta"> <span class="meta-date">Le 11/02/2025</span> </p> <div class="description"> <p>Cette année encore, le Super Bowl n’a pas seulement offert un spectacle épique sur le terrain, il a aussi été le théâtre des publicités les plus attendues de l’année. Chaque année, les plus grandes marques rivalisent d’ingéniosité pour captiver des millions de spectateurs du monde entier avec des spots publicitaires mémorables. Entre émotions fortes, humour décalé et innovations technologiques, les pubs du Super Bowl sont devenues un véritable show dans le show !</p> <p data-end="904" data-start="550">Pour le Super Bowl 2025, les annonceurs ont redoublé de créativité : des célébrités inattendues, des bandes-son iconiques, et des <a href="https://www.blogduwebdesign.com/blog/graphisme/erreurs-frequentes-montage-video.html">effets spéciaux</a> spectaculaires qui font déjà le buzz sur les <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-social-media">réseaux sociaux</a>. Alors sans plus attendre, on vous invite à découvrir les meilleures pubs du Super Bowl 2025 qu'il ne fallait pas manquer.</p> </div> </div> </div> <div class="card blog-item" data-category="webdesign" data-date="01/21/2025"> <div class="card-header"> <span class="in-category"><i class="material-icons text-muted md-folder_open"></i> Dans</span> <a href="https://www.blogduwebdesign.com/blog/webdesign/">Webdesign</a> </div> <a href="https://www.blogduwebdesign.com/blog/webdesign/idees-cadeaux-webdesigner-saint-valentin.html" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/blogduwebdesign-idees-cadeaux-geek-webdesigner-graphiste-saint-valentin-bougie-programmeur.webp?fx=c_1200_675" alt="14 id茅es cadeaux 脿 offrir 脿 un webdesigner pour la Saint Valentin" class="mx-auto d-block" width="1200" height="675"> </a> <div class="card-body"> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/blog/webdesign/idees-cadeaux-webdesigner-saint-valentin.html">14 id茅es cadeaux 脿 offrir 脿 un webdesigner pour la Saint-Valentin</a> </p> <p class="meta"> <span class="meta-date">Le 21/01/2025</span> </p> <div class="description"> <p>Trouvez le <a href="https://www.blogduwebdesign.com/blog/webdesign/idees-cadeaux-webdesigner.html">cadeau parfait</a> pour votre <a href="https://www.blogduwebdesign.com/blog/webdesign/comment-devenir-webdesigner.html">webdesigner</a> ou geek préféré pour cette <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/meilleures-campagnes-saint-valentin.html">Saint-Valentin</a> avec notre sélection de 14 idées originales.</p> <p>De gadgets <a href="https://www.blogduwebdesign.com/blog/tech/">high-tech</a> à des accessoires de bureau stylés, surprenez-les avec des cadeaux qui reflètent leur passion pour le digital. Faites de cette fête des amoureux une célébration inoubliable avec des présents qui allient créativité, design et amour technologique.</p> <p>Découvrez nos suggestions qui feront le bonheur de votre moitié !</p> </div> </div> </div> <div class="card blog-item" data-category="inspiration-graphique" data-date="01/14/2025"> <div class="card-header"> <span class="in-category"><i class="material-icons text-muted md-folder_open"></i> Dans</span> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/">Inspiration</a> </div> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/cartes-saint-valentin-originales-inspirantes.html" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/blogduwebdesign-inspiration-cartes-saint-valentin-originales-top-secret.webp?fx=c_1200_675" alt="14 id茅es de cartes de Saint-Valentin originales et inspirantes" class="mx-auto d-block" width="1200" height="675"> </a> <div class="card-body"> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/cartes-saint-valentin-originales-inspirantes.html">14 id茅es de cartes de Saint-Valentin originales et inspirantes</a> </p> <p class="meta"> <span class="meta-date">Le 14/01/2025</span> </p> <div class="description"> <p>La <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/meilleures-campagnes-saint-valentin.html">Saint-Valentin</a> approche à grands pas, c'est le moment idéal pour stimuler votre <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design/">créativité</a> et exprimer votre amour de manière inoubliable.</p> <p>Que vous décidiez d'acheter une carte déjà faite ou de créer la vôtre, il est important de choisir un message qui reflète votre amour et votre appréciation pour votre partenaire.</p> <p>C'est pourquoi, pour vous aider dans votre recherche, nous avons sélectionné pour vous 14 <a href="https://www.blogduwebdesign.com/blog/graphisme/inspiration-graphique/cartes-voeux-originales-inspirantes.html">cartes créatives</a> qui pourraient faire fondre le cœur de votre bien-aimé(e).</p> </div> </div> </div> <div class="card blog-item" data-category="graphisme" data-date="01/08/2025"> <div class="card-header"> <span class="in-category"><i class="material-icons text-muted md-folder_open"></i> Dans</span> <a href="https://www.blogduwebdesign.com/blog/graphisme/">Graphisme</a> </div> <a href="https://www.blogduwebdesign.com/blog/graphisme/guide-meilleures-pratiques-campagnes-emailing-soldes-hiver.html" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/campagnes-emailing-soldes-hiver.jpg?fx=c_1200_675" alt="Guide complet des meilleures pratiques pour vos campagnes emailing pour les soldes hiver" class="mx-auto d-block" width="1200" height="675"> </a> <div class="card-body"> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/blog/graphisme/guide-meilleures-pratiques-campagnes-emailing-soldes-hiver.html">Guide complet des meilleures pratiques pour vos campagnes emailing pour les soldes hiver</a> </p> <p class="meta"> <span class="meta-date">Le 08/01/2025</span> </p> <div class="description"> <p>Les soldes d'hiver représentent une période cruciale pour les <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-marketing-digital/">marketeurs</a>, avec une opportunité unique de captiver l'attention des consommateurs. Dans cet article, nous allons explorer en détail comment préparer des <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-marketing-digital/logiciels-emailing/">campagnes emailing efficaces</a> pour maximiser l'impact de vos offres pendant cette saison frénétique des soldes d'hiver.</p> <p>En prime, nous vous offrons des <a href="https://www.blogduwebdesign.com/pages/ressources-web/">ressources gratuites</a> pour faciliter la mise en œuvre de ces conseils.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-4" class="row-container pos-4 page_1 container"> <div class="row-content"> <div class="row align-items-stretch" data-role="line"> <div data-role="cell" data-size="sm" id="cell-64ae57765866d4558d1312c7" class="col widget-page-single" style="-ms-flex-preferred-size:50%;flex-basis:50%"> <div class="col-content"> <div id=""> <div class="card-deck page-items list-style " data-addon="pages"> <div class="card page-item"> <div class="row no-gutters"> <div class="d-flex col item-img-col"> <a href="https://www.blogduwebdesign.com/pages/ressources-web/mockups/mockup-iphone-gratuit.html" class="card-object"> <img loading="lazy" src="/medias/images/blogduwebdesign-mockup-gratuit-iphone-15-fond-sombre.webp?fx=c_650_366" alt="" class="mx-auto d-block" width="650" height="366"> </a> </div> <div class="col item-txt-col"> <div class="card-body p-4"> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/pages/ressources-web/mockups/mockup-iphone-gratuit.html">24 mockups d鈥檌Phone gratuits</a> </p> <div class="description"> D茅couvrez notre collection de mockups des derniers t茅l茅phones d'Apple pour sublimer vos applications, avec des mod猫les modifiables dans Sketch, Figma ou Photoshop. Mettez-les en situation ou utilisez-les sans fond pour un rendu professionnel ! </div> </div> </div> </div> </div> </div> </div> </div> </div> <div data-role="cell" data-size="sm" id="cell-64e718c1be2e8e16fba7506d" class="col widget-page-single" style="-ms-flex-preferred-size:50%;flex-basis:50%"> <div class="col-content"> <div id=""> <div class="card-deck page-items list-style " data-addon="pages"> <div class="card page-item"> <div class="row no-gutters"> <div class="d-flex col item-img-col"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design/checklist-design.html" class="card-object"> <img loading="lazy" src="/medias/images/blogduwebdesign-outils-checklist-design-guide-meilleures-pratiques-conception-web-ui-cover.jpg?fx=c_650_366" alt="" class="mx-auto d-block" width="650" height="366"> </a> </div> <div class="col item-txt-col"> <div class="card-body p-4"> <p class="item-category"> <i class="material-icons text-muted md-folder_open"></i> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design/">Outils design</a> </p> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design/checklist-design.html">Checklist Design</a> </p> <div class="description"> Checklist Design, l'outil essentiel pour les designers UI/UX ! Organisez votre processus de cr茅ation avec des checklists claires et efficaces pour concevoir des exp茅riences utilisateur optimales. </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-5" class="row-container pos-5 page_1 muted"> <div class="row-content container"> <div class="row" data-role="line"> <div data-role="cell" data-size="lg" id="cell-648ae7702403d4558d13e27e" class="col"> <div class="col-content col-no-widget"> <h2 style="max-width:500px;"><span>Le guide ultime des outils</span> pour les pros du web</h2> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-6" class="row-container pos-6 fancy-categories page_1 muted"> <div class="row-content container"> <div class="row" data-role="line"> <div data-role="cell" data-size="lg" id="cell-6489afb9bb25d4558d139a63" class="col widget-page-categories-list"> <div class="col-content"> <div id="page_categories_list0"> <div class="card-deck page-categories default-style default-3-col no-gutters mr-0" data-addon="pages"> <div class="card page-category" data-category="Outils productivit茅"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-productivite" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/outils-productivite-5.jpg?fx=c_1200_675" width="1200" height="675" alt="Outils productivit茅" class="mx-auto d-block"> </a> <div class="card-body"> <p class="media-heading d-flex align-items-start"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-productivite">Outils productivit茅</a> </p> <div class="description"> Boostez votre productivité avec notre sélection des outils en ligne les plus performants. Découvrez les solutions incontournables pour optimiser votre travail avec cette liste ultime des outils de productivité. </div> </div> </div> <div class="card page-category" data-category="Outils marketing digital"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-marketing-digital" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/outil-marketing-digital-2.jpg?fx=c_1200_675" width="1200" height="675" alt="Outils marketing digital" class="mx-auto d-block"> </a> <div class="card-body"> <p class="media-heading d-flex align-items-start"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-marketing-digital">Outils marketing digital</a> </p> <div class="description"> Découvrez des solutions puissantes pour booster votre présence en ligne, avec notre sélection des outils les plus efficaces pour optimiser votre stratégie marketing, que ce soit pour le SEO, le marketing de contenu, les réseaux sociaux ou l'e-mail marketing. </div> </div> </div> <div class="card page-category" data-category="Outils tech"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-tech" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/outils-tech.jpg?fx=c_1200_675" width="1200" height="675" alt="Outils tech" class="mx-auto d-block"> </a> <div class="card-body"> <p class="media-heading d-flex align-items-start"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-tech">Outils tech</a> </p> <div class="description"> Nous avons rassemblé les outils les plus efficaces pour vous aider à créer, optimiser et surveiller vos projets web de manière efficace et professionnelle. Que vous cherchiez le meilleur CMS, des outils de monitoring performants, des heatmaps détaillées ou d'autres solutions techniques, notre guide des meilleurs outils tech a ce qu'il vous faut. </div> </div> </div> <div class="card page-category" data-category="Outils design"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/outils-design-2.jpg?fx=c_1200_675" width="1200" height="675" alt="Outils design" class="mx-auto d-block"> </a> <div class="card-body"> <p class="media-heading d-flex align-items-start"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design">Outils design</a> </p> <div class="description"> Découvrez les outils design incontournables pour sublimer votre créativité. Avec notre sélection des meilleurs logiciels et ressources pour la création graphique, pour donner vie à vos idées. </div> </div> </div> <div class="card page-category" data-category="Outils de gestion d'entreprise"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-de-gestion-d-entreprise" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/outils-gestion-entreprise.jpg?fx=c_1200_675" width="1200" height="675" alt="Outils de gestion d'entreprise" class="mx-auto d-block"> </a> <div class="card-body"> <p class="media-heading d-flex align-items-start"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-de-gestion-d-entreprise">Outils de gestion d'entreprise</a> </p> <div class="description"> Découvrez les secrets de la réussite en entreprise avec notre guide complet sur les meilleurs outils de gestion. Simplifiez vos opérations, maximisez votre productivité et prenez des décisions éclairées. </div> </div> </div> <div class="card page-category" data-category="Outils social media"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-social-media" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/outil-social-media.jpg?fx=c_1200_675" width="1200" height="675" alt="Outils social media" class="mx-auto d-block"> </a> <div class="card-body"> <p class="media-heading d-flex align-items-start"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-social-media">Outils social media</a> </p> <div class="description"> Devenez un maître du social media avec les outils de gestion des réseaux sociaux incontournables pour booster votre présence en ligne. Maximisez votre impact et simplifiez la gestion de vos médias sociaux. </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-7" class="row-container pos-7 page_1 container"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" data-size="lg" id="cell-648b37cbd563d4558d13d351" class="col"> <div class="col-content col-no-widget"> <h2 style="max-width:300px;"><span>Des outils IA</span><br /> pour vos projets</h2> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-8" class="row-container pos-8 page_1 container"> <div class="row-content"> <div class="row align-items-stretch" data-role="line"> <div data-role="cell" data-size="sm" id="cell-6489b12c059ad4558d1328c6" class="col widget-blog-single" style="-ms-flex-preferred-size:33%;flex-basis:33%"> <div class="col-content"> <div id=""> <div class="card-deck blog-items default-style " data-addon="blog"> <div class="card blog-item" data-category="webdesign" data-date="03/22/2024"> <div class="card-header"> <span class="in-category"><i class="material-icons text-muted md-folder_open"></i> Dans</span> <a href="https://www.blogduwebdesign.com/blog/webdesign/">Webdesign</a> </div> <a href="https://www.blogduwebdesign.com/blog/webdesign/comment-formuler-prompt-ia-efficace-concevoir-design-site-web.html" class="card-object"> <img loading="lazy" src="https://www.blogduwebdesign.com/medias/images/prompt-ia-conception-design-web-cover-v2.jpg?fx=c_1200_675" alt="Comment formuler un prompt IA efficace pour concevoir un design web ?" class="mx-auto d-block" width="1200" height="675"> </a> <div class="card-body"> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/blog/webdesign/comment-formuler-prompt-ia-efficace-concevoir-design-site-web.html">Comment formuler un prompt IA efficace pour concevoir un design de site web ?</a> </p> <p class="meta"> </p> <div class="description"> <p>Découvrez comment formuler un prompt IA efficace pour concevoir un <a href="https://www.blogduwebdesign.com/blog/webdesign/">design web</a> percutant ! Dans cet article, nous explorerons les étapes clés pour communiquer de manière claire et précise avec l'intelligence artificielle afin d'obtenir des résultats pertinents et adaptés à vos besoins de design.</p> <p>Préparez-vous à maîtriser l'art de la formulation de prompts pour exploiter pleinement le <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-marketing-digital/outils-seo/outils-seo-ia/">potentiel de l'IA</a> dans vos projets de conception web.</p> </div> </div> </div> </div> </div> </div> </div> <div data-role="cell" data-size="sm" id="cell-65d7334cb08e70296dca450a" class="col widget-page-single" style="-ms-flex-preferred-size:33%;flex-basis:33%"> <div class="col-content"> <div id=""> <div class="card-deck page-items default-style " data-addon="pages"> <div class="card page-item"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-marketing-digital/outils-seo/outils-seo-ia" class="card-object"> <img loading="lazy" src="/medias/images/seo-1.jpg?fx=c_1200_675" alt="" class="mx-auto d-block" width="1200" height="675"> </a> <div class="card-body"> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-marketing-digital/outils-seo/outils-seo-ia">Outils SEO IA</a> </p> <div class="description"> Ne laissez pas votre visibilit茅 en ligne au hasard ! D茅couvrez comment l'utilisation de l'IA en SEO peut non seulement optimiser votre classement dans les moteurs de recherche, mais 茅galement maximiser l'efficacit茅 de vos efforts聽marketing en ligne聽avec ces 6 outils indispensables. </div> </div> </div> </div> </div> </div> </div> <div data-role="cell" data-size="sm" id="cell-65d7334cb0a51cd13a954100" class="col widget-page-single" style="-ms-flex-preferred-size:33%;flex-basis:33%"> <div class="col-content"> <div id=""> <div class="card-deck page-items default-style " data-addon="pages"> <div class="card page-item"> <div class="card-header"> <i class="material-icons text-muted md-folder_open"></i> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design/logiciels-de-wireframe-prototypes/">Logiciels de wireframes et prototypes</a> </div> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design/logiciels-de-wireframe-prototypes/galileo.html" class="card-object"> <img loading="lazy" src="/medias/images/blogduwebdesign-outils-design-logiciel-interface-ia-galileo.jpg?fx=c_1200_675" alt="" class="mx-auto d-block" width="1200" height="675"> </a> <div class="card-body"> <p class="media-heading"> <a href="https://www.blogduwebdesign.com/pages/outils-web/outils-design/logiciels-de-wireframe-prototypes/galileo.html">Galileo</a> </p> <div class="description"> D茅couvrez Galileo AI : l'assistant virtuel qui utilise l'intelligence artificielle pour cr茅er des interfaces UI pour vous. En un clin d'艙il, il produit des designs s茅duisants 脿 partir de texte, en m茅langeant des 茅l茅ments graphiques, des images et du contenu,聽offrant ainsi une solution efficace pour les designers. </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-9" class="row-container pos-9 toolbox page_1 container"> <div class="row-content"> <h2 class="row-title" data-line-v-id="6480a3b050e0d4558d133959"> On recommande </h2> <div class="row align-items-stretch" data-role="line"> <div data-role="cell" data-size="xs" id="cell-6480a3b050e1d4558d131d8d" class="col" style="-ms-flex-preferred-size:25%;flex-basis:25%"> <div class="col-content col-no-widget"> <p class="mb-2"><a href="https://www.e-monsite.com/"><img alt="e-monsite cr茅ation de site web" height="40" src="/medias/images/logo-e-monsite-1.svg" width="150" /></a></p> <p><strong>Créez un site internet</strong> gratuitement avec e-monsite</p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6516e271f8d5811ae56da192" class="col" style="-ms-flex-preferred-size:25%;flex-basis:25%"> <div class="col-content col-no-widget"> <p class="mb-2"><a href="https://www.wuro.fr/pages/fonctionnalites/gestion-commerciale/factures/"><img alt="Wuro logiciel de facturation" height="40" src="/medias/images/logo-wuro-1.svg" width="110"></a></p> <p><strong>G茅rez votre facturation et votre entreprise</strong> avec Wuro</p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6516e271f8f1172f37c38156" class="col" style="-ms-flex-preferred-size:25%;flex-basis:25%"> <div class="col-content col-no-widget"> <p class="mb-2"><a href="https://www.madate.fr/"><img alt="Madate - Prise de rdv en ligne" height="40" src="/medias/images/logo-madate.svg" width="118" /></a></p> <p>Gérez <strong>les prises de rendez-vous en ligne</strong> avec madate</p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6516e271f8f653b517d79727" class="col" style="-ms-flex-preferred-size:25%;flex-basis:25%"> <div class="col-content col-no-widget"> <p class="mb-2"><a href="https://www.e-confiance.fr/"><img alt="e-confiance - collecte d'avis clients" height="40" src="/medias/images/logo-e-confiance.svg" width="190" /></a></p> <p>Collectez <strong>des avis clients authentiques</strong> avec e-confiance</p> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-10" class="row-container pos-10 panoply page_1 container"> <div class="row-content"> <div class="row align-items-stretch" data-role="line"> <div data-role="cell" data-size="sm" id="cell-6499a9227fcbd4558d13fbe5" class="col leaderboard" style="-ms-flex-preferred-size:34%;flex-basis:34%"> <div class="col-content d-flex flex-column justify-content-center col-no-widget"> <h2>La panoplie du Webdesigner.</h2> </div> </div> <div data-role="cell" data-size="xs" id="cell-6499a9227fcdd4558d132e17" class="col column-highlighted" style="-ms-flex-preferred-size:22%;flex-basis:22%"> <div class="col-content d-flex flex-column justify-content-center col-no-widget"> <p><i aria-hidden="true" class="material-icons md-build bubble-icon"></i></p> <p><a class="stretched-link" href="/pages/outils-web/">Les outils pour les pros du web</a></p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6499a9227fcfd4558d132cb9" class="col column-highlighted" style="-ms-flex-preferred-size:22%;flex-basis:22%"> <div class="col-content d-flex flex-column justify-content-center col-no-widget"> <p><i aria-hidden="true" class="material-icons md-business_center bubble-icon"></i></p> <p><a class="stretched-link" href="/pages/ressources-web/">Les ressources web design</a></p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6499a9227fd1d4558d1309de" class="col column-highlighted" style="-ms-flex-preferred-size:22%;flex-basis:22%"> <div class="col-content d-flex flex-column justify-content-center col-no-widget"> <p><i aria-hidden="true" class="material-icons md-school bubble-icon"></i></p> <p><a class="stretched-link" href="/pages/tutoriels/">Les tutoriels UI et UX</a></p> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-11" class="row-container pos-11 page_1 container"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" data-size="lg" id="cell-649c4114c364d4558d13c7a4" class="col"> <div class="col-content col-no-widget"> <div class="widget-image text-center"> <a title="Bandeau professionnel du web" href="/annuaire/agences-de-communication/"> <img src="/medias/images/bandeau-professionnel-web-4.jpg" alt="Bandeau professionnel du web" width="1270" height="308" loading="lazy" class="rounded"> </a> </div> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-12" class="row-container pos-12 over-index page_1 container"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" data-size="lg" id="cell-6489c3abdd25d4558d13ddb5" class="col"> <div class="col-content col-no-widget"> <div class="card bdwd_notif" id="bdwd_newsletter_modal"> <div class="card-header w-100 py-2"> <p class="mb-0"><img src="/medias/images/logo-bdwd-without-baseline-1.svg"/ width="180" height="26" alt="Logo Blog du Webdesign" loading="lazy"></p> <button aria-label="close" class="btn notif-close"><i aria-hidden="true" class="material-icons md-close"></i></button> </div> <p class="mb-0"><img src="/medias/images/mockup-newsletter-bdwd.jpg" alt="newsletter blog du webdesign" width="800" height="372" class="img-fluid" loading="lazy"/></p> <div class="card-body position-relative"> <div id="sib_embed_signup"> <div class="forms-builder-wrapper"> <input type="hidden" id="sib_embed_signup_lang" value="fr"> <input type="hidden" id="sib_embed_invalid_email_message" value="Cette adresse email n'est pas valide."> <input type="hidden" name="primary_type" id="primary_type" value="email"> <div id="sib_loading_gif_area" style="position: absolute;z-index: 9999;display: none;"> <img src="https://app.emailing-ems.com/public/theme/version4/assets/images/loader_sblue.gif" style="display: block;margin-left: auto;margin-right: auto;position: relative;top: 40%;"> </div> <form class="description mb-0" id="theform" name="theform" action="https://app.emailing-ems.com/users/subscribeembed/js_id/7o1j/id/1" onsubmit="return false;"> <input type="hidden" name="js_id" id="js_id" value="7o1j"> <input type="hidden" name="from_url" id="from_url" value="yes"> <input type="hidden" name="hdn_email_txt" id="hdn_email_txt" value=""> <div class="sib-container rounded ui-sortable"> <input type="hidden" name="req_hid" id="req_hid" value=""> <div class="row align-items-center"> <div class="col-3 pr-3"> <p><i style="height:50px;width:50px;" aria-hidden="true" class="material-icons md-mail bubble-icon"></i></p> </div> <div class="col-9 pl-0"> <p class="h3" data-editfield="newsletter_name">Abonnez-vous 脿 la newsletter des pros du web </p> </div> </div> <p>Pour ne pas rater les prochains articles, pensez 脿 vous abonner 脿 notre newsletter :</p></p> <div class="view-messages" style=" margin:5px 0;"> </div> <!-- an email as primary --> <div class="primary-group email-group forms-builder-group ui-sortable" style=""> <div class="row mandatory-email mx-0 mb-4"> <!-- <div class="lbl-tinyltr fake-label">Votre e-mail :<red>*</red> </div> --> <input class="form-control" type="text" name="email" id="email" value="" placeholder="Votre email"> <div></div> <div class="hidden-btns"> <a class="btn move" href="#"><i class="fa fa-arrows"></i></a><br> <!--<a class="btn btn-danger delete" href="#"><i class="fa fa-trash-o fa-inverse"></i></a>--> </div> </div> </div> <!-- end of primary --> <button class="btn btn-primary" type="submit" data-editfield="subscribe">S'inscrire 脿 la newsletter</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="row-647da5edc2a7d25e6bc88137-13" class="row-container pos-13 page_1 container"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" data-size="lg" id="cell-6489d356a95cd4558d139a30" class="col"> <div class="col-content col-no-widget"> <script type="text/javascript"> var notifShown = false; $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 1500 && notifShown === false) { $("#bdwd_newsletter_modal").css('display', 'flex').fadeIn().animate({ opacity: 1, }); notifShown = true; } }); }); //Alerts/Notifications $(".notif-close").on('click', function(e){ $(this).parents(".bdwd_notif").css('display', 'none').css('opacity', '0'); }); </script> </div> </div> </div> </div> </div> </div> </div> <script> emsChromeExtension.init('page', '647da5edc28152c36f0f8f76', 'e-monsite.com'); </script> </main> </div> <!-- //WRAPPER --> <footer id="footer"> <div id="rows-6480a45df7a5d4558d131b04" class="rows" data-total-pages="1" data-current-page="1"> <div id="row-6480a45df7a5d4558d131b04-1" class="row-container pos-1 page_1"> <div class="row-content container"> <h2 class="row-title text-center" data-line-v-id="6480a3cf2487d4558d130776"> Les sujets populaires </h2> <div class="row" data-role="line"> <div data-role="cell" data-size="xs" id="cell-6480a3cf248ed4558d13a28e" class="col " style="-ms-flex-preferred-size:20%;flex-basis:20%"> <div class="col-content col-no-widget"> <p style="text-align: center;"><a href="https://www.blogduwebdesign.com/pages/outils-web/outils-tech/cms/">10 plateformes pour créer une boutique en ligne</a></p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6480a45df798d4558d13a355" class="col" style="-ms-flex-preferred-size:20%;flex-basis:20%"> <div class="col-content col-no-widget"> <p style="text-align: center;"><a href="https://www.blogduwebdesign.com/pages/outils-web/outils-de-gestion-d-entreprise/logiciels-de-facturation/">10 logiciels de facturation simples pour les freelances</a></p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6480a45df79ad4558d13b70d" class="col" style="-ms-flex-preferred-size:20%;flex-basis:20%"> <div class="col-content col-no-widget"> <p style="text-align: center;"><a href="https://www.blogduwebdesign.com/pages/outils-web/outils-productivite/logiciels-crm/12-logiciels-crm-gratuits-pour-les-agences-et-les-freelances.html">Logiciels CRM gratuits</a></p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6480a45df79cd4558d138e58" class="col" style="-ms-flex-preferred-size:20%;flex-basis:20%"> <div class="col-content col-no-widget"> <p style="text-align: center;"><a href="https://www.blogduwebdesign.com/pages/outils-web/outils-marketing-digital/outils-seo/">Les outils SEO</a></p> </div> </div> <div data-role="cell" data-size="xs" id="cell-6480a45df79ed4558d13ae67" class="col" style="-ms-flex-preferred-size:20%;flex-basis:20%"> <div class="col-content col-no-widget"> <p style="text-align: center;"><a href="https://www.blogduwebdesign.com/blog/creation-de-site/wordpress/avis-sur-le-theme-divi-elegantthemes.html">WordPress Divi</a></p> </div> </div> </div> </div> </div> <div id="row-6480a45df7a5d4558d131b04-2" class="row-container pos-2 page_1"> <div class="row-content container"> <div class="row" data-role="line"> <div data-role="cell" data-size="sm" id="cell-64917b29afb5d4558d13b621" class="col text-lg-right text-center align-self-stretch" style="-ms-flex-preferred-size:33.333333333333%;flex-basis:33.333333333333%"> <div class="col-content d-flex flex-column justify-content-end col-no-widget"> <p class="h3">Le Blog du Webdesign</p> <ul class="list-unstyled"> <li><a href="/pages/contact.html">Contact</a></li> <li><a href="/pages/a-propos-du-blog-du-webdesign.html">À propos</a></li> <li><a href="/about/legal/">Mentions légales</a></li> <li class="mb-0"><a href="/annuaire/agences-de-communication/">Annuaire des agences de communication</a></li> </ul> </div> </div> <div data-role="cell" data-size="sm" id="cell-64917b29afb7d4558d13d360" class="col" style="-ms-flex-preferred-size:33.333333333333%;flex-basis:33.333333333333%"> <div class="col-content col-no-widget"> <p class="text-center"><a href="https://www.blogduwebdesign.com/"><img alt="Logo Blog du Webdesign" class="img-fluid" height="100" loading="lazy" src="/medias/images/logo-bdwd-square-white.svg" width="100" /></a></p> <p class="text-muted text-center"><small>Copyright © 2025 <br /> Certaines pages de ce site contiennent des liens d’affiliation.</small></p> <p class="text-center mb-2"><a href="/pages/confidentialite.html">Politique de confidentialité</a></p> </div> </div> <div data-role="cell" data-size="sm" id="cell-64917b29afbad4558d138275" class="col text-center text-lg-left align-self-stretch" style="-ms-flex-preferred-size:33.333333333333%;flex-basis:33.333333333333%"> <div class="col-content d-flex flex-column justify-content-end col-no-widget"> <p class="h3">Partenaires</p> <ul class="list-unstyled"> <li><a href="https://www.wuro.fr/">Wuro</a></li> <li><a href="https://www.agendaculturel.fr/">Agenda Culturel</a></li> <li>Edité par <a href="https://www.awelty.fr/" rel="noopener" target="_blank">Awelty</a></li> <li class="mb-0">Site fièrement créé avec <a href="https://www.e-monsite.com">e-monsite.com</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="container"> </div> <ul id="legal-mentions" class="footer-mentions"> <li><a href="https://www.blogduwebdesign.com/about/legal/">Mentions l茅gales</a></li> </ul> </footer> <script> // Sendinblue script (function($) { var dateFormat; if( $("input[name='hdn_new_format']").length ) { dateFormat = sib_dateformat; } else { dateFormat = 'dd/mm/yyyy'; } $('.tooltip').css({left: '101%'}); // check if inputed sms value is valid function isValidSms(smsField, sms) { sms = sms.replace(/\b(0(?!\b))+/g, ""); var tempSms = sms.replace(/( |\(|\)|\.|\-)/g, ''); if (tempSms.length > 19 || tempSms.length < 6) { return false; } return true; } // check if inputed date value is valid function isValidDate(date) { var filter; if(dateFormat == 'dd/mm/yyyy') { filter = /^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g; } if(dateFormat == 'dd-mm-yyyy') { filter = /^(((0[1-9]|[12]\d|3[01])-(0[13578]|1[02])-((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)-(0[13456789]|1[012])-((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])-02-((19|[2-9]\d)\d{2}))|(29-02-((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g; } else if(dateFormat == 'mm-dd-yyyy') { filter = /^(((0[13578]|1[02])-(0[1-9]|[12]\d|3[01])-((19|[2-9]\d)\d{2}))|((0[13456789]|1[012])-(0[1-9]|[12]\d|30)-((19|[2-9]\d)\d{2}))|(02-(0[1-9]|1\d|2[0-8])-((19|[2-9]\d)\d{2}))|(02-29-((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g; } if (filter.test(date)) { return true; } return false; } // allow to input digit and + only for sms function validateInteger(smsLength, evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); // 0-9, +/-, space, brackets var regex = /[ +0-9()-]/; if( smsLength == 'date' ) { regex = /[ 0-9-]/; smsLength = 0; } if( !regex.test(key) || smsLength > 19 ) { theEvent.returnValue = false; key = theEvent.keyCode; // ignore input for del,tab, back, left, right, home and end key if(theEvent.preventDefault && key != 9 && key != 8 ) theEvent.preventDefault(); } } $('#'+sib_prefix+'_embed_signup .'+sib_prefix+'-container').find('.hidden-btns').remove(); $('#'+sib_prefix+'_embed_signup .'+sib_prefix+'-container').find('.message_area').remove(); // add interest list ids for unsubscribe lists per interesting if( $('.sib_list_row').length && !$('input[name=interestLists]').length ) { var interestList = ''; $('.sib_list_row .sib_list').each(function(){ interestList += '~' + $(this).data('listid'); }); $('.sib_list_row').append('<input type="hidden" name="interestLists" value="' + interestList + '">'); } $('#'+sib_prefix+'_embed_signup #theform').on('submit',function() { var theForm = $(this); if (theForm.hasClass(sib_prefix+'_processing')) { return false; } var wrapper = theForm.closest('.forms-builder-wrapper'); wrapper.find('#'+sib_prefix+'_loading_gif_area').width(theForm.width()).height(theForm.height()); var reqField = theForm.find('#req_hid').val(); var primaryType = wrapper.find('#primary_type').val() == 'undefined' ? 'email' : wrapper.find('#primary_type').val(); if(primaryType == 'email') { reqField = 'email' + reqField; }else{ reqField = 'SMS' + reqField; } var required = reqField.split("~"); var sendinblueFormLang = wrapper.find('#'+sib_prefix+'_embed_signup_lang').val(); var emptyError = "Please complete this field."; var emailError = wrapper.find('#'+sib_prefix+'_embed_invalid_email_message').val(); var smsError = 'The SMS field must contain between 6 and 19 digits.'; var dateError = "Invalid date format"; if (sendinblueFormLang == "fr") { emptyError = "Merci de remplir ce champ."; smsError = 'Le champ SMS doit contenir entre 6 et 19 chiffres.'; dateError = "Date de format invalide"; } else if (sendinblueFormLang == "es") { emptyError = "Por favor, complete este campo"; smsError = 'El campo SMS debe contener entre 6 y 19 cifras.'; dateError = "Formato de fecha no v脙隆lido"; } else if (sendinblueFormLang == "pt") { emptyError = "Preencha este campo."; smsError = 'O campo SMS deve conter entre 6 e 19 d脙颅gitos.'; dateError = "O formato da data 脙漏 inv脙隆lido"; } else if (sendinblueFormLang == "it") { emptyError = "Compilare questo campo."; smsError = 'Il campo SMS deve contenere dai 6 ai 19 caratteri.'; dateError = "Il formato della data non 脙篓 valido"; } else if (sendinblueFormLang == "de") { emptyError = "Bitte f脙录llen Sie dieses Feld aus."; smsError = 'Das SMS-Feld muss 6 bis 19 Ziffern enthalten.'; dateError = "Ung脙录ltiges Datumsformat"; } theForm.find('div.alert').remove(); theForm.find('.message_area').remove(); for (i = 0; i < required.length; i++) { if ( required[i] == 'interestList' ) { if( $('.sib_list_row input:checkbox:checked').length == 0 ) { $('.sib_list_row').addClass("needsfilled"); $('.sib_list_row').append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442;margin-top: 5px;"><button type="button" class="close">x</button>' + emptyError + '</div>'); } }else { var input = theForm.find('input[name="' + required[i] + '"]'); var inputType = input.attr('type'); if (inputType == 'text' || inputType == 'number') { if (input.val() == "" || input.val() == emptyError) { input.closest('.row').addClass("needsfilled"); input.closest('.row').append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442;margin-top: 5px;"><button type="button" class="close">x</button>' + emptyError + '</div>'); } else { if (required[i] == 'email') { if (typeof EMAIL_REGEX != 'undefined' && !EMAIL_REGEX.test(input.val())) { input.closest('.row').addClass("needsfilled"); input.closest('.row').append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442;margin-top: 5px;"><button type="button" class="close">x</button>' + emailError + '</div>'); input.val(''); } else { input.closest('.row').removeClass("needsfilled"); } } else if (required[i] == 'SMS') { if ($('#sms_prefix').length && $('#sms_prefix').val() == '') { input.closest('.row').addClass("needsfilled"); input.closest('.row').append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442;margin-top: 5px;"><button type="button" class="close">x</button>' + emptyError + '</div>'); } else { input.closest('.row').removeClass("needsfilled"); } } else { input.closest('.row').removeClass("needsfilled"); } } } else if (inputType == 'radio') { if (input.is(':checked') == false) { input.closest('.row').addClass("needsfilled"); input.closest('.row').append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442;margin-top: 5px;"><button type="button" class="close">x</button>' + emptyError + '</div>'); } } else if (required[i] == 'Captcha' && typeof grecaptcha != 'undefined') { var captchaResponse = grecaptcha.getResponse(); if (captchaResponse.length == 0) { $(".captcha > div.row").addClass("needsfilled"); $(".captcha > div.row").append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442;margin-top: 5px;"><button type="button" class="close">x</button>' + emptyError + '</div>'); } else { $(".captcha > div.row").removeClass("needsfilled"); } } else { var fields = input.serializeArray(); if (fields.length == 0) { input.closest('.row').addClass("needsfilled"); } else { input.closest('.row').removeClass("needsfilled"); } } } } $(".row").each(function(){ var spanElement = $(this).find('span'); var ele = $(this).find("input"); var alertWidth = ele.width() + 10; var smsPrefix = ($(this).find('#sms_prefix').length > 0 ) ? $(this).find('#sms_prefix').val() : ''; if ( $(this).find('input[name=SMS]').length > 0 ) { var ele_sms = $(this).find('input[name=SMS]'); if (!isValidSms(ele_sms, smsPrefix + ele_sms.val()) && ele_sms.val() != "") { ele_sms.closest('.row').addClass("needsfilled"); ele_sms.closest('.row').append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442;margin-top: 5px;width:' + alertWidth + ';"><button type="button" class="close">x</button>'+ smsError +'</div>' ); ele_sms.val(''); } } if(spanElement.text() == dateFormat){ if (!isValidDate(ele.val()) && ele.val() != ""){ ele.closest('.row').addClass("needsfilled"); ele.closest('.row').append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442;margin-top: 5px;width:' + alertWidth + ';"><button type="button" class="close">x</button>'+ dateError +'</div>' ); ele.val(''); } } }); $('div.message_area button.close').on('click', function() { $(this).parent().remove(); }); if (theForm.find('input').closest('.row').hasClass("needsfilled") || $(".captcha > div.row").hasClass("needsfilled")) { return false; }else{ // submit ajax process --> coding here var requestUrl = theForm.attr('action'); var postData = theForm.serialize(); theForm.addClass(sib_prefix+'_processing'); theForm.parent().find('#'+sib_prefix+'_loading_gif_area').show(); theForm.css('opacity', '0.5'); $.ajax({ url:requestUrl, data : postData, dataType:'json', type:'POST', beforeSend:function(){ }, success:function(data){ var theForm = $('.'+sib_prefix+'_processing'); theForm.parent().find('#'+sib_prefix+'_loading_gif_area').hide(); theForm.css('opacity', '1'); if (data.result != undefined) { if ((data.result.result == 'success') || (data.result.result == 'emailExist') || (data.result.result == 'OK') || (data.result.result == 'OK_UPDATE')) { backColor = '#dff0d8'; borderColor = '#d6e9c6'; color = '#3c763d'; theForm[0].reset(); theForm.find('input:radio').prop('checked', false); } else { backColor = '#f2dede'; borderColor = '#ebccd1'; color = '#a94442'; } var messageHtml = '<div class="message_area" style="background-color: ' + backColor + ';border:1px solid ' + borderColor + '; color: ' + color + '"><button type="button" class="close">x</button>'; if (data.result.result == 'success' || data.result.result == 'OK') { messageHtml += data.result.succcess_msg; if (data.result.smsExist != ''){ var smsMSG = ''; var smsNumber = data.result.smsExist; smsMSG = data.result.smsExist_msg.split('[number]'); messageHtml += '. '+smsMSG[0]+smsNumber+smsMSG[1]; } if (data.result.url_redirect != '') { location.href = data.result.url_redirect; } } else if(data.result.result == 'sms_emailExist') { var emailMSG = ''; var emailAddress = data.result.emailExist; emailMSG = data.result.emailExist_msg.split('[address]'); messageHtml += '. '+emailMSG[0]+emailAddress+emailMSG[1]; } else if(data.result.result == 'invalid_request' || data.result.result == 'invalidEmail') { messageHtml += data.result.invalid_err_msg; } else if(data.result.result == 'invalidSms') { messageHtml += data.result.invalidSms_msg; } else if(data.result.result == 'emailExist' || data.result.result == 'OK_UPDATE') { messageHtml += data.result.exist_err_msg; if (data.result.smsExist != ''){ var smsMSG = ''; var smsNumber = data.result.smsExist; smsMSG = data.result.smsExist_msg.split('[number]'); messageHtml += '. '+smsMSG[0]+smsNumber+smsMSG[1]; } if (data.result.url_redirect != '') { location.href = data.result.url_redirect; } } else if(data.result.result == 'dateFormat' || data.result.result == 'reqMiss' ) { messageHtml += data.result.general_err_msg; } else if(data.result.result == 'invalidCaptcha') { messageHtml += data.result.general_err_msg; } messageHtml += '</div>'; theForm.find('.'+sib_prefix+'-container').prepend(messageHtml); $('div.message_area button.close').on('click', function() { $(this).parent().remove(); }); theForm.removeClass(sib_prefix+'_processing'); } } }); } return false; }); $('#'+sib_prefix+'_embed_signup :input').on('click',function() { if ($(this).closest('.row').hasClass("needsfilled") ) { $(this).closest('.row').find('div.message_area').remove(); $(this).closest('.row').removeClass("needsfilled"); } }); $('#'+sib_prefix+'_embed_signup input[type=radio]').on('click',function(){ if ($(this).closest('.row').hasClass("needsfilled") ) { $(this).attr('checked', true); $(this).closest('.row').find('div.message_area').remove(); $(this).closest('.row').removeClass("needsfilled"); } }); // allow to input 0-9 and - only for date field $("input").on('keypress', function(event) { if($(this).closest(".row").find("." + sib_prefix + "_dateformat").length > 0){ validateInteger('date', event); } }); $("#SMS").on('keypress', function (event){ var length = $(this).val().length; validateInteger(length, event); }); $("input[type=number]").on('keypress', function(event) { var theEvent = event || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); // 0-9, +/-, space, brackets var regex = /[0-9]/; if( !regex.test(key)) { theEvent.returnValue = false; key = theEvent.keyCode; // ignore input for del,tab, back, left, right, home and end key if(theEvent.preventDefault && key != 9 && key != 8 ) theEvent.preventDefault(); var eleRow = $(this).closest('.row'); var frmLang = eleRow.closest('.forms-builder-wrapper').find('#'+sib_prefix+'_embed_signup_lang').val(); var numberError = "Please enter a number."; if (frmLang == "fr") { numberError = "Veuillez entrer un nombre."; } else if (frmLang == "es") { numberError = "Please enter a number."; } else if (frmLang == "pt") { numberError = "Please enter a number."; } else if (frmLang == "it") { numberError = "Please enter a number."; } else if (frmLang == "de") { numberError = "Please enter a number."; } if( !eleRow.find('.message_area').length) { eleRow.append('<div class="message_area" style="background-color: #f2dede;border:1px solid #ebccd1; color: #a94442"><button type="button" class="close">x</button>' + numberError + '</div>' ); } } }); $(document).on('click', '.message_area .close', function() { $(this).closest('.message_area').remove(); }); $(document).on('click', '.sib-dropdown-toggle.country-flg', function() { $(".country-block ul").toggle(); }); $(document).on( 'click', '.country-block ul li a' ,function() { var code = $(this).data('code'); var cCode = $(this).data('c_code'); $('.sib-dropdown-toggle .cflags').attr('class','cflags'); $('.sib-dropdown-toggle .cflags').addClass(cCode); // update country prefix $('#sms_prefix').val('+' + code); $(".country-block ul").hide(); }); $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("country-block")) $(".country-block ul").hide(); }); if( $('.sms_field .country-block').length ) { var cflagsClasses = $('.sib-dropdown-toggle .cflags').attr('class').split(' '); if(cflagsClasses[1] && cflagsClasses[1] != '') { var countryCode = $('.sib-dropdown-menu').find('[data-c_code="' + cflagsClasses[1] + '"]').data('code'); // update country prefix $('#sms_prefix').val('+' + countryCode); } else { $('.sib-dropdown-toggle .cflags').addClass('FR'); var countryCode = $('.sib-dropdown-menu').find('[data-c_code="FR"]').data('code'); // update country prefix $('#sms_prefix').val('+' + countryCode); } } // set last submit to avoid refresh post $("#hdn_email_txt").val(new Date().getTime()); // gCaptcha responsive function rescale_gCaptcha(){ var width = $('#theform').find('#gcaptcha').parent().width(); if (width < 350) { var scale = width / 350; $('#gcaptcha').css('transform', 'scale(' + scale + ')'); $('#gcaptcha').css('-webkit-transform', 'scale(' + scale + ')'); $('#gcaptcha').css('transform-origin', '0 0'); $('#gcaptcha').css('-webkit-transform-origin', '0 0'); } } rescale_gCaptcha(); $(window).on('resize', function(){ rescale_gCaptcha(); }); $('#gcaptcha').css('margin-left', '0px'); }(jQuery));//end Sendinblue script </script> </body> </html>