1:"$Sreact.fragment"
2:I[70119,["/_next/static/chunks/31d43793a1cb3f9f.js"],"default"]
3:I[39756,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/247eb132b7f7b574.js"],"default"]
4:I[37457,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/247eb132b7f7b574.js"],"default"]
e:I[68027,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/247eb132b7f7b574.js"],"default"]
:HL["/_next/static/chunks/72b91a557eccd659.css","style"]
0:{"P":null,"b":"3j51AZN_4-ufz6TRQsmjK","c":["","blog","design-responsive-2024"],"q":"","i":false,"f":[[["",{"children":["blog",{"children":["design-responsive-2024",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/72b91a557eccd659.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/31d43793a1cb3f9f.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"fr","children":["$","body",null,{"className":"flex min-h-screen flex-col antialiased","children":[["$","$L2",null,{}],["$","main",null,{"className":"mx-auto w-full max-w-6xl flex-grow content-container my-6 p-8","children":["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","footer",null,{"className":"w-full bg-gray-900/95 backdrop-blur-md text-gray-300 py-12 mt-6","children":["$","div",null,{"className":"max-w-6xl mx-auto px-6","children":[["$","div",null,{"className":"grid md:grid-cols-4 gap-8","children":[["$","div",null,{"children":[["$","h3",null,{"className":"text-2xl font-bold text-white mb-4","children":"Tuxyo"}],["$","p",null,{"className":"text-gray-400 mb-4","children":"Des solutions adaptées pour faire grandir votre entreprise"}],["$","div",null,{"className":"flex space-x-4","children":[["$","a",null,{"href":"#","className":"text-gray-400 hover:text-white transition","children":["$","svg",null,{"className":"w-5 h-5","fill":"currentColor","viewBox":"0 0 24 24","children":["$","path",null,{"d":"M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"}]}]}],["$","a",null,{"href":"#","className":"text-gray-400 hover:text-white transition","children":["$","svg",null,{"className":"w-5 h-5","fill":"currentColor","viewBox":"0 0 24 24","children":["$","path",null,{"d":"M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"}]}]}],["$","a",null,{"href":"#","className":"text-gray-400 hover:text-white transition","children":["$","svg",null,{"className":"w-5 h-5","fill":"currentColor","viewBox":"0 0 24 24","children":"$L5"}]}]]}]]}],"$L6","$L7","$L8"]}],"$L9"]}]}]]}]}]]}],{"children":["$La",{"children":["$Lb",{"children":["$Lc",{},null,false,false]},null,false,false]},null,false,false]},null,false,false],"$Ld",false]],"m":"$undefined","G":["$e",[]],"s":false,"S":true}
f:I[22016,["/_next/static/chunks/31d43793a1cb3f9f.js"],""]
3b:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/247eb132b7f7b574.js"],"ViewportBoundary"]
3d:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/247eb132b7f7b574.js"],"MetadataBoundary"]
3e:"$Sreact.suspense"
5:["$","path",null,{"d":"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"}]
6:["$","div",null,{"children":[["$","h4",null,{"className":"font-semibold text-white mb-4","children":"Services"}],["$","ul",null,{"className":"space-y-2 text-sm","children":[["$","li",null,{"children":["$","a",null,{"href":"/services","className":"hover:text-white transition","children":"Développement web"}]}],["$","li",null,{"children":["$","a",null,{"href":"/services","className":"hover:text-white transition","children":"Solutions SaaS"}]}],["$","li",null,{"children":["$","a",null,{"href":"/services","className":"hover:text-white transition","children":"Conseil & Formation"}]}]]}]]}]
7:["$","div",null,{"children":[["$","h4",null,{"className":"font-semibold text-white mb-4","children":"Entreprise"}],["$","ul",null,{"className":"space-y-2 text-sm","children":[["$","li",null,{"children":["$","a",null,{"href":"/about","className":"hover:text-white transition","children":"À propos"}]}],["$","li",null,{"children":["$","a",null,{"href":"/blog","className":"hover:text-white transition","children":"Blog"}]}],["$","li",null,{"children":["$","a",null,{"href":"/contact","className":"hover:text-white transition","children":"Contact"}]}]]}]]}]
8:["$","div",null,{"children":[["$","h4",null,{"className":"font-semibold text-white mb-4","children":"Contact"}],["$","ul",null,{"className":"space-y-2 text-sm","children":["$","li",null,{"className":"flex items-center","children":[["$","svg",null,{"className":"w-4 h-4 mr-2","fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":2,"d":"M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"}]}],"contact@tuxyo.com"]}]}]]}]
9:["$","div",null,{"className":"border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400","children":["$","p",null,{"children":["© 2001-",2026," Tuxyo. Tous droits réservés. Version ","0.7.2505"]}]}]
a:["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]
b:["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]
c:["$","$1","c",{"children":[["$","article",null,{"className":"max-w-4xl mx-auto","children":[["$","nav",null,{"className":"mb-8","children":["$","div",null,{"className":"flex items-center space-x-2 text-sm text-gray-600","children":[["$","$Lf",null,{"href":"/","className":"hover:text-tuxyoBlue","children":"Accueil"}],["$","span",null,{"children":"/"}],["$","$Lf",null,{"href":"/blog","className":"hover:text-tuxyoBlue","children":"Blog"}],["$","span",null,{"children":"/"}],["$","span",null,{"className":"text-gray-900","children":"Design responsive 2024"}]]}]}],["$","header",null,{"className":"mb-12","children":[["$","div",null,{"className":"flex items-center space-x-4 mb-6","children":[["$","span",null,{"className":"px-3 py-1 bg-pink-100 text-pink-700 text-sm font-medium rounded-full","children":"Design"}],["$","div",null,{"className":"flex items-center text-gray-500 text-sm","children":[["$","svg",null,{"className":"w-4 h-4 mr-1","fill":"none","stroke":"currentColor","viewBox":"0 0 24 24","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":2,"d":"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"}]}],"7 min de lecture"]}],["$","span",null,{"className":"text-gray-500 text-sm","children":"25 Juillet 2024"}]]}],["$","h1",null,{"className":"text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight","children":"L'importance du design responsive en 2024"}],["$","p",null,{"className":"text-xl text-gray-600 leading-relaxed","children":"Pourquoi votre site doit absolument s'adapter à tous les écrans et comment créer une expérience utilisateur optimale sur mobile, tablette et desktop avec les dernières techniques."}]]}],["$","div",null,{"className":"prose prose-lg max-w-none","children":[["$","h2",null,{"children":"Le mobile-first n'est plus une option"}],["$","p",null,{"children":"En 2024, plus de 60% du trafic web mondial provient des appareils mobiles. Google indexe désormais en priorité les versions mobiles des sites web (Mobile-First Indexing), et les utilisateurs abandonnent massivement les sites qui ne s'affichent pas correctement sur leur smartphone. Le design responsive n'est plus un \"nice-to-have\" : c'est une nécessité absolue."}],["$","div",null,{"className":"bg-orange-50 p-6 rounded-lg my-6","children":[["$","h3",null,{"className":"text-orange-800 font-semibold mb-2","children":"📱 Statistiques 2024"}],["$","ul",null,{"className":"text-orange-700 text-sm space-y-1","children":[["$","li",null,{"children":"• 58% du trafic web provient du mobile"}],["$","li",null,{"children":"• 53% des utilisateurs abandonnent un site si il met plus de 3s à charger sur mobile"}],["$","li",null,{"children":"• 94% des premières impressions sont liées au design responsive"}],["$","li",null,{"children":"• Les sites responsive ont un taux de conversion 11% supérieur"}],["$","li",null,{"children":"• Google pénalise les sites non-responsive depuis 2021"}]]}]]}],["$","h2",null,{"children":"Évolution du responsive design : où en sommes-nous ?"}],["$","h3",null,{"children":"Des breakpoints fixes aux layouts fluides"}],["$","p",null,{"children":"Le responsive design a considérablement évolué depuis ses débuts. Nous sommes passés de simples breakpoints pour mobile/desktop à des approches plus sophistiquées qui s'adaptent à la diversité croissante des écrans."}],["$","div",null,{"className":"overflow-x-auto","children":["$","table",null,{"className":"min-w-full divide-y divide-gray-200","children":[["$","thead",null,{"className":"bg-gray-50","children":["$","tr",null,{"children":[["$","th",null,{"className":"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase","children":"Approche"}],["$","th",null,{"className":"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase","children":"2020"}],["$","th",null,{"className":"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase","children":"2024"}],["$","th",null,{"className":"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase","children":"Avantage"}]]}]}],["$","tbody",null,{"className":"divide-y divide-gray-200","children":["$L10","$L11","$L12","$L13"]}]]}]}],"$L14","$L15","$L16","$L17","$L18","$L19","$L1a","$L1b","$L1c","$L1d","$L1e","$L1f","$L20","$L21","$L22","$L23","$L24","$L25","$L26","$L27","$L28","$L29","$L2a","$L2b","$L2c","$L2d","$L2e","$L2f","$L30","$L31","$L32","$L33","$L34","$L35","$L36","$L37","$L38"]}],"$L39"]}],null,"$L3a"]}]
d:["$","$1","h",{"children":[null,["$","$L3b",null,{"children":"$@3c"}],["$","div",null,{"hidden":true,"children":["$","$L3d",null,{"children":["$","$3e",null,{"name":"Next.Metadata","children":"$@3f"}]}]}],null]}]
48:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/247eb132b7f7b574.js"],"OutletBoundary"]
10:["$","tr",null,{"children":[["$","td",null,{"className":"px-6 py-4 text-sm font-medium text-gray-900","children":"Breakpoints"}],["$","td",null,{"className":"px-6 py-4 text-sm text-gray-600","children":"Fixes (768px, 1024px)"}],["$","td",null,{"className":"px-6 py-4 text-sm text-gray-600","children":"Contextuels et variables"}],["$","td",null,{"className":"px-6 py-4 text-sm text-green-600","children":"Adaptation précise"}]]}]
11:["$","tr",null,{"children":[["$","td",null,{"className":"px-6 py-4 text-sm font-medium text-gray-900","children":"Grilles"}],["$","td",null,{"className":"px-6 py-4 text-sm text-gray-600","children":"Bootstrap 12 colonnes"}],["$","td",null,{"className":"px-6 py-4 text-sm text-gray-600","children":"CSS Grid + Flexbox"}],["$","td",null,{"className":"px-6 py-4 text-sm text-green-600","children":"Layouts complexes"}]]}]
12:["$","tr",null,{"children":[["$","td",null,{"className":"px-6 py-4 text-sm font-medium text-gray-900","children":"Images"}],["$","td",null,{"className":"px-6 py-4 text-sm text-gray-600","children":"max-width: 100%"}],["$","td",null,{"className":"px-6 py-4 text-sm text-gray-600","children":"Art direction + formats optimisés"}],["$","td",null,{"className":"px-6 py-4 text-sm text-green-600","children":"Performance optimale"}]]}]
13:["$","tr",null,{"children":[["$","td",null,{"className":"px-6 py-4 text-sm font-medium text-gray-900","children":"Typography"}],["$","td",null,{"className":"px-6 py-4 text-sm text-gray-600","children":"Tailles fixes par device"}],["$","td",null,{"className":"px-6 py-4 text-sm text-gray-600","children":"Fluid typography (clamp, vw)"}],["$","td",null,{"className":"px-6 py-4 text-sm text-green-600","children":"Lisibilité adaptive"}]]}]
14:["$","h3",null,{"children":"Container queries : la révolution en cours"}]
15:["$","p",null,{"children":"Les container queries permettent d'appliquer des styles basés sur la taille d'un conteneur parent plutôt que sur la viewport. C'est un changement de paradigme majeur pour créer des composants vraiment modulaires."}]
16:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"/* Container queries - support moderne */\n.card-container {\n container-type: inline-size;\n container-name: card;\n}\n\n/* Styles conditionnels basés sur la taille du conteneur */\n@container card (min-width: 400px) {\n .card {\n display: grid;\n grid-template-columns: 200px 1fr;\n gap: 1rem;\n }\n \n .card-image {\n width: 200px;\n height: 150px;\n object-fit: cover;\n }\n}\n\n@container card (max-width: 399px) {\n .card {\n display: block;\n }\n \n .card-image {\n width: 100%;\n height: 200px;\n object-fit: cover;\n }\n}\n\n/* Fallback pour navigateurs non compatibles */\n@supports not (container-type: inline-size) {\n @media (min-width: 768px) {\n .card {\n display: grid;\n grid-template-columns: 200px 1fr;\n }\n }\n}"}]}]
17:["$","h2",null,{"children":"Techniques modernes de responsive design"}]
18:["$","h3",null,{"children":"CSS Grid et Flexbox : la combinaison gagnante"}]
19:["$","p",null,{"children":"La combinaison de CSS Grid pour les layouts 2D et Flexbox pour les alignements 1D offre une flexibilité sans précédent pour créer des interfaces adaptatives."}]
1a:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"/* Layout responsive avec CSS Grid */\n.page-layout {\n display: grid;\n grid-template-areas: \n \"header header\"\n \"sidebar main\"\n \"footer footer\";\n grid-template-columns: 250px 1fr;\n grid-template-rows: auto 1fr auto;\n min-height: 100vh;\n gap: 1rem;\n}\n\n/* Adaptation mobile */\n@media (max-width: 768px) {\n .page-layout {\n grid-template-areas: \n \"header\"\n \"main\"\n \"sidebar\"\n \"footer\";\n grid-template-columns: 1fr;\n }\n}\n\n/* Grid responsive avec auto-fit */\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 1rem;\n}\n\n/* Flexbox pour les composants */\n.navigation {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n}\n\n@media (max-width: 768px) {\n .navigation {\n flex-direction: column;\n text-align: center;\n }\n}"}]}]
1b:["$","h3",null,{"children":"Fluid Typography et Spacing"}]
1c:["$","p",null,{"children":"La typographie fluide s'adapte automatiquement à la taille de l'écran, créant une expérience de lecture optimale sur tous les appareils."}]
40:T413,/* Typographie fluide avec clamp() */
:root {
/* Tailles de base */
--font-size-sm: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);
--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--font-size-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--font-size-xl: clamp(1.25rem, 1rem + 1.25vw, 2rem);
--font-size-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
/* Espacement fluide */
--spacing-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
--spacing-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
--spacing-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
--spacing-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
--spacing-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}
/* Application */
h1 {
font-size: var(--font-size-2xl);
margin-bottom: var(--spacing-lg);
line-height: 1.2;
}
h2 {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
p {
font-size: var(--font-size-base);
line-height: 1.6;
margin-bottom: var(--spacing-sm);
}
.container {
padding: var(--spacing-md);
max-width: min(90vw, 1200px);
margin: 0 auto;
}1d:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"$40"}]}]
1e:["$","h3",null,{"children":"Images responsives modernes"}]
1f:["$","p",null,{"children":"Les images représentent souvent la plus grande part du poids d'une page. Les optimiser pour le responsive design est crucial pour les performances."}]
41:T530,
/* CSS pour images responsive */
.responsive-image {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
}
/* Container avec aspect-ratio */
.image-container {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.image-container:hover img {
transform: scale(1.05);
}20:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"$41"}]}]
21:["$","h2",null,{"children":"Performance et responsive design"}]
22:["$","h3",null,{"children":"Optimisation du chargement"}]
23:["$","p",null,{"children":"Un site responsive doit être rapide sur tous les appareils. Cela implique des stratégies d'optimisation spécifiques selon le type d'écran et la qualité de connexion."}]
42:T749,// JavaScript - Chargement conditionnel basé sur l'écran
class ResponsiveLoader {
constructor() {
this.viewport = this.getViewportInfo();
this.connection = this.getConnectionInfo();
}
getViewportInfo() {
return {
width: window.innerWidth,
height: window.innerHeight,
isMobile: window.innerWidth < 768,
isTablet: window.innerWidth >= 768 && window.innerWidth < 1024,
isDesktop: window.innerWidth >= 1024
};
}
getConnectionInfo() {
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
return {
effectiveType: connection?.effectiveType || '4g',
downlink: connection?.downlink || 10,
saveData: connection?.saveData || false
};
}
// Chargement conditionnel des ressources
loadConditionalResources() {
// Images haute qualité seulement sur desktop + bonne connexion
if (this.viewport.isDesktop && this.connection.effectiveType === '4g' && !this.connection.saveData) {
this.loadHighQualityImages();
} else {
this.loadOptimizedImages();
}
// Animations complexes seulement sur desktop
if (this.viewport.isDesktop) {
import('./animations.js').then(module => {
module.initAnimations();
});
}
// Fonctionnalités avancées sur tablettes et desktop
if (!this.viewport.isMobile) {
import('./advanced-features.js').then(module => {
module.initAdvancedFeatures();
});
}
}
loadHighQualityImages() {
document.querySelectorAll('[data-hq-src]').forEach(img => {
img.src = img.dataset.hqSrc;
});
}
loadOptimizedImages() {
document.querySelectorAll('[data-opt-src]').forEach(img => {
img.src = img.dataset.optSrc;
});
}
}
// Initialisation
new ResponsiveLoader().loadConditionalResources();24:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"$42"}]}]
25:["$","h3",null,{"children":"Critical CSS et lazy loading"}]
43:T42c,/* Critical CSS - Styles above-the-fold uniquement */
/* Mobile-first critical styles */
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
}
.header {
background: #fff;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.hero {
padding: 2rem 1rem;
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.hero h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
margin: 0 0 1rem 0;
}
/* Lazy loading des styles non-critiques */
.non-critical-styles {
/* Chargés via JS après le rendu initial */
}
// JavaScript - Lazy loading des styles
function loadNonCriticalCSS() {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/non-critical.css';
link.media = 'print';
link.onload = function() {
this.media = 'all';
};
document.head.appendChild(link);
}
// Chargement différé après load
window.addEventListener('load', loadNonCriticalCSS);26:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"$43"}]}]
27:["$","h2",null,{"children":"UX responsive : au-delà de l'affichage"}]
28:["$","h3",null,{"children":"Interactions adaptatives"}]
29:["$","p",null,{"children":"Un bon design responsive adapte non seulement l'affichage mais aussi les interactions selon le type d'appareil et les capacités de l'utilisateur."}]
44:T8eb,// Détection des capacités d'interaction
class InteractionAdapter {
constructor() {
this.hasHover = window.matchMedia('(hover: hover)').matches;
this.hasTouch = 'ontouchstart' in window;
this.pointerType = this.detectPointerType();
this.initInteractions();
}
detectPointerType() {
if (this.hasTouch && !this.hasHover) return 'touch';
if (!this.hasTouch && this.hasHover) return 'mouse';
return 'hybrid'; // Support tactile + souris
}
initInteractions() {
// Adaptation des tooltips
if (this.pointerType === 'touch') {
this.initTouchTooltips();
} else {
this.initHoverTooltips();
}
// Adaptation des menus
if (this.pointerType === 'touch') {
this.initTouchMenus();
} else {
this.initHoverMenus();
}
}
initTouchTooltips() {
// Tooltips sur tap pour mobile
document.querySelectorAll('[data-tooltip]').forEach(element => {
element.addEventListener('click', (e) => {
this.showTooltip(element, element.dataset.tooltip);
e.preventDefault();
});
});
}
initHoverTooltips() {
// Tooltips sur hover pour desktop
document.querySelectorAll('[data-tooltip]').forEach(element => {
element.addEventListener('mouseenter', () => {
this.showTooltip(element, element.dataset.tooltip);
});
element.addEventListener('mouseleave', () => {
this.hideTooltip(element);
});
});
}
}
/* CSS - Styles adaptatifs aux interactions */
/* Tailles de touch targets pour mobile */
@media (pointer: coarse) {
.btn, .link, input, button {
min-height: 44px; /* Recommandation Apple/Google */
min-width: 44px;
padding: 12px 16px;
}
.menu-item {
padding: 16px;
font-size: 18px;
}
}
/* Hover effects seulement pour devices avec hover */
@media (hover: hover) {
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.btn:hover {
background-color: var(--primary-dark);
}
}
/* Pas d'hover effects sur touch */
@media (hover: none) {
.card {
/* Styles statiques pour touch */
}
.btn:active {
transform: scale(0.98);
background-color: var(--primary-dark);
}
}2a:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"$44"}]}]
2b:["$","h3",null,{"children":"Navigation adaptive"}]
45:Tce8,// Navigation responsive intelligente
class ResponsiveNavigation {
constructor() {
this.nav = document.querySelector('.main-nav');
this.menuButton = document.querySelector('.menu-toggle');
this.navItems = document.querySelectorAll('.nav-item');
this.initNavigation();
this.handleResize();
}
initNavigation() {
// Menu burger pour mobile
this.menuButton?.addEventListener('click', () => {
this.toggleMobileMenu();
});
// Fermeture automatique au redimensionnement
window.addEventListener('resize', () => {
this.handleResize();
});
// Navigation au clavier
this.initKeyboardNavigation();
}
toggleMobileMenu() {
const isOpen = this.nav.classList.contains('open');
if (isOpen) {
this.closeMobileMenu();
} else {
this.openMobileMenu();
}
}
openMobileMenu() {
this.nav.classList.add('open');
this.menuButton.setAttribute('aria-expanded', 'true');
// Focus sur le premier élément
this.navItems[0]?.focus();
// Désactiver le scroll body
document.body.style.overflow = 'hidden';
}
closeMobileMenu() {
this.nav.classList.remove('open');
this.menuButton.setAttribute('aria-expanded', 'false');
// Restaurer le scroll
document.body.style.overflow = '';
// Remettre le focus sur le bouton
this.menuButton.focus();
}
handleResize() {
const isDesktop = window.innerWidth >= 768;
if (isDesktop && this.nav.classList.contains('open')) {
this.closeMobileMenu();
}
}
initKeyboardNavigation() {
this.nav.addEventListener('keydown', (e) => {
const currentFocus = document.activeElement;
const focusableElements = [...this.navItems];
const currentIndex = focusableElements.indexOf(currentFocus);
switch (e.key) {
case 'Escape':
this.closeMobileMenu();
break;
case 'ArrowDown':
case 'ArrowRight':
e.preventDefault();
const nextIndex = (currentIndex + 1) % focusableElements.length;
focusableElements[nextIndex]?.focus();
break;
case 'ArrowUp':
case 'ArrowLeft':
e.preventDefault();
const prevIndex = currentIndex === 0 ? focusableElements.length - 1 : currentIndex - 1;
focusableElements[prevIndex]?.focus();
break;
}
});
}
}
/* CSS Navigation responsive */
.main-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-list {
display: flex;
gap: 2rem;
margin: 0;
padding: 0;
list-style: none;
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
/* Mobile styles */
@media (max-width: 767px) {
.menu-toggle {
display: block;
}
.nav-list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: white;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1000;
}
.main-nav.open .nav-list {
transform: translateX(0);
}
.nav-item {
font-size: 1.5rem;
padding: 1rem;
}
}2c:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"$45"}]}]
2d:["$","h2",null,{"children":"Tests et debugging responsive"}]
2e:["$","h3",null,{"children":"Outils de développement"}]
2f:["$","div",null,{"className":"bg-gray-50 p-6 rounded-lg my-6","children":[["$","h4",null,{"className":"font-semibold mb-3","children":"Outils essentiels pour le responsive"}],["$","div",null,{"className":"grid md:grid-cols-2 gap-4","children":[["$","div",null,{"children":[["$","h5",null,{"className":"font-medium mb-2","children":"Outils navigateur"}],["$","ul",null,{"className":"text-sm space-y-1","children":[["$","li",null,{"children":"• Chrome DevTools - Device Mode"}],["$","li",null,{"children":"• Firefox Responsive Design Mode"}],["$","li",null,{"children":"• Safari Web Inspector"}],["$","li",null,{"children":"• Edge DevTools"}]]}]]}],["$","div",null,{"children":[["$","h5",null,{"className":"font-medium mb-2","children":"Outils en ligne"}],["$","ul",null,{"className":"text-sm space-y-1","children":[["$","li",null,{"children":"• BrowserStack - Tests multi-devices"}],["$","li",null,{"children":"• ResponsivelyApp - Preview multiple"}],["$","li",null,{"children":"• Google Mobile-Friendly Test"}],["$","li",null,{"children":"• PageSpeed Insights Mobile"}]]}]]}],["$","div",null,{"children":[["$","h5",null,{"className":"font-medium mb-2","children":"Extensions utiles"}],["$","ul",null,{"className":"text-sm space-y-1","children":[["$","li",null,{"children":"• Responsive Viewer (Chrome)"}],["$","li",null,{"children":"• Window Resizer (Firefox)"}],["$","li",null,{"children":"• Viewport Resizer"}],["$","li",null,{"children":"• Mobile/Responsive Web Design Tester"}]]}]]}],["$","div",null,{"children":[["$","h5",null,{"className":"font-medium mb-2","children":"Tests automatisés"}],["$","ul",null,{"className":"text-sm space-y-1","children":[["$","li",null,{"children":"• Puppeteer + Jest"}],["$","li",null,{"children":"• Playwright multi-browser"}],["$","li",null,{"children":"• BackstopJS visual regression"}],["$","li",null,{"children":"• Pa11y accessibility testing"}]]}]]}]]}]]}]
30:["$","h3",null,{"children":"Script de test automatisé"}]
46:Te86,// Tests automatisés de responsive design
const puppeteer = require('puppeteer');
class ResponsiveDesignTester {
constructor() {
this.viewports = [
{ name: 'Mobile Portrait', width: 375, height: 667 },
{ name: 'Mobile Landscape', width: 667, height: 375 },
{ name: 'Tablet Portrait', width: 768, height: 1024 },
{ name: 'Tablet Landscape', width: 1024, height: 768 },
{ name: 'Desktop Small', width: 1366, height: 768 },
{ name: 'Desktop Large', width: 1920, height: 1080 }
];
}
async testPage(url) {
const browser = await puppeteer.launch();
const results = [];
for (const viewport of this.viewports) {
const page = await browser.newPage();
await page.setViewport(viewport);
await page.goto(url, { waitUntil: 'networkidle0' });
// Tests spécifiques au responsive
const result = await this.runResponsiveTests(page, viewport);
results.push({ viewport: viewport.name, ...result });
await page.close();
}
await browser.close();
return results;
}
async runResponsiveTests(page, viewport) {
const tests = {};
// Test 1: Vérifier l'absence de scroll horizontal
tests.horizontalScroll = await page.evaluate(() => {
return document.body.scrollWidth <= window.innerWidth;
});
// Test 2: Vérifier la visibilité des éléments critiques
tests.criticalElements = await page.evaluate(() => {
const critical = ['.header', '.main-content', '.footer'];
return critical.every(selector => {
const element = document.querySelector(selector);
return element && element.offsetHeight > 0;
});
});
// Test 3: Taille des touch targets sur mobile
if (viewport.width < 768) {
tests.touchTargets = await page.evaluate(() => {
const interactive = document.querySelectorAll('button, a, input, [role="button"]');
return Array.from(interactive).every(el => {
const rect = el.getBoundingClientRect();
return rect.width >= 44 && rect.height >= 44;
});
});
}
// Test 4: Performance sur mobile
const metrics = await page.metrics();
tests.performance = {
JSHeapUsedSize: metrics.JSHeapUsedSize < 50000000, // < 50MB
JSHeapTotalSize: metrics.JSHeapTotalSize < 100000000 // < 100MB
};
// Test 5: Accessibilité
tests.accessibility = await page.evaluate(() => {
// Vérifier les contrastes, focus, etc.
const focusableElements = document.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
return Array.from(focusableElements).every(el => {
return getComputedStyle(el).outline !== 'none' || el.style.outline !== 'none';
});
});
return tests;
}
generateReport(results) {
console.log('\n=== Rapport de tests responsive ===\n');
results.forEach(result => {
console.log(`📱 ${result.viewport}`);
console.log(` Scroll horizontal: ${result.horizontalScroll ? '✅' : '❌'}`);
console.log(` Éléments critiques: ${result.criticalElements ? '✅' : '❌'}`);
if (result.touchTargets !== undefined) {
console.log(` Touch targets: ${result.touchTargets ? '✅' : '❌'}`);
}
console.log(` Performance: ${Object.values(result.performance).every(v => v) ? '✅' : '❌'}`);
console.log(` Accessibilité: ${result.accessibility ? '✅' : '❌'}`);
console.log('');
});
}
}
// Utilisation
const tester = new ResponsiveDesignTester();
tester.testPage('https://monsite.com')
.then(results => tester.generateReport(results))
.catch(console.error);31:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"$46"}]}]
32:["$","h2",null,{"children":"Tendances et futur du responsive design"}]
33:["$","h3",null,{"children":"Design system et tokens responsive"}]
34:["$","p",null,{"children":"Les design systems modernes intègrent des tokens responsives qui s'adaptent automatiquement au contexte d'affichage, permettant une cohérence parfaite sur tous les écrans."}]
47:T4f2,// Design tokens responsive avec CSS Custom Properties
:root {
/* Base tokens */
--color-primary: #3b82f6;
--color-secondary: #64748b;
/* Responsive spacing tokens */
--space-xs: clamp(0.5rem, 2vw, 0.75rem);
--space-sm: clamp(0.75rem, 3vw, 1rem);
--space-md: clamp(1rem, 4vw, 1.5rem);
--space-lg: clamp(1.5rem, 6vw, 2.5rem);
--space-xl: clamp(2rem, 8vw, 4rem);
/* Responsive font tokens */
--font-size-sm: clamp(0.875rem, 2vw, 1rem);
--font-size-base: clamp(1rem, 2.5vw, 1.125rem);
--font-size-lg: clamp(1.125rem, 3vw, 1.5rem);
--font-size-xl: clamp(1.25rem, 4vw, 2rem);
--font-size-2xl: clamp(1.5rem, 6vw, 3rem);
/* Component-specific tokens */
--button-padding: var(--space-sm) var(--space-md);
--card-padding: var(--space-md);
--section-padding: var(--space-lg) var(--space-md);
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
:root {
--button-padding: var(--space-md) var(--space-lg);
--card-padding: var(--space-lg);
}
}
/* Component usage */
.button {
padding: var(--button-padding);
font-size: var(--font-size-base);
border-radius: var(--space-xs);
}
.card {
padding: var(--card-padding);
margin-bottom: var(--space-lg);
}
.section {
padding: var(--section-padding);
}35:["$","pre",null,{"className":"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto","children":["$","code",null,{"children":"$47"}]}]
36:["$","h2",null,{"children":"Conclusion"}]
37:["$","p",null,{"children":"Le design responsive en 2024 va bien au-delà de l'adaptation d'écrans. C'est une approche holistique qui prend en compte les performances, l'accessibilité, les interactions et l'expérience utilisateur globale. Les nouvelles technologies comme les container queries et la typographie fluide ouvrent de nouvelles possibilités créatives."}]
38:["$","p",null,{"children":"Pour réussir votre design responsive, adoptez une approche mobile-first, testez sur de vrais appareils, optimisez les performances et n'oubliez jamais que l'objectif final est de créer la meilleure expérience possible pour vos utilisateurs, quel que soit leur appareil."}]
39:["$","footer",null,{"className":"mt-16 pt-8 border-t border-gray-200","children":["$","div",null,{"className":"flex items-center justify-between","children":[["$","div",null,{"children":[["$","p",null,{"className":"text-sm text-gray-600 mb-2","children":"Publié le 25 Juillet 2024"}],["$","div",null,{"className":"flex items-center space-x-4","children":[["$","span",null,{"className":"text-sm text-gray-500","children":"Partager:"}],["$","a",null,{"href":"#","className":"text-tuxyoBlue hover:text-blue-700","children":"Twitter"}],["$","a",null,{"href":"#","className":"text-tuxyoBlue hover:text-blue-700","children":"LinkedIn"}]]}]]}],["$","$Lf",null,{"href":"/blog","className":"bg-tuxyoBlue text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition","children":"← Retour au blog"}]]}]}]
3a:["$","$L48",null,{"children":["$","$3e",null,{"name":"Next.MetadataOutlet","children":"$@49"}]}]
3c:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
3f:[["$","title","0",{"children":"Tuxyo - Solutions logicielles expertes"}],["$","meta","1",{"name":"description","content":"Expertise en développement logiciel avec +25 ans d'expérience. Spécialisé en Java, NodeJS, Spring Boot, ReactJS, et solutions Cloud. Architecture et développement de solutions robustes."}]]
49:null
