{"id":331,"date":"2013-04-30T15:37:45","date_gmt":"2013-04-30T13:37:45","guid":{"rendered":"https:\/\/www.internetcommunication.fr\/?p=331"},"modified":"2022-07-21T14:51:22","modified_gmt":"2022-07-21T14:51:22","slug":"creation-de-site-et-responsive-design","status":"publish","type":"post","link":"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-et-responsive-design.html","title":{"rendered":"Cr\u00e9ation de site et responsive design"},"content":{"rendered":"<h3><span class=\"ez-toc-section\" id=\"La_question_des_choix_graphiques_pour_un_nouveau_site_web_est_souvent_la_plus_delicate\"><\/span>La question des choix graphiques pour un\u00a0 nouveau site web est souvent la plus d\u00e9licate<span class=\"ez-toc-section-end\"><\/span><\/h3><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Pour gagner du temps<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-et-responsive-design.html\/#La_question_des_choix_graphiques_pour_un_nouveau_site_web_est_souvent_la_plus_delicate\" >La question des choix graphiques pour un\u00a0 nouveau site web est souvent la plus d\u00e9licate<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-et-responsive-design.html\/#Des_choix_graphiques_et_des_choix_techniques\" >Des choix graphiques et des choix techniques<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-et-responsive-design.html\/#Le_Responsive_design\" >Le Responsive design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-et-responsive-design.html\/#Le_responsive_design_cest_quoi\" >Le responsive design c&rsquo;est quoi ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-et-responsive-design.html\/#Critique_du_Responsive_design\" >Critique du Responsive design<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>Chaque domaine d&rsquo;activit\u00e9 professionnelle h\u00e9rite d&rsquo;une <strong>charte graphique<\/strong> qui lui est plus ou moins impos\u00e9e, un <strong>code couleur<\/strong> dont il parait difficile de s&rsquo;affranchir. Est-ce que mes clients me prendront au s\u00e9rieux, reconnaitront mon professionnalisme si je d\u00e9cide une rupture avec les codes de ma profession ?<br \/>\nPour les petites entreprises, la tentation est grande de vouloir faire comme les mastodontes du secteur. Avoir un <strong>site <a href=\"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-internet\/creation-de-site-prestashop\">eCommerce<\/a><\/strong> qui ressemble \u00e0 Amazon ou eBay, un <strong>site institutionnel<\/strong> aussi glacial que celui d&rsquo;Orange ou un <strong>site \u00e9ditorial<\/strong> comparable aux grands magazines de presse en ligne.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Des_choix_graphiques_et_des_choix_techniques\"><\/span>Des choix graphiques et des choix techniques<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Du c\u00f4t\u00e9 de la technique, il y a \u00e9videmment beaucoup d&rsquo;imp\u00e9ratifs mais aussi des tendances. Ph\u00e9nom\u00e8nes incontournables ou justement effet de mode ? Quels sont les bons principes \u00e0 prendre en compte pour la cr\u00e9ation ou la refonte d&rsquo;un <a href=\"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-internet\">site Internet<\/a> ?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Le_Responsive_design\"><\/span>Le Responsive design<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Le web a \u00e9videmment \u00e9volu\u00e9 ou du moins, les usages ont fait \u00e9voluer la fa\u00e7on de construire un site Internet. Tout cela d\u00e9pend tout de m\u00eame de notre cible. Rien ne sert de vouloir un site adapt\u00e9 \u00e0 l&rsquo;<strong>usage mobile<\/strong> si vos clients ne sont pas des <strong>mobinautes<\/strong>&#8230;<br \/>\nA d\u00e9faut d&rsquo;un <strong>site mobile<\/strong>, choisir une technologie s&rsquo;adaptant aux diff\u00e9rents types de connexion est une mesure sage. Et pour cela, il n&rsquo;est pas n\u00e9cessaire de pr\u00e9voir un investissement d\u00e9mesur\u00e9. \u00c9l\u00e9ment \u00e0 int\u00e9grer \u00e0 votre cahier des charges d\u00e8s la phase de r\u00e9flexion \u00e9videmment.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Le_responsive_design_cest_quoi\"><\/span>Le responsive design c&rsquo;est quoi ?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si vous r\u00e9duisez la fen\u00eatre de lecture de cet article \u00e0 l&rsquo;aide de l&rsquo;ic\u00f4ne double fen\u00eatre en haut \u00e0 droite, vous allez r\u00e9duire la taille de la fen\u00eatre de lecture de votre navigateur. Habituellement, la page ne sera visible qu&rsquo;en partie. Avec le <strong>responsive design<\/strong>, votre <strong>site va s&rsquo;adapter \u00e0 la taille de la fen\u00eatre<\/strong> ouverte. il en va de m\u00eame pour une tablette, un smartphone, un portable ou un \u00e9cran de bureau.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Critique_du_Responsive_design\"><\/span>Critique du Responsive design<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Autant je reste persuad\u00e9 que le <strong>responsive design<\/strong> est une mesure \u00e9vidente pour les campagnes d&#8217;emailing. 80% des mobinautes trient leurs mails via leur mobile et suppriment ce qui ne les int\u00e9resse pas ou ne fonctionne pas&#8230;<br \/>\nPour un site Internet, la question se pose dans d&rsquo;autres termes. Il est tr\u00e8s agr\u00e9able d&rsquo;avoir une <strong>vision globale sur votre page<\/strong> quelque soit la taille de la fen\u00eatre. On s&rsquo;assure que nos clients ont acc\u00e8s \u00e0 l&rsquo;ensemble des fonctionnalit\u00e9s de notre site. Par contre, il faut penser que tous les boutons d&rsquo;actions vont \u00e9galement s&rsquo;adapter \u00e0 la <strong>taille de l&rsquo;\u00e9cran<\/strong>. La navigation pourrait devenir plus complexe m\u00eame si l&rsquo;on abuse des zooms : <strong>Pincer pour zoomer !<\/strong><br \/>\nUne seule question se pose au final : Pr\u00e9f\u00e9rons-nous proposer une <strong>navigation visuelle<\/strong> ou une <strong>navigation textuelle<\/strong> \u00e0 nos clients ?<br \/>\nEt pour y r\u00e9pondre, nous avons autant de r\u00e9ponses que de sites web :<\/p>\n<blockquote>\n<ul style=\"list-style-type: square;\">\n<li>Objectifs du site<\/li>\n<li>Contenus propos\u00e9s<\/li>\n<li>Clients vis\u00e9s<\/li>\n<\/ul>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>La question des choix graphiques pour un\u00a0 nouveau site web est souvent la plus d\u00e9licate Chaque domaine d&rsquo;activit\u00e9 professionnelle h\u00e9rite d&rsquo;une charte graphique qui lui est plus ou moins impos\u00e9e, un code couleur dont il parait difficile de s&rsquo;affranchir. Est-ce que mes clients me prendront au s\u00e9rieux, reconnaitront mon professionnalisme si je d\u00e9cide une rupture [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63,72],"tags":[73,74,75,76],"class_list":["post-331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-actualite","category-creation-de-site","tag-creation-de-site-mobile","tag-design-web","tag-site-mobile","tag-technologie-web-mobile"],"_links":{"self":[{"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/posts\/331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/comments?post=331"}],"version-history":[{"count":0,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/posts\/331\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/media\/5383"}],"wp:attachment":[{"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/media?parent=331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/categories?post=331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/tags?post=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}