{"id":22861,"date":"2026-08-29T10:34:25","date_gmt":"2026-08-29T08:34:25","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&p=22861"},"modified":"2026-08-29T10:34:26","modified_gmt":"2026-08-29T08:34:26","password":"","slug":"design-adaptatif-kopage","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/fr\/hilfe\/website-baukasten\/kopage-responsive-design\/","title":{"rendered":"Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes"},"content":{"rendered":"

Le constructeur de sites Web classique Kopage cr\u00e9e des sites Web r\u00e9actifs dont l'affichage peut s'adapter \u00e0 diff\u00e9rentes tailles d'\u00e9cran.<\/p>\n\n\n\n

Malgr\u00e9 tout, tu ne devrais pas contr\u00f4ler ton site Web exclusivement sur un ordinateur de bureau. Les textes, les images, la navigation, les formulaires, les contenus externes ou le code ins\u00e9r\u00e9 individuellement peuvent avoir un rendu diff\u00e9rent sur un smartphone par rapport \u00e0 un grand \u00e9cran.<\/p>\n\n\n\n

Dans ce guide, nous vous expliquons ce que signifie le design adaptatif (responsive design), quelles zones de votre site web Kopage vous devez particuli\u00e8rement surveiller et comment identifier les probl\u00e8mes d'affichage courants sur smartphone et tablette.<\/p>\n\n\n\n

\n

En bref :<\/strong> Le Responsive Design signifie que la structure et l'affichage d'un site web s'adaptent \u00e0 l'\u00e9cran disponible. Par exemple, un affichage de bureau \u00e0 plusieurs colonnes peut se transformer sur un smartphone en un affichage dispos\u00e9 verticalement.<\/p>\n<\/blockquote>\n\n\n\n

Pourquoi l'affichage mobile est-il important ?<\/h2>\n\n\n\n

Aujourd'hui, les sites Web sont consult\u00e9s sur des appareils tr\u00e8s diff\u00e9rents.<\/p>\n\n\n\n

Cela comprend les ordinateurs de bureau et les ordinateurs portables ainsi que les tablettes et les smartphones de diff\u00e9rentes tailles d'\u00e9cran.<\/p>\n\n\n\n

Une page Web ne devrait donc pas seulement fonctionner avec la taille d'\u00e9cran exacte avec laquelle elle a \u00e9t\u00e9 cr\u00e9\u00e9e.<\/p>\n\n\n\n

Un changement typique peut par exemple ressembler \u00e0 ceci :<\/p>\n\n\n\n

Bureau\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Contenu 1 \u2502 Contenu 2 \u2502 Contenu 3 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\nSmartphone\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Contenu 1           \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 Contenu 2           \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 Contenu 3           \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n\n\n
Le contenu reste ainsi utilisable m\u00eame sur un \u00e9cran plus \u00e9troit.<\/p>\n\n\n\n
Que fait Kopage automatiquement ?<\/h2>\n\n\n\n
Le constructeur de sites Web classique de Kopage est con\u00e7u pour des sites Web adaptatifs (responsives). De nombreux mises en page et blocs de contenu peuvent ainsi s'adapter automatiquement \u00e0 diff\u00e9rentes tailles d'\u00e9cran.<\/p>\n\n\n\n
Cela ne signifie cependant pas que tu ne dois plus contr\u00f4ler le r\u00e9sultat.<\/p>\n\n\n\n
L'adaptation technique d'une mise en page peut fonctionner, tandis que, par exemple, un titre tr\u00e8s long, une image inappropri\u00e9e ou un widget externe entra\u00eenent malgr\u00e9 tout un mauvais affichage sur mobile.<\/p>\n\n\n\n
\n
Important :<\/strong> \u201e Responsive \u201c ne signifie pas automatiquement \u201e parfait sur tous les appareils \u201c. L'adaptation automatique constitue la base technique, tandis que le contr\u00f4le qualit\u00e9 reste la responsabilit\u00e9 du propri\u00e9taire du site Web.<\/p>\n<\/blockquote>\n\n\n\n
Ne pas juger un site web uniquement dans l'\u00e9diteur<\/h2>\n\n\n\n
Pendant que tu \u00e9dites un site web, tu te concentres rapidement sur l'affichage dans l'\u00e9diteur.<\/p>\n\n\n\n
Cependant, ce qui compte, c'est \u00e0 quoi ressemble le site Web publi\u00e9 pour un visiteur r\u00e9el.<\/p>\n\n\n\n
Contr\u00f4lez par cons\u00e9quent les modifications importantes \u00e9galement en dehors de l'\u00e9diteur sur le site web accessible au public.<\/p>\n\n\n\n
V\u00e9rifier l'ordinateur de bureau, la tablette et le smartphone<\/h2>\n\n\n\n
Pour un contr\u00f4le de base, tu devrais prendre en compte au moins trois zones d'affichage :<\/p>\n\n\n\n
Ordinateur de bureau \/ Ordinateur portable\nTablette\nSmartphone<\/code><\/pre>\n\n\n\n
Il ne s'agit pas de tester individuellement chaque mod\u00e8le d'appareil existant.<\/p>\n\n\n\n
Il est bien plus important de v\u00e9rifier si le site Web se comporte de mani\u00e8re judicieuse pour les diff\u00e9rentes largeurs disponibles.<\/p>\n\n\n\n
Utiliser un vrai smartphone<\/h2>\n\n\n\n
Une fonction de pr\u00e9pr\u00e9visualisation dans le constructeur de sites Web ou le navigateur est utile, mais elle ne remplace pas tous les tests sur un appareil r\u00e9el.<\/p>\n\n\n\n
Ouvrez donc \u00e9galement votre site web sur votre propre smartphone.<\/p>\n\n\n\n
Tu reconnais ainsi, par exemple, des probl\u00e8mes d'utilisation qui se voient moins dans un aper\u00e7u de bureau r\u00e9duit.<\/p>\n\n\n\n
\n
Conseil pratique :<\/strong> Testez occasionnellement les pages importantes comme le ferait un nouveau visiteur : ouvrez le site web sur votre smartphone et essayez, sans connaissances en mati\u00e8re d'\u00e9dition, de trouver une information, d'utiliser le menu ou de remplir un formulaire.<\/p>\n<\/blockquote>\n\n\n\n
Contr\u00f4ler la navigation sur le smartphone<\/h2>\n\n\n\n
La navigation fait partie des \u00e9l\u00e9ments les plus importants d'un site web mobile.<\/p>\n\n\n\n
Sur un ordinateur de bureau, il y a suffisamment d'espace pour afficher plusieurs \u00e9l\u00e9ments de menu c\u00f4te \u00e0 c\u00f4te. Sur un smartphone, la largeur disponible est nettement moindre.<\/p>\n\n\n\n
C'est pourquoi les sites Web adaptatifs utilisent souvent une navigation mobile plus compacte.<\/p>\n\n\n\n
V\u00e9rifiez que le menu s'ouvre et se ferme facilement et que tous les \u00e9l\u00e9ments de menu importants sont accessibles.<\/p>\n\n\n\n
Tester \u00e9galement les sous-menus<\/h2>\n\n\n\n
Si votre site Web utilise des sous-pages et des sous-menus, vous ne devez pas tester uniquement le menu principal.<\/p>\n\n\n\n
V\u00e9rifiez \u00e9galement si les niveaux de navigation subordonn\u00e9s sont utilisables de mani\u00e8re compr\u00e9hensible sur un \u00e9cran tactile.<\/p>\n\n\n\n
Nous expliquons comment g\u00e9rer fondamentalement la structure des pages sous G\u00e9rer les pages, la navigation et les sous-menus dans Kopage<\/a>.<\/p>\n\n\n\n
\u00c9viter les \u00e9l\u00e9ments de menu trop longs<\/h2>\n\n\n\n
Les noms de page tr\u00e8s longs peuvent para\u00eetre encombr\u00e9s, en particulier sur les petits \u00e9crans.<\/p>\n\n\n\n
Un \u00e9l\u00e9ment de menu doit \u00eatre aussi court que possible tout en d\u00e9crivant clairement o\u00f9 il m\u00e8ne.<\/p>\n\n\n\n
Au lieu d'une longue formulation telle que :<\/p>\n\n\n\n
Ici, vous apprendrez tout sur les services que nous proposons<\/code><\/p>\n\n\n\n
est par exemple :<\/p>\n\n\n\n
Services<\/code><\/p>\n\n\n\n
beaucoup plus appropri\u00e9 comme navigation.<\/p>\n\n\n\n
V\u00e9rifier les titres sur les petits \u00e9crans<\/h2>\n\n\n\n
Les grands titres qui tiennent facilement sur une seule ligne sur un bureau peuvent en n\u00e9cessiter plusieurs sur un smartphone.<\/p>\n\n\n\n
C'est fondamentalement normal.<\/p>\n\n\n\n
Cela devient probl\u00e9matique lorsque des mots individuels d\u00e9passent de l'\u00e9cran, que le titre prend une place disproportionn\u00e9e ou qu'il recouvre d'autres contenus.<\/p>\n\n\n\n
V\u00e9rifie par cons\u00e9quent particuli\u00e8rement les grands titres principaux et les sous-titres plus longs.<\/p>\n\n\n\n
Les textes doivent pouvoir \u00eatre lus sans zoom.<\/h2>\n\n\n\n
Les visiteurs doivent pouvoir lire les textes normaux d'un site web sur un smartphone sans avoir \u00e0 zoomer manuellement sur la page.<\/p>\n\n\n\n
De tr\u00e8s petites tailles de police rendent l'utilisation difficile, tout comme des lignes de texte extr\u00eamement longues sur de grands \u00e9crans.<\/p>\n\n\n\n
Une bonne pr\u00e9sentation responsive prend donc en compte non seulement la largeur de la mise en page, mais aussi la lisibilit\u00e9 du contenu.<\/p>\n\n\n\n
Ne pas faire de paragraphes inutilement longs sur mobile<\/h2>\n\n\n\n
Un paragraphe qui para\u00eet relativement compact sur un grand \u00e9cran peut sembler tr\u00e8s long sur un smartphone.<\/p>\n\n\n\n
Structurez par cons\u00e9quent les contenus volumineux avec des paragraphes pertinents et des intertitres.<\/p>\n\n\n\n
Cela am\u00e9liore l'orientation sur les petits \u00e9crans et aide \u00e9galement les visiteurs sur ordinateur.<\/p>\n\n\n\n
Contr\u00f4ler les blocs de contenu<\/h2>\n\n\n\n
Les blocs de contenu peuvent afficher plusieurs contenus c\u00f4te \u00e0 c\u00f4te sur les \u00e9crans plus grands et les r\u00e9organiser sur les appareils plus petits.<\/p>\n\n\n\n
V\u00e9rifiez donc apr\u00e8s l'insertion ou la modification d'un bloc si l'ordre des contenus reste pertinent sur le smartphone.<\/p>\n\n\n\n
En particulier dans le cas de combinaisons d'images et de textes, il doit rester clair, apr\u00e8s la r\u00e9organisation mobile, quelle image correspond \u00e0 quel texte.<\/p>\n\n\n\n
Nous expliquons le travail avec les blocs de contenu sur Cr\u00e9er du contenu avec Kopage : modifier les blocs de contenu, les textes et les images<\/a>.<\/p>\n\n\n\n
Contr\u00f4ler les images de mani\u00e8re responsive<\/h2>\n\n\n\n
Les images sont une cause fr\u00e9quente de probl\u00e8mes sur les petits \u00e9crans.<\/p>\n\n\n\n
V\u00e9rifiez si les images restent dans la zone disponible et si le contenu important de l'image reste visible m\u00eame apr\u00e8s un \u00e9ventuel ajustement ou recadrage.<\/p>\n\n\n\n
Une image tr\u00e8s large peut para\u00eetre compl\u00e8tement diff\u00e9rente sur un smartphone que sur un ordinateur de bureau.<\/p>\n\n\n\n
Choisir le format d'image adapt\u00e9 \u00e0 l'utilisation<\/h2>\n\n\n\n
Une image panoramique extr\u00eamement large peut tr\u00e8s bien fonctionner comme grand espace de bureau, tandis que le sujet principal devient \u00e0 peine reconnaissable sur un smartphone \u00e9troit.<\/p>\n\n\n\n
Tenez donc d\u00e9j\u00e0 compte du lieu et du mode d'utilisation de l'image lors de sa s\u00e9lection.<\/p>\n\n\n\n
Vous trouverez de plus amples informations sur Cr\u00e9er des images, des galeries photo et des diaporamas dans Kopage<\/a>.<\/p>\n\n\n\n
Tester des gal\u00e8res sur le smartphone<\/h2>\n\n\n\n
Si vous utilisez une galerie de photos, vous devez v\u00e9rifier combien d'images s'affichent simultan\u00e9ment sur un petit \u00e9cran et comment les images individuelles s'ouvrent ou se consultent.<\/p>\n\n\n\n
Une galerie doit \u00e9galement pouvoir \u00eatre manipul\u00e9e confortablement via un \u00e9cran tactile.<\/p>\n\n\n\n
Ne pas tester le slider uniquement sur ordinateur<\/h2>\n\n\n\n
Les curseurs peuvent \u00e9galement avoir un rendu diff\u00e9rent sur les \u00e9crans plus petits.<\/p>\n\n\n\n
V\u00e9rifiez en particulier si les images sont affich\u00e9es de mani\u00e8re judicieuse et si les \u00e9ventuels textes ou \u00e9l\u00e9ments de commande restent lisibles et accessibles.<\/p>\n\n\n\n
Si un curseur sur le smartphone g\u00eane plus qu'il n'aide, vous devez v\u00e9rifier si le contenu utilis\u00e9 ou sa structure peuvent \u00eatre adapt\u00e9s.<\/p>\n\n\n\n
Les boutons doivent \u00eatre faciles \u00e0 utiliser<\/h2>\n\n\n\n
Les boutons et autres \u00e9l\u00e9ments cliquables sont manipul\u00e9s avec le doigt sur les smartphones.<\/p>\n\n\n\n
Ils ne doivent donc pas \u00eatre inutilement petits ou si rapproch\u00e9s que l'on touche accidentellement le mauvais \u00e9l\u00e9ment.<\/p>\n\n\n\n
V\u00e9rifiez \u00e9galement l'\u00e9tiquette.<\/p>\n\n\n\n
Un texte de bouton tr\u00e8s long peut se diviser de mani\u00e8re peu esth\u00e9tique sur un \u00e9cran \u00e9troit.<\/p>\n\n\n\n
Liens dans le texte<\/h2>\n\n\n\n
M\u00eame les liens textuels normaux doivent \u00eatre faciles \u00e0 s\u00e9lectionner sur un \u00e9cran tactile.<\/p>\n\n\n\n
Lorsque de nombreux liens diff\u00e9rents se trouvent directement c\u00f4te \u00e0 c\u00f4te, leur utilisation peut devenir plus difficile sur les petits appareils.<\/p>\n\n\n\n
Ins\u00e9rez donc des liens l\u00e0 o\u00f9 ils ont un sens sur le plan du contenu et \u00e9vitez les accumulations inutiles de liens.<\/p>\n\n\n\n
Tester les formulaires mobiles avec un soin tout particulier<\/h2>\n\n\n\n
Les formulaires de contact sont particuli\u00e8rement importants sur les smartphones, car de nombreux visiteurs prennent contact directement via un appareil mobile.<\/p>\n\n\n\n
Testez un formulaire de mani\u00e8re approfondie et ne vous contentez pas d'en contr\u00f4ler l'apparence visuelle.<\/p>\n\n\n\n
V\u00e9rifiez par exemple :<\/p>\n\n\n\n
Tous les libell\u00e9s de champs sont-ils lisibles ?\nLes champs de saisie sont-ils assez larges ?\nChaque champ peut-il \u00eatre s\u00e9lectionn\u00e9 ?\nLes options de s\u00e9lection sont-elles utilisables ?\nLe bouton d'envoi est-il visible ?\nLe formulaire peut-il \u00eatre enti\u00e8rement soumis ?\nLa confirmation attendue appara\u00eet-elle ?<\/code><\/pre>\n\n\n\n
Nous traitons de la configuration des formulaires sous Cr\u00e9er des formulaires et des formulaires de contact avec Kopage<\/a>.<\/p>\n\n\n\n
Coordonn\u00e9es sur le smartphone<\/h2>\n\n\n\n
Les num\u00e9ros de t\u00e9l\u00e9phone, les adresses e-mail et les adresses postales doivent \u00e9galement \u00eatre enti\u00e8rement lisibles sur les petits \u00e9crans.<\/p>\n\n\n\n
Des adresses e-mail particuli\u00e8rement longues ou d'autres cha\u00eenes de caract\u00e8res peuvent d\u00e9passer d'une zone en cas de conception d\u00e9favorable.<\/p>\n\n\n\n
V\u00e9rifiez par cons\u00e9quent m\u00eame les pages de contact pr\u00e9tendument simples sur un smartphone.<\/p>\n\n\n\n
Google Maps sur les appareils mobiles<\/h2>\n\n\n\n
Une carte int\u00e9gr\u00e9e peut occuper beaucoup d'espace sur un ordinateur de bureau, tandis que sur un smartphone, seule une largeur limit\u00e9e est disponible.<\/p>\n\n\n\n
V\u00e9rifiez si la carte s'affiche correctement et si le reste de la page peut toujours \u00eatre utilis\u00e9 sans probl\u00e8me.<\/p>\n\n\n\n
Nous traitons Google Maps et d'autres contenus externes sous Int\u00e9grer Google Maps, YouTube et les r\u00e9seaux sociaux dans Kopage<\/a>.<\/p>\n\n\n\n
Contr\u00f4ler les vid\u00e9os YouTube<\/h2>\n\n\n\n
Les vid\u00e9os int\u00e9gr\u00e9es doivent s'adapter \u00e0 la largeur disponible.<\/p>\n\n\n\n
V\u00e9rifiez que la vid\u00e9o est enti\u00e8rement visible sur le smartphone et ne d\u00e9passe pas de la zone de contenu.<\/p>\n\n\n\n
Testez \u00e9galement si la lecture peut \u00eatre d\u00e9marr\u00e9e comme pr\u00e9vu.<\/p>\n\n\n\n
Les widgets externes sont une source fr\u00e9quente de probl\u00e8mes<\/h2>\n\n\n\n
Kopage peut \u00eatre con\u00e7u de mani\u00e8re responsive, tandis qu'un service externe int\u00e9gr\u00e9 utilise une largeur fixe ou ses propres r\u00e8gles d'affichage.<\/p>\n\n\n\n
Cela peut se produire par exemple avec des syst\u00e8mes de r\u00e9servation, des formulaires externes, des fonctions de chat ou d'autres widgets.<\/p>\n\n\n\n
Teste de telles int\u00e9grations par cons\u00e9quent avec une attention toute particuli\u00e8re sur plusieurs tailles d'\u00e9cran.<\/p>\n\n\n\n
V\u00e9rifier son propre code HTML, CSS et JavaScript<\/h2>\n\n\n\n
Le code ins\u00e9r\u00e9 individuellement ne devient pas automatiquement responsif du fait qu'il est utilis\u00e9 au sein d'un site Web Kopage.<\/p>\n\n\n\n
Des largeurs particuli\u00e8rement fixes, des positionnements fixes et des \u00e9l\u00e9ments externes peuvent causer des probl\u00e8mes sur les petits \u00e9crans.<\/p>\n\n\n\n
Si vous utilisez du code personnalis\u00e9, vous devez \u00e9galement v\u00e9rifier chaque modification sur mobile.<\/p>\n\n\n\n
Vous trouverez de plus amples informations sur Utiliser son propre code HTML, CSS et JavaScript dans Kopage<\/a>.<\/p>\n\n\n\n
\n
Attention :<\/strong> Si un seul \u00e9l\u00e9ment d\u00e9passe lat\u00e9ralement du site web sur un smartphone, v\u00e9rifiez en particulier les contenus int\u00e9gr\u00e9s individuellement et le code personnalis\u00e9. La cause ne r\u00e9side pas n\u00e9cessairement dans la mise en page g\u00e9n\u00e9rale de la page.<\/p>\n<\/blockquote>\n\n\n\n
Qu'est-ce que le d\u00e9filement horizontal ?<\/h2>\n\n\n\n
Sur un site web mobile normal, le contenu principal doit fondamentalement \u00eatre affich\u00e9 dans la largeur d'\u00e9cran disponible.<\/p>\n\n\n\n
Si le visiteur doit faire d\u00e9filer toute la page horizontalement pour pouvoir voir le contenu, un \u00e9l\u00e9ment d\u00e9passe souvent de la largeur pr\u00e9vue.<\/p>\n\n\n\n
Les causes possibles sont par exemple :<\/p>\n\n\n\n
\u00e9l\u00e9ment int\u00e9gr\u00e9 trop large\nsp\u00e9cification de largeur fixe\ncha\u00eene de caract\u00e8res tr\u00e8s longue sans retour \u00e0 la ligne\nHTML ou CSS personnalis\u00e9\nwidget externe<\/code><\/pre>\n\n\n\n
Les tableaux peuvent \u00eatre difficiles sur les smartphones<\/h2>\n\n\n\n
Il est difficile d'afficher des tableaux larges avec de nombreuses colonnes sur de petits \u00e9crans.<\/p>\n\n\n\n
Si vous souhaitez pr\u00e9senter des informations d\u00e9taill\u00e9es sous forme de tableau, vous devez donc v\u00e9rifier si le tableau reste r\u00e9ellement compr\u00e9hensible sur mobile.<\/p>\n\n\n\n
Dans certains cas, une structure de contenu diff\u00e9rente peut \u00eatre plus facile \u00e0 lire pour les visiteurs mobiles.<\/p>\n\n\n\n
Tester les t\u00e9l\u00e9chargements sur le smartphone<\/h2>\n\n\n\n
Si vous proposez des fichiers PDF ou d'autres documents, vous devez \u00e9galement contr\u00f4ler leur utilisation sur les appareils mobiles.<\/p>\n\n\n\n
Le lien de t\u00e9l\u00e9chargement lui-m\u00eame doit \u00eatre facile \u00e0 utiliser et le document doit \u00eatre utile pour les visiteurs.<\/p>\n\n\n\n
Vous trouverez de plus amples informations sur G\u00e9rer les fichiers et proposer des t\u00e9l\u00e9chargements sur le site Web<\/a>.<\/p>\n\n\n\n
Tester enti\u00e8rement la boutique en ligne sur mobile<\/h2>\n\n\n\n
Dans une boutique en ligne, il ne suffit pas de consulter la page produit sur un smartphone.<\/p>\n\n\n\n
Testez l'ensemble du processus d'achat.<\/p>\n\n\n\n
S\u00e9lectionner le produit\n        \u2193\nV\u00e9rifier les d\u00e9tails du produit\n        \u2193\nOuvrir le panier\n        \u2193\nContr\u00f4ler la quantit\u00e9 et le prix\n        \u2193\nSaisir les informations de commande\n        \u2193\nS\u00e9lectionner les options disponibles\n        \u2193\nFinaliser le processus de commande<\/code><\/pre>\n\n\n\n
Nous expliquons comment configurer fondamentalement la boutique Kopage sur Cr\u00e9er une boutique en ligne avec Kopage et g\u00e9rer les produits<\/a>.<\/p>\n\n\n\n
Tester des sites multilingues sur mobile<\/h2>\n\n\n\n
Les traductions peuvent \u00eatre consid\u00e9rablement plus longues ou plus courtes que le texte original.<\/p>\n\n\n\n
Cela peut faire qu'une page dans une langue ait un aspect parfait sur le smartphone et pose des probl\u00e8mes dans une autre langue.<\/p>\n\n\n\n
V\u00e9rifiez par cons\u00e9quent chaque version linguistique importante s\u00e9par\u00e9ment.<\/p>\n\n\n\n
La navigation, le choix de la langue, les boutons et les titres sont particuli\u00e8rement pertinents.<\/p>\n\n\n\n
Nous traitons le multilinguisme sous Cr\u00e9er un site web multilingue avec Kopage<\/a>.<\/p>\n\n\n\n
V\u00e9rifier les en-t\u00eates sur le smartphone<\/h2>\n\n\n\n
L'en-t\u00eate contient souvent un logo, la navigation et d'autres \u00e9l\u00e9ments importants.<\/p>\n\n\n\n
V\u00e9rifiez que le logo appara\u00eet dans une taille raisonnable et que la navigation reste facilement accessible.<\/p>\n\n\n\n
Un logo tr\u00e8s grand ne devrait pas occuper une part disproportionn\u00e9e de l'\u00e9cran du smartphone.<\/p>\n\n\n\n
Ne pas oublier le pied de page<\/h2>\n\n\n\n
Le pied de page est facilement ignor\u00e9 lors du contr\u00f4le mobile, car il n'appara\u00eet qu'\u00e0 la fin d'une page.<\/p>\n\n\n\n
V\u00e9rifiez \u00e9galement les textes, les liens, les informations de contact et, le cas \u00e9ch\u00e9ant, d'autres \u00e9l\u00e9ments.<\/p>\n\n\n\n
En particulier, plusieurs zones de pied de page dispos\u00e9es c\u00f4te \u00e0 c\u00f4te peuvent s'afficher les unes en dessous des autres sur un smartphone. V\u00e9rifiez si l'ordre ainsi obtenu reste logique.<\/p>\n\n\n\n
Le design et le responsive design vont de pair.<\/h2>\n\n\n\n
Les couleurs et les polices peuvent \u00eatre affich\u00e9es techniquement correctement et para\u00eetre n\u00e9anmoins peu adapt\u00e9es sur un smartphone.<\/p>\n\n\n\n
Des polices tr\u00e8s grandes, de faibles contrastes ou des mises en page complexes peuvent rendre l'utilisation mobile difficile.<\/p>\n\n\n\n
Nous traitons des param\u00e8tres g\u00e9n\u00e9raux de conception sous Personnaliser le mod\u00e8le et le design Kopage : couleurs, polices, en-t\u00eate et pied de page<\/a>.<\/p>\n\n\n\n
Prendre en compte le portrait et le paysage<\/h2>\n\n\n\n
Les smartphones et les tablettes peuvent \u00eatre utilis\u00e9s en mode portrait ou paysage.<\/p>\n\n\n\n
Vous n'avez pas besoin de concevoir chaque page s\u00e9par\u00e9ment pour chaque orientation possible. Cependant, pour les zones importantes ou complexes, un bref test dans les deux orientations peut mettre en \u00e9vidence des probl\u00e8mes.<\/p>\n\n\n\n
Tester diff\u00e9rents navigateurs<\/h2>\n\n\n\n
Les navigateurs modernes affichent les technologies web standardis\u00e9es de mani\u00e8re largement uniforme, des diff\u00e9rences peuvent n\u00e9anmoins appara\u00eetre.<\/p>\n\n\n\n
Il peut donc \u00eatre judicieux, pour les sites web importants ou apr\u00e8s des modifications majeures, de v\u00e9rifier la page dans plus d'un navigateur r\u00e9cent.<\/p>\n\n\n\n
Cela est particuli\u00e8rement utile pour les int\u00e9grations externes et le code personnalis\u00e9.<\/p>\n\n\n\n
Utiliser l'aper\u00e7u du navigateur sur l'ordinateur<\/h2>\n\n\n\n
M\u00eame sans plusieurs smartphones, tu peux d'abord contr\u00f4ler l'affichage sur l'ordinateur.<\/p>\n\n\n\n
De nombreux navigateurs modernes disposent d'outils de d\u00e9veloppement permettant de simuler diff\u00e9rentes largeurs d'\u00e9cran.<\/p>\n\n\n\n
Cela est utile pour rep\u00e9rer rapidement les probl\u00e8mes de mise en page \u00e9vidents.<\/p>\n\n\n\n
\n
Remarque :<\/strong> Une taille d'\u00e9cran simul\u00e9e est un bon outil de test, mais elle ne remplace pas enti\u00e8rement l'utilisation sur un v\u00e9ritable appareil tactile.<\/p>\n<\/blockquote>\n\n\n\n
Design adaptatif et temps de chargement<\/h2>\n\n\n\n
Un site mobile ne doit pas seulement \u00eatre esth\u00e9tique, il doit aussi se charger rapidement et efficacement.<\/p>\n\n\n\n
Les utilisateurs de smartphones ne disposent pas toujours d'un r\u00e9seau Wi-Fi rapide.<\/p>\n\n\n\n
De grandes images, de nombreuses vid\u00e9os et de nombreux widgets externes peuvent ainsi se remarquer particuli\u00e8rement sur mobile.<\/p>\n\n\n\n
Utilisez les m\u00e9dias de mani\u00e8re consciente et optimisez les fichiers inutilement volumineux.<\/p>\n\n\n\n
Affichage mobile et SEO<\/h2>\n\n\n\n
Un site web mobile ergonomique est \u00e9galement pertinent pour la qualit\u00e9 et la visibilit\u00e9 d'un site web.<\/p>\n\n\n\n
Les moteurs de recherche doivent \u00eatre en mesure d'indexer techniquement le contenu sur les appareils mobiles, et les visiteurs doivent pouvoir utiliser le site sans obstacles inutiles.<\/p>\n\n\n\n
Nous abordons les bases g\u00e9n\u00e9rales du SEO sous SEO avec Kopage : titres de pages, m\u00e9tadonn\u00e9es, URL et optimisation pour les moteurs de recherche<\/a>.<\/p>\n\n\n\n
Pas besoin de site mobile s\u00e9par\u00e9<\/h2>\n\n\n\n
Dans une conception responsive, le m\u00eame site web est fondamentalement adapt\u00e9 \u00e0 diff\u00e9rentes tailles d'\u00e9cran.<\/p>\n\n\n\n
Vous n'avez donc pas besoin de maintenir en plus une page pour smartphone enti\u00e8rement s\u00e9par\u00e9e avec le m\u00eame contenu pour chaque page de bureau.<\/p>\n\n\n\n
Cela r\u00e9duit la charge de maintenance et \u00e9vite d'avoir \u00e0 effectuer des modifications en parall\u00e8le sur deux sites web distincts.<\/p>\n\n\n\n
V\u00e9rifier \u00e0 nouveau sur mobile apr\u00e8s des modifications de contenu<\/h2>\n\n\n\n
Une page qui s'affiche bien sur mobile aujourd'hui peut \u00e0 nouveau poser des probl\u00e8mes apr\u00e8s une modification ult\u00e9rieure.<\/p>\n\n\n\n
Par exemple, un nouveau titre plus long, une image diff\u00e9rente ou un widget suppl\u00e9mentaire peuvent modifier l'affichage.<\/p>\n\n\n\n
V\u00e9rifiez par cons\u00e9quent \u00e0 nouveau les pages principales, en particulier apr\u00e8s des modifications importantes.<\/p>\n\n\n\n
Prioriser les pages particuli\u00e8rement importantes<\/h2>\n\n\n\n
Sur un site web important, vous n'avez pas besoin de tester compl\u00e8tement toutes les sous-pages sur plusieurs appareils apr\u00e8s chaque petite correction de texte.<\/p>\n\n\n\n
Donnez la priorit\u00e9 aux pages et aux fonctionnalit\u00e9s qui sont particuli\u00e8rement importantes pour les visiteurs.<\/p>\n\n\n\n
Cela comprend souvent :<\/p>\n\n\n\n
Page d'accueil\npages de services importantes\npage de contact\nformulaires\nboutique et processus de commande\npages de destination centrales\nnavigation<\/code><\/pre>\n\n\n\n
Que faire si une seule zone s'affiche mal ?<\/h2>\n\n\n\n
Si le reste du site Web fonctionne correctement sur mobile, vous devez d'abord examiner la zone concern\u00e9e.<\/p>\n\n\n\n
V\u00e9rifiez par exemple si une image exceptionnellement grande, un widget externe, du code HTML personnalis\u00e9 ou du CSS individuel y est utilis\u00e9.<\/p>\n\n\n\n
Ne modifiez pas imm\u00e9diatement tout le design du site web si le probl\u00e8me concerne manifestement un seul \u00e9l\u00e9ment.<\/p>\n\n\n\n
Que faire si l'ensemble du site web pose des probl\u00e8mes sur mobile ?<\/h2>\n\n\n\n
Si de nombreux domaines sont concern\u00e9s, tu dois v\u00e9rifier si des modifications majeures ont \u00e9t\u00e9 apport\u00e9es au mod\u00e8le, au design ou au code personnalis\u00e9.<\/p>\n\n\n\n
N'supprimez pas du contenu au hasard, mais essayez d'abord de d\u00e9terminer depuis quel changement le probl\u00e8me persiste.<\/p>\n\n\n\n
Dans le cas d'un code ins\u00e9r\u00e9 individuellement, il peut \u00eatre judicieux d'annuler la derni\u00e8re modification \u00e0 titre de test.<\/p>\n\n\n\n
Erreurs courantes dans l'affichage mobile<\/h2>\n\n\n\n
Les probl\u00e8mes fr\u00e9quents sont des titres trop longs, des images surdimensionn\u00e9es, une navigation difficile \u00e0 utiliser, des boutons trop petits et des widgets externes \u00e0 largeurs fixes.<\/p>\n\n\n\n
Les longs tableaux, les formulaires non adapt\u00e9s et le code ins\u00e9r\u00e9 individuellement peuvent \u00e9galement poser des probl\u00e8mes sur les smartphones.<\/p>\n\n\n\n
Une erreur particuli\u00e8rement fr\u00e9quente consiste \u00e0 cr\u00e9er un site Web exclusivement sur ordinateur et \u00e0 ne l'ouvrir sur un smartphone pour la premi\u00e8re fois qu'une fois qu'il est enti\u00e8rement termin\u00e9.<\/p>\n\n\n\n
\n
Conseil pratique :<\/strong> V\u00e9rifie l'affichage mobile d\u00e8s la phase de conception. Il est beaucoup plus facile de r\u00e9soudre les probl\u00e8mes si tu les remarques imm\u00e9diatement apr\u00e8s la modification concern\u00e9e.<\/p>\n<\/blockquote>\n\n\n\n
Contr\u00f4le qualit\u00e9 mobile avant publication<\/h2>\n\n\n\n
Ouvrir la page d'accueil\n        \u2193\nTester la navigation\n        \u2193\nTester les sous-menus\n        \u2193\nV\u00e9rifier les titres\n        \u2193\nLire les textes\n        \u2193\nV\u00e9rifier les images et les curseurs\n        \u2193\nTester les boutons et les liens\n        \u2193\nRemplir les formulaires\n        \u2193\nContr\u00f4ler le contenu externe\n        \u2193\nV\u00e9rifier le pied de page\n        \u2193\nOuvrir les sous-pages importantes\n        \u2193\nTester la boutique \/ les t\u00e9l\u00e9chargements\n        \u2193\nV\u00e9rifier sur un deuxi\u00e8me appareil ou navigateur<\/code><\/pre>\n\n\n\n
Le Responsive Design est un contr\u00f4le qualit\u00e9 continu<\/h2>\n\n\n\n
L'optimisation mobile n'est pas une t\u00e2che unique qui est termin\u00e9e pour toujours apr\u00e8s la cr\u00e9ation du site web.<\/p>\n\n\n\n
De nouveaux contenus, images, modules, services externes et adaptations individuelles peuvent modifier l'affichage.<\/p>\n\n\n\n
Un test mobile rapide devrait donc faire partie des contr\u00f4les normaux apr\u00e8s des modifications majeures du site web.<\/p>\n\n\n\n
Quelle est la suite ?<\/h2>\n\n\n\n
Une fois que le contenu de votre site web a \u00e9t\u00e9 structur\u00e9, con\u00e7u et test\u00e9 sur diff\u00e9rents appareils, vient le contr\u00f4le final avant ou apr\u00e8s la publication.<\/p>\n\n\n\n
Dabei solltest du nicht nur das Design, sondern auch Navigation, Links, Formulare und weitere wichtige Funktionen testen.<\/p>\n\n\n\n
C'est pourquoi nous continuons avec Publier un site Web Kopage et r\u00e9soudre les probl\u00e8mes courants<\/a>.<\/p>\n\n\n\n
R\u00e9sum\u00e9<\/h2>\n\n\n\n
Der klassische Kopage Website Builder ist f\u00fcr responsive Websites ausgelegt und kann Inhalte an unterschiedliche Bildschirmgr\u00f6\u00dfen anpassen.<\/p>\n\n\n\n
Trotzdem solltest du deine Website auf Desktop, Tablet und insbesondere auf einem echten Smartphone kontrollieren.<\/p>\n\n\n\n
Achte dabei auf Navigation, \u00dcberschriften, Texte, Bilder, Buttons, Formulare, externe Inhalte, Downloads und gegebenenfalls den vollst\u00e4ndigen Bestellprozess deines Shops.<\/p>\n\n\n\n
Besondere Aufmerksamkeit ben\u00f6tigen externe Widgets und eigener HTML-, CSS- oder JavaScript-Code, weil diese Elemente nicht automatisch optimal an die responsive Kopage-Darstellung angepasst sein m\u00fcssen.<\/p>\n\n\n\n
Kontrolliere die mobile Darstellung au\u00dferdem nach gr\u00f6\u00dferen \u00c4nderungen erneut.<\/p>\n\n\n\n
Eine responsive Website ist nicht einfach eine verkleinerte Desktop-Seite. Inhalte, Navigation und Funktionen m\u00fcssen auf jedem relevanten Bildschirm verst\u00e4ndlich, lesbar und bedienbar bleiben.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"
Der klassische Kopage Website Builder erstellt responsive Websites, deren Darstellung sich an unterschiedliche Bildschirmgr\u00f6\u00dfen anpassen kann. Trotzdem solltest du deine Website nicht ausschlie\u00dflich am Desktop-PC kontrollieren. Texte, Bilder, Navigation, Formulare, externe Inhalte oder individuell eingef\u00fcgter Code k\u00f6nnen auf einem Smartphone anders wirken als auf einem gro\u00dfen Bildschirm. In dieser Anleitung erkl\u00e4ren wir dir, was Responsive […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[84],"doc_tag":[],"class_list":["post-22861","docs","type-docs","status-publish","hentry","doc_category-website-baukasten"],"year_month":"2026-09","word_count":2991,"total_views":"4","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/fr\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"Website-Baukasten","term_url":"https:\/\/www.curiaweb.ch\/fr\/hilfe-kategorie\/website-baukasten\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/comments?post=22861"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22861\/revisions"}],"predecessor-version":[{"id":22863,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22861\/revisions\/22863"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/media?parent=22861"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_category?post=22861"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_tag?post=22861"}],"curies":[{"name":"Bien jou\u00e9","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}