Vous avez un site web et vous voudriez en avoir une version mobile ? Vous avez alors deux possibilités.

1 – Version compatible avec les mobiles :

La première solution qui s’offre à vous, la plus simple, est d’obtenir une version compatible de votre site. L’avantage est de n’avoir qu’une seule maquette design à valider. L’inconvénient est que le design est trop complexe pour un affichage sur un smartphone, du coup on est obligé de « cacher » des éléments de votre site pour le rendre consultable.

Par exemple,  on voit souvent des sites présenter du contenu dans une grande colonne au centre, et deux colonnes ou bandeaux verticaux plus étroits de chaque côté avec d’autres informations récurrentes (contact, news, etc.). Comme le contenu spécifique de la page est le plus important,  faute de place, on est contraint d’afficher seulement ce contenu central et de désactiver les colonnes latérales. C’est possible en jouant sur les feuilles de style de la page sans toucher à la version pour les navigateurs web. Nous pourrions très bien placer certains éléments de ces colonnes plus bas sur la page pour les mobiles, mais on peut avoir un résultat un peu étrange du point de vue de l’internaute, ou un site trop long en défilement vertical, ce qui pourrait perdre votre internaute.

Comme vous pouvez le voir, ce type de procédé est avant tout un compromis, et demande de faire des concessions..

2 – Version mobile de votre site :

L’autre solution, une version dédiée aux supports mobiles (smartphones et tablettes), demande plus de travail mais permet une véritable mise en valeur votre site. L’avantage est d’afficher de manière cohérente tous les éléments importants, et de pouvoir valider avec votre agence web une maquette spécifique.

Du coup, on peut même inverser la logique de construction de vos sites pour les mobiles et les ordinateurs. On crée une version light mais efficace pour les supports mobiles, au moins on est sûr de s’être concentré sur l’essentiel et d’avoir une ergonomie impeccable, et ensuite seulement on explore les possibilités sur une media plus grand comme le PC avec une autre maquette et un autre design. Fini les concessions ! Votre site aura d’abord été pensé en mobile. Cette méthode de plus en plus populaire auprès des web designers est appelée « Mobile First », et se développe peu à peu en France.

Le seul inconvénient de ce procédé, est qu’il faut faire attention à ne pas avoir un site mobile avec trop d’éléments, ce qui risque de noyer votre internaute dans beaucoup trop d’informations sur un petit écran. La solution est donc de se concentrer sur l’indispensable, mais une petite cure d’amaigrissement de votre communication ou de votre e-commerce est souvent salutaire pour synthétiser et dynamiser son discours !

Un peu de technique ?

Techniquement, ces deux méthodes utilisent ce qu’on appelle les « Media Queries ». En CSS (feuilles de styles qui donne l’aspect graphique de votre site), nous définissons des conditions pour un affichage mobile, tablette ou/et PC.

Si vous êtes intéressé par la méthode « Mobile First », n’hésitez pas à nous contacter :)

Et si vous voulez en savoir plus sur les Médias Queries et « Mobile First », restez connecté à Applibox pour mes prochains articles ;-)

Appliboxement,

Stéphane