Retour à la page principale | A propos du site

La compatibilité mobile

De par le nombre croissant d'internautes utilisant des appareils mobiles tels les smartphones ou les tablettes pour surfer sur le net, il devient nécessaire d'adapter les sites, blogs et forums à la technologie mobile afin qu'ils s'affichent correctement sur ces appareils.

Quels sont les avantages d'avoir un site compatible avec les mobiles

Tout d'abord, les internautes qui surfent sur le web à l'aide d'appareils mobiles auront plus de facilité à visiter votre site, ensuite Google a annoncé qu'à partir du 21 Avril 2015, la compatibilité mobile deviendra un critèrequi influencera sur le positionnement des sites, blogs et forums dans les résultats de recherche.

En gros, si à partir de cette date, votre site n'est pas devenu "mobile friendly", il sera assez mal positionné dans les résultats de recherchepour tous les internautes qui font ue recherche sur Google à partir d'un appareil mobile.

Par contre, un site non compatible avec la technologie mobile ne sera pas pénalisé par Google en cas derecherches faites à partir d'un ordinateur ou d'un pc portable.
Seules les recherches faites à partir de mobiles seront impactées.

Quelles sont les critères de la compatibilité mobile

Plusieurs critères sont à prendre en compte afin qu'un site s'affiche correctement sur un appareil mobile :

- Le texte doit être assez gros afin de pouvoir être lisible sur les appareils mobiles,

- Les pages web et les éléments qui la composent doivent être redimensionables afin de s'adapter aux résolutions mobiles.

- Les liens ne doivent pas être trop rapprochés les uns des autres pour que les utilisateurs de mobiles puissent les sélectionner facilement.

- Le temps de chargement des pages doit être assez court.

Comment savoir si est site est "mobile friendly"

En ce qui concerne les systèmes de blogs et autres forums gratuits ou payants, ils ont pour la plupart déjà été mis à jour par leurs concepteurs pour être compatible avec une utilisation mobile.

Quant-aux sites internet, vous pouvez vérifier si votre site est compatible avec une utilisation mobile en utilisant le test de compatiblité mobile mise à disposition par Google que vous trouverez ici.

Comment rendre son site compatible avec les mobiles

Il y a différentes méthodes pour rendre un site web compatible avec les mobiles, mais la méthodes la plus simple (pour moi) est de créer une zone mobile dans un fichier CSS, comme la zone ci-dessous que j'utilise pour ce site et que vous pouvez trouver ci-dessous :

@media screen and (max-width: 1280px) and (orientation: landscape) {
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

body {
width: auto;
margin: 0;
padding: 0;
min-width: 10%;
max-width: 100%;
height: auto;
}

/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {
min-width: 10%;
max-width: 100%;
height: auto;
}

/* gestion des mots longs */

textarea,
table,
td,
th,
code,
pre,
samp {
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word; /* passage à la ligne forcé */
min-width: 10%;
max-width: 100%;
height: auto;
}

code,
pre,
samp {
white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}

/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

element1,
element2 {
float: none;
width: auto;
}

/* masquer les éléments superflus */

.hide_mobile {
display: none !important;
}

/* Un message personnalisé */

body:before {
content: "Version mobile du site";
display: block;
text-align: center;
font-style: italic;
color: #777;
}
}

Si vous copiez / collez ce code dans le fichier CSS de votre site, l'affichage s'adaptera à la taille de la fenêtre d'affichage ou à la résolution d'affichage de l'appareil que vous utilisez à condition que vous colliez le code ci-dessous dans la balise "head" de chacune des pages du site que vous souhaitez rendre "mobile-friendly" :

Cette méthode est plutôt pratique, en tout cas avec les sites statiques car elle demande juste d'ajouter une zone "mobile" dans votre fichier css existant et de modifier le lien vers le fichier css dans chacune des pages html qui composent votre site.