Conception mobile et réactive

Modèles de sites web mobiles adaptatifs

Les modèles responsifs sont très répandus dans le secteur du webdesign, car tous les CMS ne proposent pas de modèle mobile dédié. Un modèle responsif est conçu spécifiquement pour s'adapter à la largeur de l'écran. Il peut être difficile pour les utilisateurs de modifier eux-mêmes ces modèles, car chaque élément doit être personnalisé.

Par exemple, les menus peuvent être condensés ou déplacés hors page, puis réintégrés au fur et à mesure des besoins. Les sites web adaptatifs sont généralement plus lents à charger sur les appareils mobiles, car ces derniers doivent télécharger tous les styles et thèmes utilisés dans la version de bureau, même s'ils ne sont pas présents sur mobile. Certains concepteurs web privilégient la création de modèles esthétiques, mais négligent ces problèmes de vitesse de chargement.

Si votre site web est destiné aux touristes, vos clients peuvent se trouver en dehors des zones de couverture mobile et rencontrer des difficultés pour télécharger les bibliothèques JavaScript et CSS supplémentaires non nécessaires à une expérience mobile optimale. Les modèles responsifs sont souvent lents à télécharger, mais nous avons travaillé sans relâche pour optimiser la vitesse de nos nouveaux modèles. Ces derniers s'affichent environ trois fois plus vite que la moyenne des thèmes WordPress. Nos sites web responsifs sont entièrement personnalisables : couleurs, polices et images sont au rendez-vous.

Modèles de sites web mobiles dédiés

Un modèle de site web mobile dédié est la méthode traditionnelle que nous utilisons pour assurer la rétrocompatibilité de tous nos sites web de bureau et offrir ainsi à vos clients une expérience mobile optimale. Ce modèle mobile reprend le même plan de navigation et le même contenu que votre site web de bureau. Cependant, nous avons supprimé tous les éléments superflus afin que vos clients puissent accéder rapidement aux informations qu'ils recherchent. Par exemple, ils peuvent consulter vos coordonnées, afficher un lien vers une carte ou encore découvrir vos produits et effectuer un achat facilement, même sur un petit écran. Au fil du temps, nous avons ajouté des bannières, des logos et harmonisé automatiquement les couleurs avec celles de votre modèle de bureau. Grâce à une personnalisation poussée de votre modèle mobile dédié, vos clients bénéficieront d'une expérience exceptionnelle. l'option la plus rapide pour les clients utilisant des connexions mobiles rurales lentes.

Sites Web mobiles complètement distincts

Concevoir un site web entièrement optimisé pour les mobiles peut offrir une excellente expérience utilisateur au départ, mais bien souvent, le webmaster oublie (ou ne peut pas) l'entretenir, et les informations deviennent incohérentes entre les deux versions du site. Si vous gérez un site de vente en ligne, il est essentiel que vos versions mobile et ordinateur utilisent le même moteur de panier d'achat. Nous déconseillons cette approche à nos clients.

Comment convertir votre site web existant en un modèle adaptatif

Nous proposons de nombreux modèles responsifs différents. De nouveaux modèles sont régulièrement ajoutés. Lorsque vous choisissez un modèle responsif, la mise en page de votre site web (ordinateur et mobile) sera automatiquement mise à jour.

1. Dans le CMS, accédez à l'onglet DESIGN
2. Sélectionnez CHANGER DE THÈME
3. Parcourez tous les thèmes et repérez le bouton RESPONSIVE ou MOBILE. Ce bouton vous permet de prévisualiser le thème dans les deux modes. Seuls les thèmes avec le bouton RESPONSIVE sont des modèles adaptatifs.
4. Choisissez un thème pour continuer.
5. Décochez les cases permettant de modifier la bannière, le logo, l'arrière-plan et les couleurs si vous souhaitez conserver les éléments de votre marque existants.
6. Cochez la case pour sauvegarder vos anciens paramètres de conception, au cas où quelque chose tournerait mal.
7. Enregistrer le changement de thème.
8. Il arrive parfois que l'aperçu de votre site web après un changement de thème ne soit pas correct, en raison des paramètres de cache du navigateur. Dans ce cas, il peut être nécessaire de publier votre site et de vider le cache pour qu'il s'affiche correctement.
9. Il peut parfois être nécessaire de réappliquer vos paramètres de couleur pour les menus, etc., car certains modèles fournissent des couleurs par défaut et d'autres non, ou bien vos combinaisons de couleurs ne sont peut-être pas immédiatement compatibles avec le modèle et peuvent nécessiter quelques ajustements.

Comment choisir un nouveau modèle mobile dédié

Nous proposons 8 modèles mobiles dédiés différents, mais chacun utilisera les couleurs et la police de votre thème de bureau.

1. Dans le CMS, accédez à l'onglet DESIGN
2. Sélectionnez MODÈLES MOBILES
3. Cliquez sur SÉLECTIONNER UN NOUVEAU THÈME MOBILE
4. Parcourez tous les thèmes et repérez le bouton RESPONSIVE ou MOBILE. Ce bouton vous permet de prévisualiser le thème dans les deux modes. Seuls les thèmes avec le bouton RESPONSIVE sont des modèles adaptatifs.
5. Choisissez un thème pour continuer.
6. Décochez les cases permettant de modifier la bannière, le logo, l'arrière-plan et les couleurs si vous souhaitez conserver les éléments de votre marque existants.
7. Cochez la case pour sauvegarder vos anciens paramètres de conception, au cas où quelque chose tournerait mal.
8. Enregistrer le changement de thème.
9. Il arrive parfois que l'aperçu de votre site web après un changement de thème ne soit pas correct, en raison des paramètres de cache du navigateur. Dans ce cas, il peut être nécessaire de publier votre site et de vider le cache pour qu'il s'affiche correctement.
10. Il peut parfois être nécessaire de réappliquer vos paramètres de couleur pour les menus, etc., car certains modèles fournissent des couleurs par défaut et d'autres non, ou bien vos combinaisons de couleurs ne sont peut-être pas immédiatement compatibles avec le modèle et peuvent nécessiter quelques ajustements.

Optimisation de votre CSS pour une adaptation mobile

Si vous avez un esprit technique, vous pourriez avoir envie de modifier votre modèle existant pour le rendre compatible avec le CSS.

Recherchez dans votre feuille de style les lignes dont les dimensions les plus importantes sont de 600px, 750px ou 900px :

#container { largeur: 750px; marge: 0 auto; }

Et modifiez-les pour qu'ils soient comme ceci, de manière à remplir 90 % de la largeur de l'écran jusqu'à un maximum de 960.

#container { width: 90%; max-width: 960px; margin: 0 auto; }

Ensuite, recherchez les colonnes et modifiez leurs largeurs ou marges, en passant de largeurs fixes à des largeurs en pourcentage. N'appliquez ces modifications que si la largeur de l'écran le permet. Si la largeur de l'écran est inférieure à 600 px, les colonnes s'empileront sur toute la largeur du navigateur.

@media (min-width: 600px) { .leftColumn { width: 20%; float: left; }