Créer un site optimiser pour mobiles, smartphones et tablettes

F T ʅ

Comment proposer la meilleure expérience-utilisateur sur les smartphones, mobiles et tablettes lorsque l’on crée un site Internet ? Pour répondre à cette question, il faut commencer par comprendre quelles sont les différences entre ces appareils et en quoi cela impacte un site Internet. SiteW propose une solution facile et rapide pour créer et mettre à jour un site responsive sur les mobiles et tablettes.

En quoi consiste un site responsive ?

Un site responsive s’adapte à tout type d’écran et permet d’avoir pour chacun un affichage rendant la lecture aisée.

L’écran d’un mobile est souvent utilisé en mode vertical pour naviguer sur Internet et cela revient à afficher un site sur une largeur environ 3 fois plus étroite qu’un site destiné à un écran d’ordinateur.
Pour créer un site mobile, l’adaptation consiste donc à arranger le contenu du site pour qu’il soit moins large. Pour atteindre ce but, les textes doivent êtres disposés dans une colonne plus étroite et donc plus longue et les éléments placés côte à côte sont placés les uns sous les autres.
Mécaniquement, cela entraîne la création d’une page beaucoup plus longue. Pour remédier à cela, le contenu du site est souvent simplifié (moins d’illustrations et affichage des informations les plus importantes seulement).
Notez que contrairement à ce que l’on pourrait penser, il n’est pas nécessaire d’agrandir les textes sur Mobile, car le fait de réduire la largeur du site permet de zoomer sur le site et d’avoir automatiquement un affichage plus gros qu’une vue Ordinateur.

Le 21 Avril 2015, Google a modifié son algorithme afin de favoriser les pages adaptées aux mobiles dans les résultats de recherche mobiles. C'est une raison de plus pour optimiser votre site pour les appareils mobiles !

La solution SiteW  

Pour répondre à ce besoin, SiteW vous permet d’adapter votre site Ordinateur sans avoir besoin de recréer un nouveau site.
En plus de la vue Ordinateur actuelle, vous pouvez créer des vues différentes pour un mobile orienté verticalement, un mobile orienté horizontalement, ou une tablette orientée verticalement.
Les différents modules de votre site doivent simplement être redimensionnés pour pouvoir être contenus dans l'écran de l’appareil ciblé et repositionnés pour être placés les uns sous les autres. Il suffit donc d’utiliser les outils standards de déplacement et redimensionnement de module.

 Et pour vous faciliter cette tâche, en vue mobile, nous avons ajouté un tout nouvel outil qui redimensionne et déplace un module sélectionné pour être dans la zone visible de l’appareil.

Le contenu des modules et leur design sont synchronisés entre les différentes vues.
Pour simplifier votre site mobile, des modules peuvent être cachés sur cette vue, et des modules peuvent y être ajoutés (par exemple pour reformuler un long paragraphe pour le rendre plus court).
Le principe est donc très simple et totalement flexible.

Suivant l’appareil utilisé, la vue la plus adaptée est choisie et ajustée à la taille de l’écran éventuellement avec une légère marge (les modules sortant de l’écran dans l’outil de création de site seront visibles dans cette marge uniquement sur certains appareils).

Les sites mobiles créés sur SiteW sont conçus pour être mieux positionnés dans les résultats de recherche mobiles de Google.

Passer mon site en mode Mobile

1. Commencez par activer le mode Site optimisé sur la vue à créer. Dans cet exemple, nous choisissons la vue Mobile vertical. L'écran du mobile s’affiche alors en superposition de votre site.
   
2. Redimensionnez et déplacez les modules dans l'écran. L’outil ⥊ permet d’effectuer cela automatiquement sur un ou plusieurs modules sélectionnés.
3. Repositionnez les modules pour qu’ils s’affichent les uns sous les autres en utilisant les outils habituels pour déplacer, pousser/déplacer, redimensionner et pousser/redimensionner.
4. Cachez les modules inutiles pour simplifier le site.
   
   
5. Si besoin, ajoutez des modules qui seront uniquement visibles sur mobile.
6. Si besoin, modifiez certains modules, en les dupliquant, puis, en ajustant leur visibilité pour que celui d’origine ne soit affiché que sur ordinateur et que sa copie ne soit affichée que sur mobile.
7. Si besoin, modifiez la barre mobile. Uniquement affichée dans les modes Mobile horizontal ou vertical, cette barre d'icônes s’affiche sur le haut de l'écran et permet de proposer le menu du site et d’autres raccourcis tels que des liens d’appel téléphonique ou de contact, lien vers une page ou site, etc. Le menu de la barre mobile remplace tous les menus affichés sur votre site. Cliquez sur la barre mobile pour personnaliser les boutons affichés, et leur agencement (en utilisant le glisser/déplacer dans la configuration).

Il suffit ensuite de réaliser les opérations 1 à 6 pour chaque page de votre site et de le publier.

Mettre à jour mon site responsive

1. En modifiant le contenu d’un module existant sur la vue Ordinateur, celui-ci est également modifié sur tous les appareils affichant le module.
2. Si cela provoque une modification de la longueur du contenu, il suffit de repositionner ce module sur chaque vue. L’outil pousser/redimensionner est très utile pour cela.
3. En ajoutant un nouveau module sur votre site, celui-ci s’affiche uniquement sur la vue active. Vous pouvez modifier sa visibilité pour qu’il soit synchronisé sur tous les appareils (youpi ! ✌)

Vous voyez que le principe est ainsi très simple et rapide à mettre en oeuvre. C'est à vous de jouer maintenant !