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…