Étapes simples pour rendre le site Web adapté aux mobiles (conception réactive) ?

J’ai enfin rendu mon site: steakovercooked.com convivial pour les mobiles et donc toutes les pages Web de mes 6 domaines jusqu’à présent sont qualifiées de conviviales pour les mobiles.

La convivialité mobile est désormais un facteur de classement, par exemple les moteurs de recherche Google ont tendance à promouvoir les sites qui réussissent le test de convivialité mobile.

adapté aux mobiles

Voici les étapes pour rendre l’utilisateur mobile convivial, également connu avec le Responsive CSS Design.

Nettoyer le CSS en ligne dans les balises HTML

Le CSS en ligne dans les balises HTML est mauvais, car ils mélangent la présentation et le HTML, par exemple,

Le style est défini directement dans la balise HTML div, qu’il n’est pas possible de modifier à l’aide de feuilles de style externes.

Ne pas utiliser de pixels de largeur spécifiés/fixes

Si vous définissez quelque chose comme par exemple width:900px, il est probable que ce ne soit pas adapté aux mobiles. Vous pouvez le remplacer par un pourcentage, par exemple 30 %. Les pixels plus petits sont moins susceptibles d’être un problème, par exemple les icônes conviennent aux petites résolutions d’écran. Imaginez, la plus petite largeur d’écran est de 300 pixels (environ), vous ne voulez donc pas qu’aucun de vos éléments HTML soit plus large que cela.

Mettez ce qui suit à l’intérieur de la balise head

Les images/tableaux sont les pires

Les tableaux sont les pires pour la conception réactive, vous devrez donc peut-être les remplacer par de simples éléments div. Les images doivent être spécifiées avec le style de largeur maximale suivant, par exemple

Ça y est, pas de trucs complexes! Veuillez noter qu’une page conviviale pour les utilisateurs mobiles n’est pas la même chose qu’AMP (Accelerated Mobile Pages).