Un site web adaptatif sur tout type d'écran d'un ordinateur de bureau à un smartphone
Publié le 19/08/2014 :
Le site web de présentation a subi une modification majeure au niveau de son aspect graphique. En plus de cette modification, une amélioration a été effectuée au niveau de son Responsive Web Design.
Qu’est-ce qu’un site Responsive Web Design ?
Site ayant un affichage qui s’adapte à tout type d’écran que cela soit d’un ordinateur de bureau, d‘un smartphone, d’une tablette ou d’un écran de téléviseur. On dit que le site est adaptatif à tout type d’écran. Sachant que le contenu d’un site web est de l’eau, le récipient quelconque, un écran. Cette citation ci-dessous illustre l’adaptabilité de la mise en page d’un site sur différents type d’écrans :
Mettez de l’eau dans une tasse, elle prend la forme d’une tasse.
Mettez de l’eau dans une bouteille, elle prend la forme d’une bouteille.
Mettez de l’eau dans théière, elle prend la forme d’une théière (Source Wikipédia “Content is like water“)
Description du site web de présentation adaptatif : marcandev.com
Avant cette modification, le site était déjà adaptatif. Optimisé au départ pour les écrans de résolution minimale de 1024, il a été amélioré pour que le site soit également adaptatif aux écrans avec largeur de résolution inférieure à 640 pixels. Seulement voilà, le site n’a pas été amélioré (jusqu’au 18 août 2014) pour les écrans de largeurs intermédiaires au niveau de leur résolution, c’est à dire entre 640 et 1024 pixels. Ainsi, un utilisateur muni d’un écran d’un appareil de largeur de résolution de 800 pixels, voyait sur son navigateur, une scroll bar en bas, ce qui n’est pas très pratique pour sa navigation.
Pour répondre à cette problématique, l’idée est d’effectuer des affichages des blocs de contenus en une seule colonne lorsque le site s’affiche sur un écran inférieur à 1024 pixels de large. Autrement dit les blocs de textes et d’images s’afficheraient les uns en dessous des autres pour former une colonne. Par exemple, si vous utilisez un navigateur avec une résolution de largeur supérieur à 1024 pixels, le bloc affichant le texte de présentation de la news de cette page que vous lisez actuellement, se trouve à gauche de la colonne grise présentant la liste des autres news.
Dans le cas d’un écran avec une résolution inférieure à 1024 pixels, le bloc gris contenant la liste des autres news s’affiche en dessous du bloc de texte du billet (détail de la news). En dessous de la largeur de 1024px, les blocs de textes non seulement sont alignés les uns en dessous des autres mais aussi ils prennent toute la largeur du navigateur. Dans le cas des navigateurs ayant pour largeur supérieur à 1024px, tous les blocs ont une largeur fixe c’est à dire : l’entête de la page du site, le menu horizontal, le corps de la page avec un contenu de présentation, la colonne de droite présentant la liste des autres news ainsi que les blocs du pied de page. Si la largeur du navigateur est inférieur à 1024px, tous les blocs cités se mettront les unes en dessous des autres et auront chacun une largeur qui s’étendra sur toute la largeur de votre navigateur. Une démonstration concernant le site Responsive Web Design est à votre disposition dans la rubrique du laboratoire virtuel.
Modifié le 20/08/2014
