Conception mobile et réactive

Responsive Mobile Website Templates

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é.

For example, menus might be condensed, or relocated off page, and pulled in when needed. Responsive websites tend to be slower to download on mobile devices, as the mobile device needs to download all the styles/themes that are used in the desktop version, even if not used in the mobile version. Some web designers focus on making great looking templates, but they forget about these download speed issues. 

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.

Dedicated Mobile Website Templates

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 for customers using slow rural mobile connections. 

Completely Separate Mobile Websites

Having a whole website crafted just for mobile might give a really good mobile experience at first, but more often than not, the webmaster forgets to maintain it (or cannot maintain it) , and the information become out of sync in each website. If you are running an online shopping site, you really need to have both your mobile experience and your desktop experience powered by the same shopping cart engine. We advise our customers not to use this approach. 

How to Convert Your Existing Website to A Responsive Template

We have lots of different responsive templates that you can choose from. We are updating more all the time. When you change to a responsive template, it will update both your desktop and mobile layouts. 

1. In the CMS, go to the DESIGN tab
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. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
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. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

How to Select A New Dedicated Mobile Template

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. In the CMS, go to the DESIGN tab
2. Select MOBILE TEMPLATES
3. click SELECT A NEW MOBILE THEME
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. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
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. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

Optimisation de votre CSS pour une adaptation mobile

If you are technically minded, you might like to just hack your existing template into CSS responsive mode. 

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

#container { width: 750px; margin: 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; }