Qu'est-ce que le responsive design web

Ce principe a été créé à partir d'une observation : les utilisateurs d'Internet se connectent de plus en plus à partir de supports différents autre qu'un ordinateur comme un smartphone, une tablette .... La navigation sur un de ces supports est totalement différente. Par exemple, zoomer sur un site pour allez cliquer sur un petit lien est vite agaçant. C'est pourquoi, les propriétaires de sites Internet ont décidé d'adapter leur site au support sur lequel on l'affiche.

Dans le cas d'un ordinateur : le menu est dans une configuration classique.

Dans le cas d'un mobile : le menu est déroulant, il faut cliquer dessus pour l'ouvrir.

Le Responsive Design sur un site aiw

Devant le développement de cette pratique, all-in-web a choisi de passer le pas. C'est pourquoi, nous développons maintenant des sites en Responsive Design. Mais ce développement implique de respecter quelques règles lors d'ajout d'éléments au site.

Dans l'éditeur, il faut dorénavant faire quelques manipulations avant d'écrire votre contenu :

1. Vous devez insérer un modèle qui correspond à ce que vous voulez produire. Par exemple, si vous souhaitez avoir une page avec deux colonnes, insérez un modèle à deux colonnes grâce à l'onglet prévu à cet effet.
   
   Voici un exemple de page aiw en responsive :
   
   Dans l'éditeur, notez que les fond gris sont présents uniquement dans le but de vous aider à visualiser les colonnes, ils n'apparaîtront jamais sur votre site : 
   
   
   
   Sur le site internet :
   
   - Taille maximum.
   
   
   - Taille grande : les colonnes passent l'une sur l'autre.
   
   
   - Taille moyenne : le modèle 3 colonnes change de configuration, la colonne la plus à droite est la première à descendre.
   
   - Taille minime : le modèle est entièrement à la verticale.
   
   
   Si votre site a été développé en responsive mais que vous n'avez pas ces modèles, contactez-nous !
    

2. Évitez les tableaux. Si vous souhaitez vraiment en mettre, il faut que sa largeur soit exprimée en %. Cependant, les tableaux ne fonctionnent pas comme les modèles. Si votre écran est petit, le tableau conservera son nombre de colonnes et de lignes mais le contenu risque d'être compressé.

3. Lorsque vous insérez des images, veillez à mettre la largeur à 100% et à supprimer la valeur de la case hauteur comme ci-dessous :
   
   

Les images s'adaptent à la taille de leur colonne.

Grande taille :


Petite taille :


Il est important de ne pas mettre d'images de petite taille. En effet, si la colonne qui contient l'image s'agrandit, l'image sera élargie.