Rendre un site Web à largeur fixe compatible avec les mobiles

Dernière mise à jour le 22 mai 2020

Construire Mobile Friendly. Il fut un temps où ma plus grande préoccupation en tant que graphiste et développeur web était de faire fonctionner ma fonction CSS dans Internet Explorer. Non seulement IE est toujours une douleur à l'arrière, mais nous devons maintenant nous soucier des nombreuses tailles d'écran et des systèmes d'exploitation.

Il y aura un moment où le mobile dépassera la navigation sur ordinateur. Depuis que le mobile est devenu si important dans notre vie quotidienne, il y a des moments où nous, concepteurs de sites Web, avons besoin de résultats immédiats. Si vous faites partie de ces concepteurs ou programmeurs qui n'ont tout simplement pas le temps de convertir un site Web statique en un thème WordPress, adapté aux mobiles, il y a de l'espoir pour vous mon ami. Lorsqu'il s'agit de visualiser tout votre contenu sur des appareils mobiles, vous pouvez y parvenir avec une petite optimisation CSS et HTML.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

À l'échelle mondiale, les appareils mobiles représentent plus de la moitié des minutes passées en ligne, selon comScore

Les sites Web adaptés aux mobiles ou réactifs ont la possibilité de configurer automatiquement la largeur de votre site Web, pour s'adapter à l'appareil du spectateur. Les barres de défilement horizontales sont un non-non dans la conception réactive. Si vous consultez votre site Web actuel sur un appareil mobile et que vous voyez une barre de défilement en bas de votre téléphone ou de votre tablette, il est probable que votre site Web (ou des éléments de votre site) ne soit pas adapté aux mobiles. Ces barres de défilement horizontales ruinent l'expérience de l'utilisateur et cliqueront très probablement sur le bouton de retour. Les gens sont tellement habitués à faire défiler verticalement sur leurs appareils, de sorte que lorsque les utilisateurs doivent faire défiler verticalement et horizontalement pour afficher le contenu, ils deviennent mal à l'aise et quittent le site.

C'est tout compris à partir de maintenant, les sites Web de conception ont des classes CSS et des identifiants pour tout, et je veux dire tout.

De l'en-tête et des div du menu aux balises <p> dans le pied de page. Vous voudrez ajuster la taille de toutes ces choses en fonction de la largeur de l'écran. Le déplacement, le dimensionnement et la mise à l'échelle sont beaucoup plus faciles lorsque l'élément peut être ciblé via CSS.

Les CSS Media Queries sont plus faciles à utiliser que vous ne le pensez.

La première fois que des requêtes multimédias ont été portées à mon attention, je pensais que cela faisait partie d'un langage de programmation et non d'une forme de CSS. J'ai été submergé par un sentiment de soulagement lorsque j'ai découvert ce que c'était vraiment, et je l'utilise depuis lors sur TOUS mes projets Web.

Les Media Queries sont essentiellement des règles CSS. Si votre écran a cette largeur, appliquez ce CSS uniquement à ces éléments. Jetez un oeil ci-dessous.

Ainsi, le code ci-dessus indique simplement que si l'écran de l'utilisateur mesure entre 100 pixels et 699 pixels de large, changez la couleur d'arrière-plan du corps en bleu. C'est là que l'étiquetage de chaque div et span de votre site devient crucial. La manipulation de ces éléments pour différentes largeurs d'écran devient plus facile avec un balisage approprié.

Css-tricks.com répertorie de nombreuses largeurs mobiles pour nous comme référence rapide.

Exemple de code CSS

/* ---- HTC One ---- */
/* Portrait et Paysage */

@écran multimédia

et (largeur de l'appareil : 360 px)

et (hauteur de l'appareil : 640 px)

et (-webkit-device-pixel-ratio : 3) {

/*****VOTRE CODE ICI*****/

}

Il existe beaucoup plus de code de requête multimédia pour les téléphones Galaxy, HTC et Apple. De plus, les largeurs pour les largeurs de tablette Ipad, Galaxy et Nexus sont répertoriées. Tout ce que vous avez à faire est de saisir ce code dans le fichier CSS de votre site et de remplir les parenthèses CSS vides avec votre propre code ! Fait!

Votre site est réactif, mais il ne semble toujours pas tout à fait correct

Vous commencerez peut-être à remarquer que certains éléments de votre site occupent un peu d'espace sur les appareils mobiles, comme votre menu principal. En le rendant responsive, vous avez très probablement appliqué un « float : none » sur les balises <li> de votre menu. Mais maintenant, le menu occupe une grande partie de l'immobilier en haut de votre site. Vous devrez convertir votre menu principal en menu déroulant avec jQuery et CSS media queries. Css-tricks.com explique également comment procéder.

Vous pouvez également considérer certains éléments comme insignifiants, ceux qui peuvent être trouvés à la fois sur les ordinateurs de bureau et les appareils mobiles. . Vous pouvez vous en débarrasser en utilisant CSS :

Ces ajustements de site ont tendance à rendre les sites Web très longs et obligent les utilisateurs à faire défiler beaucoup. C'est là que le texte d'ancrage (pour les utilisateurs voyants) ou les liens de saut (pour les lecteurs d'écran) deviennent vos amis.

Le texte d'ancrage est un lien cliquable qui permet aux utilisateurs d'accéder à une certaine section de votre page Web, sans avoir à faire défiler. C'est une méthode pratique pour les sites adaptés aux mobiles. Le code ci-dessous est un exemple de lien de texte d'ancre.

<a href="#skip">Cliquez ici pour passer au contenu principal</a>

<a id=”skip”></a>Le contenu principal commence ici

Les liens de saut sont principalement utilisés pour les lecteurs d'écran et permettent aux utilisateurs handicapés de contourner ou d'ignorer le contenu Web répétitif, comme la navigation dans les menus, et d'accéder directement aux informations qui les intéressent.

Si les liens de saut ont une règle CSS de "display: none", les lecteurs d'écran le lien devient "inaccessible". Ainsi, une solution consiste à positionner les liens hors de l'écran, de sorte que les lecteurs d'écran puissent toujours reconnaître vos liens et leur permettre de parcourir votre nouveau site mobile.

C'est donc le moyen rapide et facile de convertir votre site Web à largeur fixe en un site Web adapté aux mobiles. Aussi, n'oubliez pas de régler toutes vos images sur « largeur : 100 % ; hauteur : automatique. » Toutes les images, div ou étendues qui ont une largeur définie en pixels, seront créées dans la barre de défilement horizontale sur les appareils mobiles, alors n'oubliez pas de les définir sur des pourcentages ou des largeurs différentes pour les différents appareils utilisant des requêtes multimédias.

Cela peut prendre un peu de temps, mais croyez-moi, une fois que vous l'aurez appris, vous l'utiliserez pour toujours. Vous utiliserez cette méthode sur tous les sites Web que vous ferez, car même les thèmes et modèles réactifs WordPress ou Joomla les plus récents nécessitent un peu de perfectionnement pour leur donner l'apparence que vous souhaitez. Cela est particulièrement vrai, avec le marché en constante évolution des appareils mobiles.

-Izzak Hale, graphiste principal