Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes

Le constructeur de sites Web classique Kopage crée des sites Web réactifs dont l'affichage peut s'adapter à différentes tailles d'écran.

Malgré tout, tu ne devrais pas contrôler ton site Web exclusivement sur un ordinateur de bureau. Les textes, les images, la navigation, les formulaires, les contenus externes ou le code inséré individuellement peuvent avoir un rendu différent sur un smartphone par rapport à un grand écran.

Dans ce guide, nous vous expliquons ce que signifie le design adaptatif (responsive design), quelles zones de votre site web Kopage vous devez particulièrement surveiller et comment identifier les problèmes d'affichage courants sur smartphone et tablette.

En bref : Le Responsive Design signifie que la structure et l'affichage d'un site web s'adaptent à l'écran disponible. Par exemple, un affichage de bureau à plusieurs colonnes peut se transformer sur un smartphone en un affichage disposé verticalement.

Pourquoi l'affichage mobile est-il important ? #

Aujourd'hui, les sites Web sont consultés sur des appareils très différents.

Cela comprend les ordinateurs de bureau et les ordinateurs portables ainsi que les tablettes et les smartphones de différentes tailles d'écran.

Une page Web ne devrait donc pas seulement fonctionner avec la taille d'écran exacte avec laquelle elle a été créée.

Un changement typique peut par exemple ressembler à ceci :

Bureau
┌──────────┬──────────┬──────────┐
│ Contenu 1 │ Contenu 2 │ Contenu 3 │
└──────────┴──────────┴──────────┘

Smartphone
┌────────────────────┐
│ Contenu 1           │
├────────────────────┤
│ Contenu 2           │
├────────────────────┤
│ Contenu 3           │
└────────────────────┘

Le contenu reste ainsi utilisable même sur un écran plus étroit.

Que fait Kopage automatiquement ? #

Le constructeur de sites Web classique de Kopage est conçu pour des sites Web adaptatifs (responsives). De nombreux mises en page et blocs de contenu peuvent ainsi s'adapter automatiquement à différentes tailles d'écran.

Cela ne signifie cependant pas que tu ne dois plus contrôler le résultat.

L'adaptation technique d'une mise en page peut fonctionner, tandis que, par exemple, un titre très long, une image inappropriée ou un widget externe entraînent malgré tout un mauvais affichage sur mobile.

Important : „ Responsive “ ne signifie pas automatiquement „ parfait sur tous les appareils “. L'adaptation automatique constitue la base technique, tandis que le contrôle qualité reste la responsabilité du propriétaire du site Web.

Ne pas juger un site web uniquement dans l'éditeur #

Pendant que tu édites un site web, tu te concentres rapidement sur l'affichage dans l'éditeur.

Cependant, ce qui compte, c'est à quoi ressemble le site Web publié pour un visiteur réel.

Contrôlez par conséquent les modifications importantes également en dehors de l'éditeur sur le site web accessible au public.

Vérifier l'ordinateur de bureau, la tablette et le smartphone #

Pour un contrôle de base, tu devrais prendre en compte au moins trois zones d'affichage :

Ordinateur de bureau / Ordinateur portable
Tablette
Smartphone

Il ne s'agit pas de tester individuellement chaque modèle d'appareil existant.

Il est bien plus important de vérifier si le site Web se comporte de manière judicieuse pour les différentes largeurs disponibles.

Utiliser un vrai smartphone #

Une fonction de préprévisualisation dans le constructeur de sites Web ou le navigateur est utile, mais elle ne remplace pas tous les tests sur un appareil réel.

Ouvrez donc également votre site web sur votre propre smartphone.

Tu reconnais ainsi, par exemple, des problèmes d'utilisation qui se voient moins dans un aperçu de bureau réduit.

Conseil pratique : Testez occasionnellement les pages importantes comme le ferait un nouveau visiteur : ouvrez le site web sur votre smartphone et essayez, sans connaissances en matière d'édition, de trouver une information, d'utiliser le menu ou de remplir un formulaire.

Contrôler la navigation sur le smartphone #

La navigation fait partie des éléments les plus importants d'un site web mobile.

Sur un ordinateur de bureau, il y a suffisamment d'espace pour afficher plusieurs éléments de menu côte à côte. Sur un smartphone, la largeur disponible est nettement moindre.

C'est pourquoi les sites Web adaptatifs utilisent souvent une navigation mobile plus compacte.

Vérifiez que le menu s'ouvre et se ferme facilement et que tous les éléments de menu importants sont accessibles.

Tester également les sous-menus #

Si votre site Web utilise des sous-pages et des sous-menus, vous ne devez pas tester uniquement le menu principal.

Vérifiez également si les niveaux de navigation subordonnés sont utilisables de manière compréhensible sur un écran tactile.

Nous expliquons comment gérer fondamentalement la structure des pages sous Gérer les pages, la navigation et les sous-menus dans Kopage.

Éviter les éléments de menu trop longs #

Les noms de page très longs peuvent paraître encombrés, en particulier sur les petits écrans.

Un élément de menu doit être aussi court que possible tout en décrivant clairement où il mène.

Au lieu d'une longue formulation telle que :

Ici, vous apprendrez tout sur les services que nous proposons

est par exemple :

Services

beaucoup plus approprié comme navigation.

Vérifier les titres sur les petits écrans #

Les grands titres qui tiennent facilement sur une seule ligne sur un bureau peuvent en nécessiter plusieurs sur un smartphone.

C'est fondamentalement normal.

Cela devient problématique lorsque des mots individuels dépassent de l'écran, que le titre prend une place disproportionnée ou qu'il recouvre d'autres contenus.

Vérifie par conséquent particulièrement les grands titres principaux et les sous-titres plus longs.

Les textes doivent pouvoir être lus sans zoom. #

Les visiteurs doivent pouvoir lire les textes normaux d'un site web sur un smartphone sans avoir à zoomer manuellement sur la page.

De très petites tailles de police rendent l'utilisation difficile, tout comme des lignes de texte extrêmement longues sur de grands écrans.

Une bonne présentation responsive prend donc en compte non seulement la largeur de la mise en page, mais aussi la lisibilité du contenu.

Ne pas faire de paragraphes inutilement longs sur mobile #

Un paragraphe qui paraît relativement compact sur un grand écran peut sembler très long sur un smartphone.

Structurez par conséquent les contenus volumineux avec des paragraphes pertinents et des intertitres.

Cela améliore l'orientation sur les petits écrans et aide également les visiteurs sur ordinateur.

Contrôler les blocs de contenu #

Les blocs de contenu peuvent afficher plusieurs contenus côte à côte sur les écrans plus grands et les réorganiser sur les appareils plus petits.

Vérifiez donc après l'insertion ou la modification d'un bloc si l'ordre des contenus reste pertinent sur le smartphone.

En particulier dans le cas de combinaisons d'images et de textes, il doit rester clair, après la réorganisation mobile, quelle image correspond à quel texte.

Nous expliquons le travail avec les blocs de contenu sur Créer du contenu avec Kopage : modifier les blocs de contenu, les textes et les images.

Contrôler les images de manière responsive #

Les images sont une cause fréquente de problèmes sur les petits écrans.

Vérifiez si les images restent dans la zone disponible et si le contenu important de l'image reste visible même après un éventuel ajustement ou recadrage.

Une image très large peut paraître complètement différente sur un smartphone que sur un ordinateur de bureau.

Choisir le format d'image adapté à l'utilisation #

Une image panoramique extrêmement large peut très bien fonctionner comme grand espace de bureau, tandis que le sujet principal devient à peine reconnaissable sur un smartphone étroit.

Tenez donc déjà compte du lieu et du mode d'utilisation de l'image lors de sa sélection.

Vous trouverez de plus amples informations sur Créer des images, des galeries photo et des diaporamas dans Kopage.

Tester des galères sur le smartphone #

Si vous utilisez une galerie de photos, vous devez vérifier combien d'images s'affichent simultanément sur un petit écran et comment les images individuelles s'ouvrent ou se consultent.

Une galerie doit également pouvoir être manipulée confortablement via un écran tactile.

Ne pas tester le slider uniquement sur ordinateur #

Les curseurs peuvent également avoir un rendu différent sur les écrans plus petits.

Vérifiez en particulier si les images sont affichées de manière judicieuse et si les éventuels textes ou éléments de commande restent lisibles et accessibles.

Si un curseur sur le smartphone gêne plus qu'il n'aide, vous devez vérifier si le contenu utilisé ou sa structure peuvent être adaptés.

Les boutons doivent être faciles à utiliser #

Les boutons et autres éléments cliquables sont manipulés avec le doigt sur les smartphones.

Ils ne doivent donc pas être inutilement petits ou si rapprochés que l'on touche accidentellement le mauvais élément.

Vérifiez également l'étiquette.

Un texte de bouton très long peut se diviser de manière peu esthétique sur un écran étroit.

Liens dans le texte #

Même les liens textuels normaux doivent être faciles à sélectionner sur un écran tactile.

Lorsque de nombreux liens différents se trouvent directement côte à côte, leur utilisation peut devenir plus difficile sur les petits appareils.

Insérez donc des liens là où ils ont un sens sur le plan du contenu et évitez les accumulations inutiles de liens.

Tester les formulaires mobiles avec un soin tout particulier #

Les formulaires de contact sont particulièrement importants sur les smartphones, car de nombreux visiteurs prennent contact directement via un appareil mobile.

Testez un formulaire de manière approfondie et ne vous contentez pas d'en contrôler l'apparence visuelle.

Vérifiez par exemple :

Tous les libellés de champs sont-ils lisibles ?
Les champs de saisie sont-ils assez larges ?
Chaque champ peut-il être sélectionné ?
Les options de sélection sont-elles utilisables ?
Le bouton d'envoi est-il visible ?
Le formulaire peut-il être entièrement soumis ?
La confirmation attendue apparaît-elle ?

Nous traitons de la configuration des formulaires sous Créer des formulaires et des formulaires de contact avec Kopage.

Coordonnées sur le smartphone #

Les numéros de téléphone, les adresses e-mail et les adresses postales doivent également être entièrement lisibles sur les petits écrans.

Des adresses e-mail particulièrement longues ou d'autres chaînes de caractères peuvent dépasser d'une zone en cas de conception défavorable.

Vérifiez par conséquent même les pages de contact prétendument simples sur un smartphone.

Google Maps sur les appareils mobiles #

Une carte intégrée peut occuper beaucoup d'espace sur un ordinateur de bureau, tandis que sur un smartphone, seule une largeur limitée est disponible.

Vérifiez si la carte s'affiche correctement et si le reste de la page peut toujours être utilisé sans problème.

Nous traitons Google Maps et d'autres contenus externes sous Intégrer Google Maps, YouTube et les réseaux sociaux dans Kopage.

Contrôler les vidéos YouTube #

Les vidéos intégrées doivent s'adapter à la largeur disponible.

Vérifiez que la vidéo est entièrement visible sur le smartphone et ne dépasse pas de la zone de contenu.

Testez également si la lecture peut être démarrée comme prévu.

Les widgets externes sont une source fréquente de problèmes #

Kopage peut être conçu de manière responsive, tandis qu'un service externe intégré utilise une largeur fixe ou ses propres règles d'affichage.

Cela peut se produire par exemple avec des systèmes de réservation, des formulaires externes, des fonctions de chat ou d'autres widgets.

Teste de telles intégrations par conséquent avec une attention toute particulière sur plusieurs tailles d'écran.

Vérifier son propre code HTML, CSS et JavaScript #

Le code inséré individuellement ne devient pas automatiquement responsif du fait qu'il est utilisé au sein d'un site Web Kopage.

Des largeurs particulièrement fixes, des positionnements fixes et des éléments externes peuvent causer des problèmes sur les petits écrans.

Si vous utilisez du code personnalisé, vous devez également vérifier chaque modification sur mobile.

Vous trouverez de plus amples informations sur Utiliser son propre code HTML, CSS et JavaScript dans Kopage.

Attention : Si un seul élément dépasse latéralement du site web sur un smartphone, vérifiez en particulier les contenus intégrés individuellement et le code personnalisé. La cause ne réside pas nécessairement dans la mise en page générale de la page.

Qu'est-ce que le défilement horizontal ? #

Sur un site web mobile normal, le contenu principal doit fondamentalement être affiché dans la largeur d'écran disponible.

Si le visiteur doit faire défiler toute la page horizontalement pour pouvoir voir le contenu, un élément dépasse souvent de la largeur prévue.

Les causes possibles sont par exemple :

élément intégré trop large
spécification de largeur fixe
chaîne de caractères très longue sans retour à la ligne
HTML ou CSS personnalisé
widget externe

Les tableaux peuvent être difficiles sur les smartphones #

Il est difficile d'afficher des tableaux larges avec de nombreuses colonnes sur de petits écrans.

Si vous souhaitez présenter des informations détaillées sous forme de tableau, vous devez donc vérifier si le tableau reste réellement compréhensible sur mobile.

Dans certains cas, une structure de contenu différente peut être plus facile à lire pour les visiteurs mobiles.

Tester les téléchargements sur le smartphone #

Si vous proposez des fichiers PDF ou d'autres documents, vous devez également contrôler leur utilisation sur les appareils mobiles.

Le lien de téléchargement lui-même doit être facile à utiliser et le document doit être utile pour les visiteurs.

Vous trouverez de plus amples informations sur Gérer les fichiers et proposer des téléchargements sur le site Web.

Tester entièrement la boutique en ligne sur mobile #

Dans une boutique en ligne, il ne suffit pas de consulter la page produit sur un smartphone.

Testez l'ensemble du processus d'achat.

Sélectionner le produit
        ↓
Vérifier les détails du produit
        ↓
Ouvrir le panier
        ↓
Contrôler la quantité et le prix
        ↓
Saisir les informations de commande
        ↓
Sélectionner les options disponibles
        ↓
Finaliser le processus de commande

Nous expliquons comment configurer fondamentalement la boutique Kopage sur Créer une boutique en ligne avec Kopage et gérer les produits.

Tester des sites multilingues sur mobile #

Les traductions peuvent être considérablement plus longues ou plus courtes que le texte original.

Cela peut faire qu'une page dans une langue ait un aspect parfait sur le smartphone et pose des problèmes dans une autre langue.

Vérifiez par conséquent chaque version linguistique importante séparément.

La navigation, le choix de la langue, les boutons et les titres sont particulièrement pertinents.

Nous traitons le multilinguisme sous Créer un site web multilingue avec Kopage.

Vérifier les en-têtes sur le smartphone #

L'en-tête contient souvent un logo, la navigation et d'autres éléments importants.

Vérifiez que le logo apparaît dans une taille raisonnable et que la navigation reste facilement accessible.

Un logo très grand ne devrait pas occuper une part disproportionnée de l'écran du smartphone.

Ne pas oublier le pied de page #

Le pied de page est facilement ignoré lors du contrôle mobile, car il n'apparaît qu'à la fin d'une page.

Vérifiez également les textes, les liens, les informations de contact et, le cas échéant, d'autres éléments.

En particulier, plusieurs zones de pied de page disposées côte à côte peuvent s'afficher les unes en dessous des autres sur un smartphone. Vérifiez si l'ordre ainsi obtenu reste logique.

Le design et le responsive design vont de pair. #

Les couleurs et les polices peuvent être affichées techniquement correctement et paraître néanmoins peu adaptées sur un smartphone.

Des polices très grandes, de faibles contrastes ou des mises en page complexes peuvent rendre l'utilisation mobile difficile.

Nous traitons des paramètres généraux de conception sous Personnaliser le modèle et le design Kopage : couleurs, polices, en-tête et pied de page.

Prendre en compte le portrait et le paysage #

Les smartphones et les tablettes peuvent être utilisés en mode portrait ou paysage.

Vous n'avez pas besoin de concevoir chaque page séparément pour chaque orientation possible. Cependant, pour les zones importantes ou complexes, un bref test dans les deux orientations peut mettre en évidence des problèmes.

Tester différents navigateurs #

Les navigateurs modernes affichent les technologies web standardisées de manière largement uniforme, des différences peuvent néanmoins apparaître.

Il peut donc être judicieux, pour les sites web importants ou après des modifications majeures, de vérifier la page dans plus d'un navigateur récent.

Cela est particulièrement utile pour les intégrations externes et le code personnalisé.

Utiliser l'aperçu du navigateur sur l'ordinateur #

Même sans plusieurs smartphones, tu peux d'abord contrôler l'affichage sur l'ordinateur.

De nombreux navigateurs modernes disposent d'outils de développement permettant de simuler différentes largeurs d'écran.

Cela est utile pour repérer rapidement les problèmes de mise en page évidents.

Remarque : Une taille d'écran simulée est un bon outil de test, mais elle ne remplace pas entièrement l'utilisation sur un véritable appareil tactile.

Design adaptatif et temps de chargement #

Un site mobile ne doit pas seulement être esthétique, il doit aussi se charger rapidement et efficacement.

Les utilisateurs de smartphones ne disposent pas toujours d'un réseau Wi-Fi rapide.

De grandes images, de nombreuses vidéos et de nombreux widgets externes peuvent ainsi se remarquer particulièrement sur mobile.

Utilisez les médias de manière consciente et optimisez les fichiers inutilement volumineux.

Affichage mobile et SEO #

Un site web mobile ergonomique est également pertinent pour la qualité et la visibilité d'un site web.

Les moteurs de recherche doivent être en mesure d'indexer techniquement le contenu sur les appareils mobiles, et les visiteurs doivent pouvoir utiliser le site sans obstacles inutiles.

Nous abordons les bases générales du SEO sous SEO avec Kopage : titres de pages, métadonnées, URL et optimisation pour les moteurs de recherche.

Pas besoin de site mobile séparé #

Dans une conception responsive, le même site web est fondamentalement adapté à différentes tailles d'écran.

Vous n'avez donc pas besoin de maintenir en plus une page pour smartphone entièrement séparée avec le même contenu pour chaque page de bureau.

Cela réduit la charge de maintenance et évite d'avoir à effectuer des modifications en parallèle sur deux sites web distincts.

Vérifier à nouveau sur mobile après des modifications de contenu #

Une page qui s'affiche bien sur mobile aujourd'hui peut à nouveau poser des problèmes après une modification ultérieure.

Par exemple, un nouveau titre plus long, une image différente ou un widget supplémentaire peuvent modifier l'affichage.

Vérifiez par conséquent à nouveau les pages principales, en particulier après des modifications importantes.

Prioriser les pages particulièrement importantes #

Sur un site web important, vous n'avez pas besoin de tester complètement toutes les sous-pages sur plusieurs appareils après chaque petite correction de texte.

Donnez la priorité aux pages et aux fonctionnalités qui sont particulièrement importantes pour les visiteurs.

Cela comprend souvent :

Page d'accueil
pages de services importantes
page de contact
formulaires
boutique et processus de commande
pages de destination centrales
navigation

Que faire si une seule zone s'affiche mal ? #

Si le reste du site Web fonctionne correctement sur mobile, vous devez d'abord examiner la zone concernée.

Vérifiez par exemple si une image exceptionnellement grande, un widget externe, du code HTML personnalisé ou du CSS individuel y est utilisé.

Ne modifiez pas immédiatement tout le design du site web si le problème concerne manifestement un seul élément.

Que faire si l'ensemble du site web pose des problèmes sur mobile ? #

Si de nombreux domaines sont concernés, tu dois vérifier si des modifications majeures ont été apportées au modèle, au design ou au code personnalisé.

N'supprimez pas du contenu au hasard, mais essayez d'abord de déterminer depuis quel changement le problème persiste.

Dans le cas d'un code inséré individuellement, il peut être judicieux d'annuler la dernière modification à titre de test.

Erreurs courantes dans l'affichage mobile #

Les problèmes fréquents sont des titres trop longs, des images surdimensionnées, une navigation difficile à utiliser, des boutons trop petits et des widgets externes à largeurs fixes.

Les longs tableaux, les formulaires non adaptés et le code inséré individuellement peuvent également poser des problèmes sur les smartphones.

Une erreur particulièrement fréquente consiste à créer un site Web exclusivement sur ordinateur et à ne l'ouvrir sur un smartphone pour la première fois qu'une fois qu'il est entièrement terminé.

Conseil pratique : Vérifie l'affichage mobile dès la phase de conception. Il est beaucoup plus facile de résoudre les problèmes si tu les remarques immédiatement après la modification concernée.

Contrôle qualité mobile avant publication #

Ouvrir la page d'accueil
        ↓
Tester la navigation
        ↓
Tester les sous-menus
        ↓
Vérifier les titres
        ↓
Lire les textes
        ↓
Vérifier les images et les curseurs
        ↓
Tester les boutons et les liens
        ↓
Remplir les formulaires
        ↓
Contrôler le contenu externe
        ↓
Vérifier le pied de page
        ↓
Ouvrir les sous-pages importantes
        ↓
Tester la boutique / les téléchargements
        ↓
Vérifier sur un deuxième appareil ou navigateur

Le Responsive Design est un contrôle qualité continu #

L'optimisation mobile n'est pas une tâche unique qui est terminée pour toujours après la création du site web.

De nouveaux contenus, images, modules, services externes et adaptations individuelles peuvent modifier l'affichage.

Un test mobile rapide devrait donc faire partie des contrôles normaux après des modifications majeures du site web.

Quelle est la suite ? #

Une fois que le contenu de votre site web a été structuré, conçu et testé sur différents appareils, vient le contrôle final avant ou après la publication.

Dabei solltest du nicht nur das Design, sondern auch Navigation, Links, Formulare und weitere wichtige Funktionen testen.

C'est pourquoi nous continuons avec Publier un site Web Kopage et résoudre les problèmes courants.

Résumé #

Der klassische Kopage Website Builder ist für responsive Websites ausgelegt und kann Inhalte an unterschiedliche Bildschirmgrößen anpassen.

Trotzdem solltest du deine Website auf Desktop, Tablet und insbesondere auf einem echten Smartphone kontrollieren.

Achte dabei auf Navigation, Überschriften, Texte, Bilder, Buttons, Formulare, externe Inhalte, Downloads und gegebenenfalls den vollständigen Bestellprozess deines Shops.

Besondere Aufmerksamkeit benötigen externe Widgets und eigener HTML-, CSS- oder JavaScript-Code, weil diese Elemente nicht automatisch optimal an die responsive Kopage-Darstellung angepasst sein müssen.

Kontrolliere die mobile Darstellung außerdem nach größeren Änderungen erneut.

Eine responsive Website ist nicht einfach eine verkleinerte Desktop-Seite. Inhalte, Navigation und Funktionen müssen auf jedem relevanten Bildschirm verständlich, lesbar und bedienbar bleiben.