Gerer le cas: “site non adaptée aux mobiles”
Aujourd’hui les smartphones sont beaucoup plus répéndus que les pc, et le fait que votre site soit dans cette catégorie (non adapté au mobile ou non-responsive), le nombre de visiteurs de votre site sera restreint et réduit et cela vous privera d’une source importante de trafic, il est donc primordiale de proposer une version mobile de votre site internet .
Pour tester votre site , rendez vous sur le lien gratuit de Google suivant et proposer votre site/
https://search.google.com/test/mobile-friendly
ou celui ci:
A savoir:
Le site responsive (ou «adaptatif») son format d’affichage s’adapte en fonction de la taille de l’appareil pc, tablette ou smartphone. Le contenu est respecté et seule l’affichage change.
Le site compatible mobile (oumobile friendly): celui qui propose la totalité ou une partie en page mobile.
WordPress: propose des thème responsive qui adapte votre site aux mobiles, une simple mise à jour de votre thème est peut-être suffisante.
Incorporez un design responsive dans le code de votre site web
Toutefois, si vous devez personnaliser le thème de votre site sur votre CMS, ou si vous créez votre propre thème, la maîtrise de certains des éléments d’un design responsive sera nécessaire.
Bien entendu, nous ne pourrons pas couvrir de manière exhaustive les bonnes pratiques du design responsive, mais voici quelques outils de base dont vous aurez besoin.
Vue d’ensemble
Le « viewport » designe la zone d’une page web qu’un utilisateur peut consulter. Avant la démocratisation du responsive, les pages web conçues pour l’écran relativement large d’un ordinateur étaient écrasées dans l’étroite « fenêtre » des écrans mobiles, entraînant une expérience médiocre pour l’utilisateur.
Finalement, le moyen de régler la fenêtre d’affichage en fonction de l’appareil a été introduit dans le HTML. Plus précisément, à l’aide de balises dans l’en-tête HTML.
Voici à quoi ressemble cette balise dans le HTML :
Images
Cependant, si une image dépasse de la fenêtre de visualisation (si elle est plus large que l’écran sur lequel elle est visualisée), les utilisateurs devront alors faire défiler l’image à gauche et à droite en plus de la faire défiler de haut en bas, ce qui n’est pas souhaitable.
Pour remédier à cela, vous pouvez styliser les images avec des propriétés de largeur différentes.
L’une d’entre elles est la largeur relative, où les images occupent un certain pourcentage de l’écran, ou de l’élément dans lequel elles se trouvent. Voilà à quoi cela ressemble :
Vous pouvez également définir une largeur maximale, ce qui signifie qu’une image ne sera jamais plus grande que la largeur maximale que vous avez définie, mais qu’elle sera réduite sur les écrans plus petits.
Voici ce qu’il en est :
Texte
Vous pouvez également redimensionner le texte en fonction de la taille de l’écran. Habituellement, la taille du texte est mesurée en « pt », mais vous pouvez également la mesurer en « vw » pour « viewport width ». Cela vous permet de définir la taille du texte en fonction de la taille de l’écran sur lequel il est affiché.
Requêtes médias
Les requêtes média sont une technique de responsive utilisée en langage CSS. Elles permettent de définir des « points d’arrêt », qui autorisent le style et la mise en page de votre site à être d’une certaine taille sur un écran et d’une taille différente un autre. Le « point d’arrêt » est la largeur à laquelle il change.
Vous pouvez concevoir votre site en fonction des appareils mobiles en langage CSS, et utiliser votre requête média pour définir une condition spéciale lorsque l’écran est d’une certaine largeur ou juste plus large pour un design de site responsive :
@media only screen and (min-width: 600px) {
…
}
ou l’inverse :
@media only screen and (max-width: 600px) {
…
}
Vous pouvez vous en servir comme d’une condition pour presque tout contrôler.
Dans tous les cas, proposer un site responsive en fonction de l’appareil utilisé est désormais absolument indispensable si vous souhaitez qu’il soit visité.
Bien que les options offertes par les thèmes des CMS et des éditeurs de sites web en matière de site responsive fassent le job, nous espérons que la lecture de cet article vous aura donné envie de vous plonger dans le code pour aller plus loin. Il n’y a pas de meilleure façon d’apprendre que de se lancer et d’essayer ! Lancez-vous, et mettez en place votre site responsive !
source: https://news.gandi.net/fr/2020/08/comment-rendre-son-site-responsive/