{"id":5487,"date":"2024-08-27T21:05:20","date_gmt":"2024-08-27T21:05:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/responsive-design-site-html-techniques\/"},"modified":"2024-08-27T21:05:23","modified_gmt":"2024-08-27T21:05:23","slug":"responsive-design-site-html-techniques","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/responsive-design-site-html-techniques\/","title":{"rendered":"11.17 Responsive Design du Site en HTML : Techniques"},"content":{"rendered":"\n<p><strong>Responsive Design du Site en HTML : Techniques<\/strong> est essentiel pour garantir une exp\u00e9rience fluide et adapt\u00e9e \u00e0 tous les utilisateurs, quelle que soit la taille de l&rsquo;\u00e9cran de leur appareil. Dans cet article, nous allons explorer divers aspects du <strong>Responsive Design<\/strong>, partager des techniques pratiques et coder des exemples concrets pour am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement web. Cet article d\u00e9bute avec une introduction au Responsive Design et se poursuivra avec des sous-titres explicatifs pour couvrir toutes les notions n\u00e9cessaires.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Responsive Design<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586680541?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Responsive Design est une approche permettant de cr\u00e9er des sites qui offrent une exp\u00e9rience utilisateur optimale sur une vari\u00e9t\u00e9 d&rsquo;appareils. Cela implique l&rsquo;utilisation de mise en page flexible, d&rsquo;images adaptatives et de requ\u00eates m\u00e9dia. Voyons comment nous pouvons int\u00e9grer ces \u00e9l\u00e9ments dans notre d\u00e9veloppement HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de Viewport Meta Tag<\/h3>\n\n\n\n<p>Le premier pas vers un design responsive implique l&rsquo;utilisation de la balise meta viewport. Cette balise permet de contr\u00f4ler la mise en page et l&rsquo;\u00e9chelle de la page sur les diff\u00e9rents appareils :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fluid Grid Layout<\/h3>\n\n\n\n<p>Utiliser une grille fluide aide \u00e0 adapter les \u00e9l\u00e9ments de la page en fonction des tailles d&rsquo;\u00e9cran. Une grille fluid reprend l&rsquo;id\u00e9e des grilles traditionnelles, mais utilise des valeurs relatives (unit\u00e9s de pourcentage) au lieu de valeurs absolues (pixels) :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 20px;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Flexbox<\/h3>\n\n\n\n<p>Flexbox est utile pour cr\u00e9er des mises en page flexibles qui s&rsquo;adaptent aux diff\u00e9rentes tailles d&rsquo;\u00e9cran. Voici un exemple comment l&rsquo;utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-around;\n}\n\n.item {\n    flex: 1 1 200px;\n    margin: 10px;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Requ\u00eates M\u00e9dia<\/h3>\n\n\n\n<p>Les requ\u00eates m\u00e9dia permettent d&rsquo;appliquer diff\u00e9rentes CSS selon les caract\u00e9ristiques de l&rsquo;appareil, comme la largeur de la fen\u00eatre. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (max-width: 600px) {\n    .container {\n        flex-direction: column;\n    }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Images Adaptatives<\/h3>\n\n\n\n<p>Les images adaptatives s&rsquo;ajustent automatiquement pour diff\u00e9rentes r\u00e9solutions d&rsquo;\u00e9cran. Utilisez l&rsquo;attribut <code>srcset<\/code> pour fournir plusieurs versions d&rsquo;une image :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"small.jpg\" \n     srcset=\"small.jpg 320w, medium.jpg 768w, large.jpg 1024w\"\n     sizes=\"(max-width: 320px) 280px, \n            (max-width: 768px) 700px, \n            1024px\"\n     alt=\"Responsive image\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Frameworks CSS<\/h3>\n\n\n\n<p>Il existe des frameworks CSS tels que Bootstrap, Foundation, et Bulma qui facilitent le d\u00e9veloppement d&rsquo;interfaces responsives. Par exemple, Bootstrap offre une grille responsive pr\u00eate \u00e0 l&#8217;emploi :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"row\"&gt;\n    &lt;div class=\"col-sm\"&gt;...&lt;\/div&gt;\n    &lt;div class=\"col-sm\"&gt;...&lt;\/div&gt;\n    &lt;div class=\"col-sm\"&gt;...&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser Flexbox pour la Disposition des \u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Flexbox offre un excellent moyen de cr\u00e9er des mises en page flexibles et responsives. Voici un exemple d&rsquo;utilisation de Flexbox pour structurer une page de mani\u00e8re adaptive :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n}\n\n.item {\n    flex: 1 1 100px;\n    padding: 20px;\n    box-sizing: border-box;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9dias Responsifs<\/h3>\n\n\n\n<p>Les m\u00e9dias (images et vid\u00e9os) doivent aussi \u00eatre responsifs. Assurez-vous de d\u00e9finir les dimensions en pourcentages pour s&rsquo;adapter \u00e0 toutes les tailles d&rsquo;\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img, video {\n    max-width: 100%;\n    height: auto;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Valeurs Flexibles pour les Bo\u00eetes<\/h3>\n\n\n\n<p>Utiliser des unit\u00e9s comme em, rem, et % au lieu de px pour des dimensions flexibles. Cela permet de cr\u00e9er des interfaces qui s&rsquo;adaptent aux diff\u00e9rentes r\u00e9solutions d&rsquo;\u00e9crans de mani\u00e8re harmonieuse :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.box {\n    width: 50%;\n    padding: 2rem;\n}<\/code><\/pre>\n\n\n<!-- wp:heading\">\n<h3 class=\"wp-block-heading\">Attributs d'Accessibilit\u00e9<\/h3>\n<!-- \/wp:post-content -->\n\n<!-- wp:paragraph -->\n<p>Impl\u00e9menter les attributs d&rsquo;accessibilit\u00e9 pour s&rsquo;assurer que tous les utilisateurs, y compris ceux avec des limitations fonctionnelles, peuvent naviguer et utiliser votre site de mani\u00e8re efficace :<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>&lt;img src=\"image.jpg\" alt=\"Description de l'image\"&gt;\n&lt;button aria-label=\"Fermer\"&gt;X&lt;\/button&gt;<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>Pour aller plus loin dans le <em>Responsive Design<\/em>, vous pouvez explorer des [frameworks CSS](https:\/\/wikiform.fr\/codespace\/presentation-grilles-css-grid-layout) avanc\u00e9s ou suivre des tutoriels en ligne. Des ressources comme le <a href=\"https:\/\/developer.mozilla.org\/\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> et le <a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noopener\">W3Schools<\/a> proposent des guides d\u00e9taill\u00e9s sur le Responsive Design et les nouvelles technologies web.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Le <strong>Responsive Design en HTML<\/strong> est indispensable pour cr\u00e9er des sites web modernes et accessibles. En utilisant des techniques comme les <em>grids<\/em> fluides, les <em>media queries<\/em>, les <em>flexbox<\/em> et les images adaptatives, vous pouvez rendre vos sites plus flexibles et polyvalents. Continuez \u00e0 explorer ces techniques et restez \u00e0 jour avec les meilleures pratiques pour am\u00e9liorer constamment l&rsquo;exp\u00e9rience utilisateur sur tous les appareils.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML5 et CSS3 Offre 50%\" title=\"\"><\/a>\n<!-- \/wp:html -->\n\n<!-- Start of additional content for SEO -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Exemples Concrets d&rsquo;Utilisation<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dans cette section, nous allons aborder quelques cas d&rsquo;utilisation concrets du Responsive Design dans des projets HTML r\u00e9els. Nous passerons en revue des exemples d&rsquo;int\u00e9gration avec d&rsquo;autres technologies modernes utilis\u00e9es dans le d\u00e9veloppement web.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lorsque vous <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">cr\u00e9ez votre premi\u00e8re page HTML<\/a>, vous pouvez d\u00e9j\u00e0 penser \u00e0 int\u00e9grer des fonctionnalit\u00e9s de responsive design. En planifiant et en structurant votre code d\u00e8s le d\u00e9but, vous \u00e9vitez des modifications importantes par la suite.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Un exemple classique serait de cr\u00e9er des sections de contenu avec des <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-div-span-css-guide-complet\">\u00e9l\u00e9ments div et span<\/a>. Ces conteneurs flexibles vous permettent de placer des contenus vari\u00e9s et de les adapter selon la taille de l&rsquo;\u00e9cran :<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"item\"&gt;\n    &lt;p&gt;Contenu adaptatif&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;span class=\"item\"&gt;\u00c9l\u00e9ment texte responsive&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>En utilisant les techniques CSS appropri\u00e9es, vous cr\u00e9ez des pages adaptatives qui se redimensionnent et r\u00e9organisent les \u00e9l\u00e9ments en fonction de l&rsquo;appareil utilis\u00e9. Par exemple, une simple maquette peut \u00eatre construite en suivant les principes du <a href=\"https:\/\/wikiform.fr\/codespace\/model-boite-flexible-flexbox-css\">module Flexbox CSS<\/a>, qui simplifie grandement la gestion des mises en page robustes :<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>.container {\n    display: flex;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n}\n\n.item {\n    padding: 15px;\n    margin: 5px;\n}<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>La flexibilit\u00e9 des <strong>containers<\/strong> et la capacit\u00e9 de r\u00e9agencement des <em>items<\/em> apportent une exp\u00e9rience utilisateur coh\u00e9rente et visuellement agr\u00e9able, peu importe la taille de l&rsquo;\u00e9cran.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Explorer des <a href=\"https:\/\/wikiform.fr\/codespace\/formation-html-css\">formations en HTML et CSS<\/a> peut \u00e9galement vous aider \u00e0 perfectionner vos comp\u00e9tences en Responsive Design. Avec des ressources p\u00e9dagog","protected":false},"excerpt":{"rendered":"<p>Responsive Design du Site en HTML : Techniques est essentiel pour garantir une exp\u00e9rience fluide et adapt\u00e9e \u00e0 tous les utilisateurs, quelle que soit la&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2770,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5487"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5487\/revisions"}],"predecessor-version":[{"id":5488,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5487\/revisions\/5488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2770"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}