Cr茅ation de site Web 脿 Amiens en Hauts de France

<!DOCTYPE html> <html lang="fr"> <head> <title>Cr茅ation de site Web 脿 Amiens en Hauts de France | Awelty</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="description" content="Vous 锚tes 脿 la recherche d鈥檜ne agence de cr茅ation de site web 脿 Amiens en Hauts de France ? Contactez l鈥檃gence web Awelty pour un site pro performant" /> <link rel="canonical" href="https://www.awelty.fr/pages/studio-web/creation-de-site/"> <meta name="generator" content="Awelty Agence Web (awelty.com)"> <link rel="icon" href="https://www.awelty.fr/medias/site/favicon/a_fav.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://www.awelty.fr/medias/site/mobilefavicon/icon_red.png?fx=c_114_114" /> <link rel="apple-touch-icon" sizes="72x72" href="https://www.awelty.fr/medias/site/mobilefavicon/icon_red.png?fx=c_72_72" /> <link rel="apple-touch-icon" href="https://www.awelty.fr/medias/site/mobilefavicon/icon_red.png?fx=c_57_57" /> <link rel="apple-touch-icon-precomposed" href="https://www.awelty.fr/medias/site/mobilefavicon/icon_red.png?fx=c_57_57" /> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"> <meta name="ahrefs-site-verification" content="cc12c106b6f6c58849e772686d8e843243072d6458681fc5a491b570c48fb927"> <meta name="facebook-domain-verification" content="a3l6om3vj78v4s3nb5glai42w7v82a" /> <script defer src="https://sibforms.com/forms/end-form/build/main.js"></script> <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', '430592938286861'); fbq('track', 'PageView'); </script>  <meta name="theme-color" content="#FFFFFF"> <meta name="msapplication-navbutton-color" content="#FFFFFF"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700%7CRoboto%20Condensed:300,400,700&display=swap" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="//www.awelty.fr/themes/combined.css?v=6_1646067808_2292" rel="stylesheet">  <script src="//www.awelty.fr/medias/static/themes/ems_framework/js/jquery.min.js"></script>   <script src="//www.awelty.fr/medias/static/themes/ems_framework/js/ems-framework.min.js?v=1743"></script> <script src="https://www.awelty.fr/themes/content.js?v=6_1646067808_2292&lang=fr"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-874445-2"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-874445-2'); </script> <script type="application/ld+json"> { "@context" : "https://schema.org/", "@type" : "WebSite", "name" : "Awelty", "url" : "https://www.awelty.fr/" } </script> </head> <body id="pages_run_studio-web_creation-de-site" class="default menu-fixed">  <nav class="navbar navbar-top navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button data-toggle="collapse" data-target="#navbar" data-orientation="horizontal" class="btn btn-link navbar-toggle"> <i class="fa fa-bars"></i> </button> <a class="brand" href="https://www.awelty.fr/"> <img src="https://www.awelty.fr/medias/site/logos/logo-awelty.jpg" alt="Awelty"> </a> </div> <div id="navbar" class="collapse"> <ul class="primary-navbar">  <li class="mother-container"> <div class="align-menu"> <a href="/pages/studio-web/creation-de-site/" class="mother-category">Studio web</a> <i class="ion-ios-arrow-down" aria-hidden="true"></i> </div> <div class="second-level" id="studio-web-menu"> <div> <ul> <li> <a href="/pages/studio-web/creation-de-site/" class="under-mother">Cr茅ation de site</a> </li> <li> <ul class="third-level"> <li><a href="/pages/studio-web/creation-de-site/site-e-commerce/">Cr茅ation de site e-commerce</a></li> <li><a href="/pages/studio-web/creation-de-site/site-e-commerce/creation-site-e-commerce-cms-prestashop.html">Cr茅ation de site PrestaShop</a></li> <li><a href="/pages/studio-web/creation-de-site/creation-refonte-site-web-vitrine.html">Cr茅ation de site vitrine</a></li> <li><a href="/pages/studio-web/creation-de-site/cms-awelty.html">CMS awelty</a></li> <li><a href="/pages/studio-web/creation-de-site/etapes-creation-site-web.html">Etapes de cr茅ation</a></li> <li><a href="/pages/studio-web/creation-de-site/tarifs-creation-de-site-internet.html">Tarifs d'un site web</a></li> <li><a href="/pages/studio-web/creation-de-site/exemples-de-sites-crees.html">Exemples de sites</a></li> <li><a href="/pages/studio-web/creation-de-site/webmastering-maintenance-site-web.html">Webmastering</a></li> </ul> </li> </ul> </div> <div class="margin-left"> <ul> <li> <span class="under-mother">D茅veloppement</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/studio-web/developpement/developpement-web-application-metier.html">D茅veloppement sp茅cifique</a></li> </ul> </li> </ul>  <ul> <li> <span class="under-mother">Application mobile</span> </li> <li> <ul class="third-level"> <li><a href="/pages/studio-web/application-mobile/developpement-applications-mobiles-sur-mesure.html">D茅veloppement d鈥檃pplication mobile</a></li> <li><a href="/pages/studio-web/application-mobile/etapes-creation-application-mobile.html">Les 茅tapes de cr茅ation</a></li> </ul> </li> </ul> <ul class="margin-t"> <li> <span class="under-mother">Chatbot</span> </li> <li> <ul class="third-level"> <li><a href="/pages/studio-web/agent-conversationnel/creation-chatbot-agent-conversationnel-amiens.html">Cr茅ation de Chatbot</a></li> </ul> </li> </ul> </div> </div> </li>  <li class="mother-container"> <div class="align-menu"> <a href="/pages/agence-de-communication/" class="mother-category">Communication</a> <i class="ion-ios-arrow-down" aria-hidden="true"></i> </div> <div class="second-level" id="communication-menu"> <div> <ul> <li> <a href="/pages/agence-de-communication/studio-graphique/" class="under-mother">Studio Graphique</a> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/agence-de-communication/studio-graphique/conception-pao.html">Conception PAO</a></li> </ul> </li> </ul> <ul> <li> <span class="under-mother">Webdesign</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/agence-de-communication/webdesign/template-e-monsite.html">Webdesign EMS</a></li> </ul> </li> </ul> </div> <div class="margin-left"> <ul> <li> <span class="under-mother margin-bottom">R茅seaux Sociaux</span> </li> <ul class="third-level margin-bottom"> <li><a href="/pages/agence-de-communication/reseaux-sociaux/communication-reseaux-sociaux.html">Gestion des r茅seaux sociaux</a></li> <li><a href="/pages/agence-de-communication/reseaux-sociaux/creation-banniere-video-facebook.html">Banni猫re Facebook anim茅e</a></li> </ul> </ul> <ul> <li> <span class="under-mother">Production audiovisuelle</span> </li> <ul class="third-level"> <li><a href="/pages/agence-de-communication/production-audiovisuelle/photographie.html">Photographies</a></li> <li><a href="/pages/agence-de-communication/production-audiovisuelle/videos.html">Vid茅os</a></li> <li><a href="/pages/agence-de-communication/production-audiovisuelle/motion-design.html">Motion-design</a></li> </ul> </ul> </div> </div> </li>  <li class="mother-container"> <div class="align-menu"> <a href="/pages/webmarketing/" class="mother-category">Webmarketing</a> <i class="ion-ios-arrow-down" aria-hidden="true"></i> </div> <div class="second-level" id="webmarketing-menu"> <div> <ul> <li> <a href="/pages/webmarketing/referencement-naturel/" class="under-mother">R茅f茅rencement naturel</a> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/webmarketing/referencement-naturel/audit-referencement-seo.html">Audit SEO</a></li> <li><a href="/pages/webmarketing/referencement-naturel/etapes-referencement-site-web.html">Etapes du r茅f茅rencement</a></li> <li><a href="/pages/webmarketing/referencement-naturel/charte-qualite-referencement.html">Charte de qualit茅</a></li> <li><a href="/pages/webmarketing/referencement-naturel/redaction-web.html">R茅daction web</a></li> </ul> </li> </ul> <ul> <li> <span class="under-mother">R茅f茅rencement payant</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/webmarketing/referencement-payant/creation-campagne-google-adwords-sea.html">Cr茅ation d'une campagne Ads</a></li> <li><a href="/pages/webmarketing/referencement-payant/campagnes-adwords.html">Gestion d鈥檜ne campagne Ads</a></li> </ul> </li> </ul> <ul> <li> <a href="/pages/webmarketing/campagne-e-mailing/" class="under-mother">Campagne emailing</a> </li>  </ul> </div> </div> </li>  <li class="mother-container"> <div class="align-menu"> <a href="/pages/formations-outils-innovants/" class="mother-category">Formations</a> <i class="ion-ios-arrow-down" aria-hidden="true"></i> </div> <div class="second-level" id="formation-menu"> <div> <ul> <li> <span class="under-mother">Cr茅ation de site internet</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/formations-outils-innovants/formation-creation-site-internet/">Formations cr茅ation de site internet</a></li> </ul> </li> </ul> <ul> <li> <span class="under-mother">R茅f茅rencement</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/formations-outils-innovants/formations-referencement-web/">Formations au r茅f茅rencement SEO et SEA</a></li> </ul> </li> </ul> <ul> <li> <span class="under-mother">R茅seaux sociaux</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/formations-outils-innovants/formations-reseaux-sociaux/">Formations aux r茅seaux sociaux</a></li> </ul> </li> </ul> </div> <div class="margin-left"> <ul> <li> <span class="under-mother">Chatbot</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/formations-outils-innovants/formation-chatbot/">Formations chatbot</a></li> </ul> </li> </ul> <ul> <li> <span class="under-mother">Gestion de projet</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/formations-outils-innovants/formation-gestion-de-projet/">Formations en gestion de projet</a></li> </ul> </li> </ul> <ul> <li> <span class="under-mother">Emailing</span> </li> <li> <ul class="third-level margin-bottom"> <li><a href="/pages/formations-outils-innovants/formations-emailing/">Formations campagnes emailing</a></li> </ul> </li> </ul> </div> </div> </li>  <li class="mother-container"><a href="/blog/" class="mother-category">Blog</a></li>  <li class="mother-container"><a href="/pages/contact.html" class="mother-category">Contact</a></li>  <li class="mother-container"><a href="/pages/combien-coute-un-site-web.html" class="mother-category">Devis en ligne</a></li>  <li class="mother-container"><a href="tel:0971169700" class="mother-category"><i class="fa fa-phone fa-fw" aria-hidden="true"></i>09 71 16 97 00</a></li> </ul> </div> </div> </nav>  <div id="wrapper" class="full-row">  <div id="main"> <div class="view view-pages" id="view-page" data-id-page="51ffc004ca2d3e4020109690" > <div id="rows-6026864e3ec951b98c60fb61" class="rows" data-total-pages="1" data-current-page="1"> <div class="row-container rd-1 bg-header no-margin page_1" id="crea-site"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column" style="width:100%"> <div id="cell-578ca21f01afd597aac20c25" class="column-content"> <h1 class="white-t" style="text-align: center;">Création de site Web à Amiens en Hauts de France</h1> <p class="lead white-t" style="text-align: center;">L'agence de <strong>création de site</strong> web Awelty est située à <strong>Amiens</strong> en Hauts de France.<br /> Nous créons des sites de haute qualité technique et graphique via un <a class="white-t" href="/pages/studio-web/creation-de-site/cms-awelty.html">CMS</a> permettant une véritable simplicité et rapidité de mise à jour des contenus.</p> <p><a class="ab-button" href="/pages/combien-coute-un-site-web.html">Devis en ligne</a></p> </div> </div> </div> </div> </div> <div class="row-container rd-2 sidebar-empty page_1 row-highlighted"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column" style="width:50%"> <div id="cell-578ca21f01c6d597aac2cbc6" class="column-content"> <svg class="stat" viewBox="0 0 200 200"> <circle class="stat__path stat__path_back" cx="50%" cy="50%" r="50"></circle> <circle class="stat__path stat__path_bar" cx="50%" cy="50%" r="50"></circle> <text class="stat__text" x="50%" y="50%" dy=".35em"></text> </svg> <style> .stat { display: block; width: 400px; height: 400px; margin: 20px auto; } .stat__path { stroke-width: 8px; fill: none; will-change: transform; transition-property: transform; transition-timing-function: ease-in-out; } .stat__path_back { stroke: #e5e5e5; } .stat__path_bar { stroke: #ffab61; } .stat__text { text-anchor: middle; font-size: 2.5rem; font-family: "Open Sans", sans-serif; font-weight: 300; fill: #bbb; } </style> <script type="text/javascript"> "use strict"; const settings = { percent: 89 , duration: 1700 , angle: 35 }; // From here: https://gist.github.com/gre/1650294 const easing = { easeInOutQuad: t => t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t, easeInOutCubic: t => t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 }; const svg = document.querySelector(".stat") , path = svg.querySelector(".stat__path_back") , bar = svg.querySelector(".stat__path_bar") , text = svg.querySelector(".stat__text") , circleLength = 2 * Math.PI * path.getAttribute("r") , factor = (360 - settings.angle * 2) / 360 , getPercentLength = (len, percent, factor = 1) => len / 100 * percent * factor ; let animationProgress , animationStart ; // Set an initial circles settings path.style.strokeDasharray = bar.style.strokeDasharray = circleLength; path.style.strokeDashoffset = bar.style.strokeDashoffset = circleLength; /** * Animation callback function for drawing a circle path * * @param {Element} SVG circle element * @param {Number} Completion rate [0..1] * @param {Number} Filling percentage * @param {Function} Easing function */ const draw = (e, t, p, fn) => e.style.strokeDashoffset = circleLength - getPercentLength(circleLength, p * fn(t), factor); /** * Animation callback function for rotating a circle path * * @param {Element} SVG circle element * @param {Number} Completion rate [0..1] * @param {Number} Angle of the rotation * @param {Number} x-position of the center of rotation * @param {Number} y-position of the center of rotation * @param {Function} Easing function */ const rotate = (e, t, a, x, y, fn) => e.setAttribute("transform", `rotate(${fn(t) * a} ${x} ${y})`); const go = () => { // Oops! CSS transforms on SVG elements doesn't works in IE /* path.style.transitionDuration = bar.style.transitionDuration = `${settings.duration}ms`; requestAnimationFrame(() => path.style.transform = bar.style.transform = `rotate(${settings.angle}deg)`); */ const animate = () => { animationProgress = (Date.now() - animationStart) / settings.duration; if (animationProgress >= 1) { animationProgress = 1; } // ok, let's draw draw(path, animationProgress, 100, easing.easeInOutQuad); draw(bar, animationProgress, settings.percent, easing.easeInOutCubic); rotate(path, animationProgress, settings.angle, 100, 100, easing.easeInOutQuad); rotate(bar, animationProgress, settings.angle, 100, 100, easing.easeInOutQuad); text.textContent = Math.floor(settings.percent * easing.easeInOutQuad(animationProgress)); if (animationProgress !== 1) { requestAnimationFrame(animate); } }; animationStart = Date.now(); animate(); }; go(); </script> </div> </div> <div data-role="cell" class="column flex-col advanced" style="width:50%"> <div id="cell-578ca21f01cbd597aac2b83a" class="column-content"> <h2 class="page-cat">Performance</h2> <h3 class="page-title">Plus rapide, plus efficace</h3> <p class="center-t-phone lead">Nous savons qu'il est essentiel qu'un site soit rapide pour être performant. C'est pourquoi nous sommes très vigilants lors de la création de vos sites à les rendre les plus efficients possibles.</p> <p class="center-t-phone"><a class="link-cat beige-t" href="/pages/studio-web/creation-de-site/charte-qualite-creation-de-site-internet.html">Notre charte de qualit茅 <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></p> </div> </div> </div> </div> </div> <div class="row-container rd-3 padding-t-b-2x page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column flex-col advanced" style="width:40%"> <div id="cell-578ca21f01d5d597aac2d0d1" class="column-content"> <h2 class="page-cat">Referencement - seo</h2> <h3 class="page-title">Soyez vu</h3> <p class="center-t-phone lead">Toutes nos créations de site sont optimisées pour un <a href="/pages/webmarketing/referencement-naturel/">référencement</a> web efficace. Nous attachons une grande importance à la présence des sites dans les moteurs de recherche.</p> <div class="desc-page orange-border"> <p>Aussi nous appliquons une méthodologie efficace pour atteindre cet objectif sur chaque site web créé par notre société.</p> </div> <p><a class="link-cat beige-t margin-b" href="/pages/webmarketing/referencement-naturel/">Voir nos offres <i aria-hidden="true" class="fa fa-arrow-circle-right"></i> </a></p> </div> </div> <div data-role="cell" class="column hidden-phone advanced" style="width:60%"> <div id="cell-578ca21f01ded597aac257ec" class="column-content"> <figure> <img src="/medias/images/googlesearch.png" alt="Barre de recherche Google" /> <figcaption class="typing_google"> <span class="txt-rotate" data-period="2000" data-rotate='[ "Faire appara卯tre votre site professionnel sur Google", "D茅veloppons la visibilit茅 de votre site Internet", "Des prestations sur mesure pour 锚tre bien r茅f茅renc茅" ]'></span> </figcaption> </figure> <script type="text/javascript"> var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 500; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); }; </script> </div> </div> </div> </div> </div> <div class="row-container rd-4 padding-t-b-2x page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column" style="width:50%"> <div id="cell-578ca21f01e7d597aac24e12" class="column-content"> <div data-widget="image" class="text-left"> <div> <img src="/medias/images/graphique-1.jpg" alt="Webdesign et PAO de l'Agence Awelty" > </div> </div> </div> </div> <div data-role="cell" class="column flex-col advanced" style="width:50%"> <div id="cell-578ca21f01f0d597aac26e86" class="column-content"> <h2 class="page-cat">Webdesign</h2> <h3 class="page-title">Démarquez vous graphiquement</h3> <p class="center-t-phone lead">La communication visuelle d'un site doit être valorisée, chaque site doit avoir sa propre <a href="/pages/agence-de-communication/studio-graphique/">identité visuelle</a>. Awelty crée un webdesign <strong>unique</strong> de haute qualité pour chacune de ses créations de sites web.</p> <div class="desc-page orange-border"> <p>Les créations graphiques doivent non seulement plaire esthétiquement à un maximum d'internautes mais aussi permettre d'atteindre les objectifs du site (vendre en ligne, générer des prises de contact, informer, etc.).</p> </div> <p class="center-t-phone lead">C’est dans cette optique qu’Awelty élabore une maquette graphique, retouchée selon les demandes du client.</p> </div> </div> </div> </div> </div> <div class="row-container rd-5 padding-t-b page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column" style="width:100%"> <div id="cell-578ca21f0202d597aac238eb" class="column-content"> <h2 style="text-align: center;">Besoin d'informations supplémentaires ?</h2> <p style="text-align: center;"><a class="large-btn dark-grey-bg" href="/pages/contact.html">Contactez-nous</a></p> </div> </div> </div> </div> </div> <div class="row-container rd-6 row-highlighted no-margin page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column flex-col hidden-phone advanced" style="width:40%"> <div id="cell-578ca21f020bd597aac2cdb7" class="column-content"> <div class="illu-cahier"> <div class="block-c"> <span class="number">1</span><span class="list"></span> </div> <div class="block-c"> <span class="number">2</span><span class="list"></span> </div><div class="block-c"> <span class="number">3</span><span class="list"></span> </div> </div> </div> </div> <div data-role="cell" class="column" style="width:60%"> <div id="cell-578ca21f021fd597aac2ff55" class="column-content"> <h2 class="page-title">Nous vous accompagnons dans votre projet</h2> <p class="lead"><strong>Spécialiste de la création de site</strong> Internet, nous vous proposons de piloter votre projet Internet. Nous réalisons avec vous un cahier des charges clair, nous élaborons une <strong>charte graphique web</strong> et nous assurons une <strong>intégration technique</strong> de qualité.</p> <p>Nous débutons tous les projets de création de site web par un échange essentiel avec vous (rendez-vous dans nos bureaux ou par téléphone).</p> <p>Cet entretien permet de définir un premier <strong>cahier des charges</strong> afin de :</p> <ul class="float-list"> <li><span>Objectifs</span> <p>définir les <strong>objectifs</strong> du site, les résultats à obtenir par l’intermédiaire de ce site web</p> </li> <li><span>Cibles</span> <p>déterminer la ou les <strong>cibles</strong> à atteindre (le grand public, les entreprises, le secteur, etc.)</p> </li> <li><span>Contenus</span> <p>définir quels seront les <strong>contenus</strong> du site : les textes, les images, les photos, les vidéos, etc.</p> </li> <li><span>Fonctionnalités</span> <p>prévoir toutes les <strong>fonctionnalités</strong> (par exemple un blog, des albums photos, un module de réservation, etc.)</p> </li> <li><span>Design</span> <p>orienter les choix concernant la réalisation de la <strong>charte graphique</strong>.</p> </li> </ul> </div> </div> </div> </div> </div> <div class="row-container rd-7 row-highlighted no-margin page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column" style="width:100%"> <div id="cell-578ca21f0228d597aac2a57f" class="column-content"> <p style="text-align: center;"><i class="fa fa-folder-open fa-2x" style="color: white; background: #ffaa5f; padding: 10px; border-radius: 50%;"></i></p> <p class="lead" style="text-align: center;">Ce cahier des charges sera un support nécessaire pour un développement intelligent, il permettra également de vous proposer un devis précis pour la réalisation de votre site web.</p> </div> </div> </div> </div> </div> <div class="row-container rd-8 padding-t-b-2x page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column flex-col advanced" style="width:40%"> <div id="cell-578ca21f0232d597aac2afc0" class="column-content"> <h2 class="page-cat">Qualité</h2> <h3 class="page-title">Modernité, efficacité</h3> <p class="lead center-t-phone">Nous sommes avant tout passionnés par les nouvelles technologies et principalement les technos liées au web. Nous réalisons une veille permanente concernant les <strong>nouveaux langages</strong>, les <strong>nouvelles méthodes de développement</strong>, les <strong>nouveaux usages Internet</strong>, les bonnes pratiques <strong>webmarketing</strong>, etc.</p> <p>Nous aimons réaliser des sites :</p> <ul class="float-list"> <li> <p class="center-t-phone">soignés <strong>graphiquement</strong>, avec des webdesigns originaux.</p> </li> <li> <p class="center-t-phone">soignés <strong>techniquement</strong>, avec un code clair et rapide à interpréter par tous les navigateurs Internet.</p> </li> </ul> <p><i class="fa fa-html5 fa-2x" style="color:#f1652a;"></i><i class="fa fa-css3 fa-2x" style="margin-left: 7px; color:#2aa9e0;"></i>...</p> <p class="lead center-t-phone">Awelty développe des sites Internet à l'aide des technologies PHP/MySql, HTML5 / CSS et JavaScript.</p> <p class="lead center-t-phone">Nous respectons, avec une grande attention, les standards techniques web et les normes d'accessibilité du W3C.</p> </div> </div> <div data-role="cell" class="column hidden-phone advanced" style="width:60%"> <div id="cell-578ca21f0237d597aac206bd" class="column-content"> <div data-widget="image" class="text-right"> <div> <img src="/medias/images/code-illu.png" alt="Qualit茅 et modernit茅 des sites Awelty" > </div> </div> </div> </div> </div> </div> </div> <div class="row-container rd-9 page_1" id="ref-sites"> <div class="row-content"> <h2 class="row-title"> Ils ont choisi l'agence awelty </h2> <div class="row" data-role="line"> <div data-role="cell" class="column" style="width:33%"> <div id="cell-5abcae5faf6bc1f825106720" class="column-content"> <p><a href="/blog/references-sites-web/refonte-boutique-en-ligne-distillerie-hautefeuille.html" title="Distillerie d'Hautefeuille"><img alt="Cr茅ation du site e-commerce Distillerie d'Hautefeuille" src="/medias/images/site-distillerie-dhautefeuille.webp" /></a></p> <h3 class="bold h2" style="text-align: center;">Distillerie d'Hautefeuille</h3> </div> </div> <div data-role="cell" class="column" style="width:33%"> <div id="cell-5abcae5faf67c1f82510c109" class="column-content"> <p><a href="/blog/references-sites-web/refonte-site-web-office-tourisme-nievre-somme.html" title="Office de tourisme Ni猫vre et Somme"><img alt="Cr茅ation du site vitrine office de tourisme Ni猫vre et Somme" src="/medias/images/site-office-tourisme-nievre-somme.webp" /></a></p> <h3 class="bold h2" style="text-align: center;">Office de tourisme Nièvre et Somme</h3> </div> </div> <div data-role="cell" class="column" style="width:33%"> <div id="cell-5abcae5faf6fc1f82510434b" class="column-content"> <p><a href="/blog/autres/marche-noel-amiens-2023-gestion-strategie-webmarketing.html" title="March茅 de No毛l 脿 Amiens"><img alt="Cr茅ation du site March茅 de No毛l Amiens " src="/medias/images/site-marche-noel-amiens.webp" /></a></p> <h3 class="bold h2" style="text-align: center;">Marché de Noël d'Amiens</h3> </div> </div> </div> </div> </div> <div class="row-container rd-10 padding-t-b-2x resp-row blue-dark-bg no-margin page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column resp-column hidden-phone advanced" style="width:50%"> <div id="cell-578ca21f023fd597aac2cb55" class="column-content"> <section id="resp-all-anim" class="every-anim"> <div id="top-anim" class="every-anim"></div> <div id="content-anim" class="every-anim"></div> <div id="block1-anim" class="every-anim"></div> <div id="block2-anim" class="every-anim"></div> <div id="block3-anim" class="every-anim"></div> </section> </div> </div> <div data-role="cell" class="column flex-col advanced" style="width:50%"> <div id="cell-5844a3635506c1f82510a53b" class="column-content"> <h2 class="page-cat">Responsive design</h2> <h3 class="page-title white-t">Votre site web, sur tous les supports</h3> <p class="lead white-t margin-b center-t-phone">Afin de répondre aux attentes de tous les visiteurs, nos sites internet sont responsives, c'est à dire qu'ils s'adaptent sur tous types de supports (ordinateur, tablette & smartphone) afin qu'ils soient accessibles <strong>partout</strong> et <strong>tout le temps</strong>.</p> <p class="center-t-phone"><a class="large-btn white-bg blue-dark-t" href="/pages/combien-coute-un-site-web.html">Devis en ligne</a></p> </div> </div> </div> </div> </div> <div class="row-container rd-11 row-highlighted no-margin padding-t-b-2x page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column flex-col advanced" style="width:50%"> <div id="cell-578ca21f0248d597aac221fb" class="column-content"> <h2 class="page-title">Et plus encore ...</h2> <p class="lead center-t-phone">Au del脿 de la cr茅ation de site Internet de pr茅sentation de votre activit茅, souvent appel茅 site vitrine, nous pouvons vous accompagner dans la cr茅ation de votre site marchand ou dans le d茅veloppement d'outils informatiques utilisant les technologies web.</p> </div> </div> <div data-role="cell" class="column" style="width:50%"> <div id="cell-5844a3635517c1f82510d0ba" class="column-content"> <p><i aria-hidden="true" class="fa fa-shopping-cart fa-3x icon-right"></i></p> <div class="card-shadow margin-b"> <h3 class="page-cat beige-t">Création de site e-commerce</h3> <p class="center-t-phone">Grâce à notre <a href="https://www.awelty.fr/pages/studio-web/creation-de-site/site-e-commerce/">solution e-commerce</a> clé en main, vous développerez votre activité marchande sur Internet tout en maîtrisant votre budget. Venez découvrir toutes les fonctionnalités de notre solution et accéder à <a href="https://www.awelty.fr/pages/devis.html">votre devis en ligne</a>.</p> </div> <p><i aria-hidden="true" class="fa fa-code fa-3x icon-right" style="margin-left:1em;"></i></p> <div class="card-shadow"> <h3 class="page-cat beige-t">Développement web sur mesure</h3> <p class="center-t-phone">Nous créons des <strong>applications web</strong> sur mesure pour correspondre à vos attentes, comme par exemple une liaison entre votre site web et vos outils informatiques existants (ex : base de données, logiciels métiers).</p> </div> </div> </div> </div> </div> </div> <div class="row-container rd-12 row-highlighted no-margin padding-t-b-2x page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column flex-col advanced" style="width:50%"> <div id="cell-578ca21f0255d597aac20e72" class="column-content"> <h2 class="page-title">Et après ?</h2> <p class="lead center-t-phone margin-b">La création d'un site de qualité est la première étape d'une communication web réussie. Awelty vous accompagne dans votre stratégie de communication web et votre webmarketing en vous proposant son savoir faire en <strong>référencement</strong>, <strong>webmastering</strong>, <strong><a href="/pages/webmarketing/referencement-naturel/redaction-web.html">rédaction web</a></strong>, <strong>gestion de communauté internet</strong> (Facebook, Twitter, Google +), <strong>achat de publicité en ligne</strong>.</p> <p class="center-t-phone"><a class="btn-border blue-t" href="/pages/webmarketing/">Voir nos offres</a></p> </div> </div> <div data-role="cell" class="column hidden-phone advanced" style="width:50%"> <div id="cell-578ca21f0259d597aac2057d" class="column-content"> <div data-widget="image" class="text-center"> <div> <img src="/medias/images/illu-com.png" alt="Agence Awelty : solutions en webmarketing" > </div> </div> </div> </div> </div> </div> </div> <div class="row-container rd-13 hide page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column" style="width:100%"> <div id="cell-5a5c83f17090c1f825103182" class="column-content"> <style> /*CREA SITE*/ .typing_google { position: absolute; top: 212px; left: 38px; font-size: 1.5em; } /*ANIMATION RESPONSIVE*/ #resp-all-anim { position: relative; width: 140px; height: 250px; background-color: #efeff3; animation: window forwards 4s infinite; overflow: hidden; } #resp-all-anim > * { position: absolute; } #top-anim { top: 0; left: 0; width: 100%; height: 30px; border-top: 7px solid #d99153; background-color: #f7ac6c; animation: header forwards 4s infinite; } #content-anim { top: 30px; left: 50%; width: 140px; height: 220px; box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1); background-color: #fff; transform: translateX(-50%); animation: article forwards 4s infinite; } #content-anim::after { position: absolute; top: 100%; margin-top: 15px; width: 100%; height: 100px; background-color: #fff; box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1); content: ''; } #block1-anim { position: absolute; right: 10px; top: 77px; margin: 0; padding: 0; width: 120px; height: 10px; border: 0; background-color: #bcbcbc; animation: button forwards 4s infinite; } #block2-anim { position: absolute; right: 10px; top: 97px; margin: 0; padding: 0; width: 120px; height: 10px; border: 0; background-color: #bcbcbc; animation: button1 forwards 4s infinite; } #block3-anim { position: absolute; right: 10px; top: 132px; margin: 0; padding: 0; width: 120px; height: 50px; border: 0; background-color: #57b2ff; animation: button2 forwards 4s infinite; } @keyframes window { 0%, 15%, 90% { width: 140px; height: 250px; } 30%, 45% { width: 400px; height: 300px; } 60%, 75% { width: 560px; height: 370px; } } @keyframes header { 0%, 15%, 90% { width: 100%; height: 30px; border-top-width: 7px; } 30%, 45% { height: 35px; border-top-width: 7px; } 60%, 75% { height: 35px; border-top-width: 7px; } } @keyframes article { 0%, 15%, 90% { width: 140px; height: 220px; } 30%, 45% { top: 35px; width: 270px; height: 220px; } 60%, 75% { top: 35px; width: 290px; height: 225px; } } @keyframes button { 0%, 15%, 90% { right: 10px; top: 77px; width: 120px; height: 10px; } 30%, 45% { right: 210px; top: 77px; width: 115px; height: 10px; } 60%, 75% { right: 290px; top: 82px; width: 125px; height: 10px; } } @keyframes button1 { 0%, 15%, 90% { right: 10px; top: 97px; width: 120px; height: 10px; } 30%, 45% { right: 210px; top: 97px; width: 115px; height: 10px; } 60%, 75% { right: 290px; top: 102px; width: 125px; height: 10px; } } @keyframes button2 { 0%, 15%, 90% { right: 10px; top: 132px; width: 120px; height: 50px; } 30%, 45% { right: 75px; top: 77px; width: 125px; height: 50px; } 60%, 75% { right: 145px; top: 82px; width: 125px; height: 50px; } } .every-anim { box-sizing: border-box; } @media only screen and (max-width: 1599px) { .typing_google { top: 165px; } } @media only screen and (max-width: 1199px) { .typing_google { top: 132px; left: 33px; } .typing_google span { font-size: 14px; } } </style> </div> </div> </div> </div> </div> </div> </div> <script> emsChromeExtension.init('page', '51ffc004ca2d3e4020109690', 'awelty.com'); </script> </div>  </div>   <footer id="footer"> <div id="footer-wrapper"> <div class="container">  <div id="bottom-site"> <div id="rows-6023a27f763a5676ee5e99e9" class="rows" data-total-pages="1" data-current-page="1"> <div class="row-container rd-1 page_1"> <div class="row-content"> <div class="row" data-role="line"> <div data-role="cell" class="column" style="width:100%"> <div id="cell-5dfa4b74a326d4558d133ef0" class="column-content"> <div class="row"> <div class="column column6"> <p class="center-t-phone"><span class="bold white-t">Vous souhaitez avoir plus d'informations sur nos offres ?</span><br /> N'hésitez pas à nous contacter pour recevoir un devis gratuit.</p> <div class="flex-row flex-center-phone"> <p><a class="large-btn blue-gradient-bg" href="/pages/combien-coute-un-site-web.html">Devis en ligne</a></p> <p class="margin-l"><a class="large-btn green-gradient-bg" href="/pages/contact.html">Nous contacter</a></p> </div> </div> <div class="column column6"> <div class="f-end flex-col-phone center-t-phone"><i class="ion-ios-location-outline pin hidden-tablet hidden-phone"></i> <p><img alt="Logo Agence Awelty" src="/medias/files/logo-awelty-white.svg" width="45" style="margin-right:1em;" /></p> <p class="text-right"><a href="https://www.google.fr/maps/place/19+Rue+Lamartine,+80000+Amiens/@49.8922794,2.3028766,17z/data=!3m1!4b1!4m5!3m4!1s0x47e78448144b4561:0x70962f775ddb070c!8m2!3d49.8922794!4d2.3050653">19 Rue Lamartine</a><br /> 80 000 - Amiens<br /> <span class="footer-baseline">Le groupe awelty:</span><br /> <a href="tel:0322808938" title="Appeler le groupe awelty">03.22.80.89.38</a></p> </div> </div> </div> <hr /> <div class="row center-t-phone"> <div class="column column3"> <p class="footer-title">A propos</p> <ul class="list-unstyled list-footer"> <li><a href="/pages/se-rendre-chez-awelty.html">Se rendre à l'agence</a></li> <li><a href="/pages/a-propos.html">Présentation</a></li> <li><a href="/pages/recrutement.html">Recrutement</a></li> <li><a href="/medias/files/agence-awelty-cgv.pdf">CGV Agence awelty</a></li> </ul> </div> <div class="column column3"> <p class="footer-title">Liens utiles</p> <ul class="list-unstyled list-footer"> <li><a href="/pages/contact.html">Nous contacter</a></li> <li><a href="/blog/">Le blog</a></li> <li><a href="/pages/combien-coute-un-site-web.html">Devis en ligne</a></li> </ul> </div> <div class="column column6"> <div class="flex-row flex-center flex-col-phone"> <p class="bold follow-title margin-b-phone">Nous suivre</p> <ul class="list-unstyled flex-row flex-center space-around" id="social-link-footer"> <li><a href="https://www.linkedin.com/company/awelty/"><i aria-hidden="true" class="fa fa-linkedin fa-2x"></i></a></li> <li><a href="https://www.facebook.com/awelty.fr/?fref=ts"><i aria-hidden="true" class="fa fa-facebook fa-2x"></i></a></li> <li><a href="https://twitter.com/awelty_fr?lang=fr"><i aria-hidden="true" class="fa fa-twitter fa-2x"></i></a></li> <li><a href="https://www.instagram.com/awelty_fr/"><i aria-hidden="true" class="fa fa-instagram fa-2x"></i></a></li> <li><a href="https://www.youtube.com/channel/UCyaXmRUgjvtOV1sbwtGP3kg"><i aria-hidden="true" class="fa fa-youtube fa-2x"></i></a></li> </ul> </div> </div> <div class="column column3"> <p class="footer-title">Agence Certifi茅e Google Partner</p> <ul class="list-unstyled list-footer"> <li> <a href="https://www.google.com/partners/agency?id=9945667604" target="_blank"> <img src="https://www.gstatic.com/partners/badge/images/2023/PartnerBadgeClickable.svg"/> </a> </li> </ul> </div> <div class="column column3"> <p class="footer-title">Agence Certifi茅e Meta Business Partner</p> <ul class="list-unstyled list-footer"> <li><a href="https://www.facebook.com/business/partner-directory/search?id=8312149982190389" target="_blank"><img src="/medias/images/meta-business-partner.png" /></a></li> </ul> </div> </div> <hr /> <div class="row"> <div class="column column12"> <div class="flex-row flex-center space-between flex-col-phone"> <p class="footer-baseline center-t-phone">Plus de 17 ans d'expérience dans la communication et la création de site web.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </footer>  <script src="//www.awelty.fr/medias/static/themes/ems_framework/js/jquery.mobile.custom.min.js"></script> <script src="//www.awelty.fr/medias/static/themes/ems_framework/js/jquery.zoom.min.js"></script> <script src="https://www.awelty.fr/themes/custom.js?v=6_1646067808_2292"></script>  <script> $(document).ready(function() { /*Modif Janvier 2018*/ if (window.matchMedia("(max-width: 991px)").matches) { $("li.mother-container i.ion-ios-arrow-down").on('click', function(){ $(this).parent().siblings('.second-level').slideToggle(); }); var changeIcon = $('.navbar-toggle').children("i"); changeIcon.removeClass('fa fa-bars').addClass('ion-navicon'); $('.container').on('click', '#navbar-overlay, .navbar-toggle', function() { if ( $(changeIcon).hasClass('close') ) { $(changeIcon).addClass('ion-navicon').removeClass('ion-android-close').removeClass('close'); } else { $(changeIcon).addClass('ion-android-close').removeClass('ion-navicon').addClass('close'); }; }); }; $(document).scroll(function () { if ($(this).scrollTop() > 10) { $('nav.navbar-top').addClass('shadow-navbar'); } else { $('nav.navbar-top').removeClass('shadow-navbar'); } }); /*EFFET SUR LE LOGO AU SCROLL*/ /*window.onscroll = function(Event) { var scroll = document.body.scrollTop; var scale = scroll * 10 / 2500; var less = 1 - scale; var logo = document.getElementById("logo"); if ( (scroll < 150) && (logo) ) { if ( less > 0 ) { logo.style.transform = "scale(" + less + "," + less +")"; logo.style.opacity = 1; } else { petit.style.opacity = 0; logo.style.transform = "scale(0, 0)"; } } }*/ /*HOVER EFFET (3) DU BLOC PULSE*/ /*PULSE HOVER*/ $( "#pulse-1, #pulse-2" ).hover( function() { $(this).find(".cont-pulse-f").addClass("pulse-up"); $(this).find(".fa-chevron-circle-up").addClass("rotate"); $(this).find('.cont-pulse-f p').addClass('opacity-ok'); }, function() { $(this).find(".cont-pulse-f").removeClass("pulse-up"); $(this).find(".fa-chevron-circle-up").removeClass("rotate"); $(this).find('.cont-pulse-f p').removeClass('opacity-ok'); }); /*CLIENT LIST MOCKUP ANIMATION ON CLICK*/ $('li[role=line_ref]').click(function(e){ if($(this).hasClass('active-li-ref')){ return false;} $('li[role=line_ref]').removeClass('active-li-ref'); $('div[role=line_ref_desc]').hide("slow"); $(this).addClass('active-li-ref'); $('.'+$(this).attr('id').replace('ref-','')+'-content').show("slow"); var cat_type = $(this).attr('data-cat'); if( cat_type == 'web' ){ $('#slider-img-client ul').removeClass('client-up-0').removeClass('client-up-2').removeClass('client-up-3'); $('#slider-img-client ul').addClass('client-up-1'); }else if( cat_type == 'video' ){ $('#slider-img-client ul').removeClass('client-up-1').removeClass('client-up-2').removeClass('client-up-3'); $('#slider-img-client ul').addClass('client-up-0'); }else if( cat_type == 'pao' ){ $('#slider-img-client ul').removeClass('client-up-1').removeClass('client-up-0').removeClass('client-up-3'); $('#slider-img-client ul').addClass('client-up-2'); }else if( cat_type == 'appli' ){ $('#slider-img-client ul').removeClass('client-up-0').removeClass('client-up-2').removeClass('client-up-1'); $('#slider-img-client ul').addClass('client-up-3'); } var num = $(this).attr('id').substr(-1, 1); $('.site-client-img').removeClass('site-client-1').removeClass('site-client-2').removeClass('site-client-3').removeClass('site-client-4'); $('.site-client-img').addClass('site-client-'+num); }); /*SCRIPT CENTER IMAGE*/ $('.media-object').children().addClass("item-img"); var imageHeight, wrapperHeight, overlap, nodes = document.querySelectorAll('.media-object .item-img'); $(window).on("load resize", centerImage); function centerImage() { for (var i=0; i<nodes.length; i++) { container = $(nodes[i]); imageHeight = container.find('img').height(); wrapperHeight = container.height(); overlap = (wrapperHeight - imageHeight) / 2; container.find('img').css('margin-top', overlap); } } for (var i=0; i<nodes.length; i++) { var el = $(nodes[i]); if (el.addEventListener) { el.addEventListener("webkitTransitionEnd", centerImage, false); // Webkit event el.addEventListener("transitionend", centerImage, false); // FF event el.addEventListener("oTransitionEnd", centerImage, false); // Opera event } } }); // End of document ready function </script> </body> </html>

CINXE.COM

Cr茅ation de site Web 脿 Amiens en Hauts de France | Awelty