On ne sait pas trop ce qui va nous tomber sur le coin du site et des serps dans 2 semaines, mais plutôt que d’attendre passivement, j’ai repris quelques uns de mes sites pour qu’il passe le nouveau graal à barre verte : le test de compatibilité mobile de google ( je vous laisse chercher, je vais quand même pas leur filer un lien 🙂 )
Certaines activités ne se prêtent vraiment pas à un surf/lecture sur téléphone, on cible le desktop voire la tablette mais surement pas le mini-riquiqui viewport du téléphone. De plus, j’avais certains sites ( ou des clients ) avec encore des mises en page très 199x avec de jolies tables ! Donc, pas de chichi, quand il n’y a pas de vrais objectifs mobiles, le seul but, c’est d’avoir une page qui s’affiche correctement, lisible, barre verte mobile friendly et on laisse de coté toute la déco ou la navigation inutile.
Quelques tips si vous n’êtes pas CSS3 addict.
Viewport
Le premier truc, est de bien coller la directive viewport dans votre header html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Cherchez pas, collez ça
width devient max-width
Remplacez vos width dans le css par un max-width pour les dimensions données en px, et ajouter width: 100% ou un équivalent qui corresponde à votre besoin.
.CCC { width: 100%; max-width: NNNpx; }
Cherchez pas, commencez par remplacer tous les width par max-width, vous affinerez ensuite.
Image
On fait l’inverse, on laisse width: NNpx mais on ajoute max-width: 100% pour éviter que l’image déborde du cadre. Bien sur on supprime la hauteur si elle est donnée, histoire de ne pas avoir des images toutes déformées.
img.CCC { max-width: 100%; }
il est possible qu’une directe et globale directive fasse l’affaire, alors tentez
img { max-width: 100%; }
Float
Et pour (presque) finir, remplacez vos td par des div après avoir supprimé les tags table/tr de vos tables. Pour avoir des alignements, on rends les blocs flottant ( float: left ) et on fixe une taille ( cf ci dessus )
div.CCC { width: 50%; float: left; }
Si ca déborde, se décale, devient tout bancal, insérez cette ligne pour revenir à la ligne
<div style="clear:both"><br></div>
display: none
Le tips express et ultime, la capitaine Flam du responsive, est de cacher tout ce qui ne marche pas ( j’ai déjà dis « pas de finesse » non ? )
@media(max-width: 767px){ .pasmobilefriendly { display: none } }
ci dessus, dès que l’on descend en dessous d’une largeur de 768 pixels, on cache tous les éléments de la classe concernée
Une fois la directive viewport en place et le bricolage à l’aide des 4 astuces ci dessus, vous devriez pouvoir obtenir votre petite barre de test de compatibilité mobile. Et pouvoir patienter sereinement jusqu’au 21 Avril pour voir ce qui se passe…
Super ça va aider certain de mes clients merci