Adaptation du site aux mobiles et tablettes

Thierry P. · 14 février 2017

Nous avons (enfin) adapté la partie "site" de magazinevideo (tout ce qui est hors Forum) aux mobiles et tablettes. Cette adaptation permettra aux 25% d’utilisateurs de mobiles et tablettes (en constante progression, surtout mobiles), d'obtenir un meilleur confort de navigation, quel que soit le terminal.

Cette adaptation devenait indispensable tant magazinevideo était totalement inadapté aux mobiles. Images et textes étaient si petits qu'il fallait zoomer / dézoomer, se déplacer vers la gauche, vers la droite, etc. Cliquer sur un lien, à cause d'une trop grande proximité, revenait parfois à cliquer sur le lien voisin, mais pas le bon. Voilà qui est révolu pour la majorité des liens.

Pour autant, l’adaptation d’un site aux mobiles et tablettes (technique dite du « responsive design ») est semée d’embûches car il faut :

adapter la structure existante (pas forcément malléable) créée à une époque où personne ne concevait un site en fonction des mobiles,
tenter de tenir compte des principaux terminaux disponibles sur le marché qui n'ont pas tous la même taille d'écran,
enfin, adapter certaines rubriques comportant des tableaux avec des colonnes. Un bel enfer. La lecture ne peut pas être aussi confortable que sur ordinateur de bureau, muni d'un écran large. Nous avons trouvé tout de même des compromis.

Bref, s'adapter aux mobiles, ce n'est pas une réponse univoque. Ce sont plusieurs adaptations.

On a fait "au mieux". On a encore quelques détails à régler.

Autre bonne nouvelle : certaines adaptations profitent à tous, utilisateurs sur mobile comme sur poste fixe. Par exemple, il existe désormais un ancrage des chapitres de tests, c’est à dire que lorsque vous cliquez en bas de page sur la « suite » d'un chapitre, le haut de votre écran se positionnera au niveau du titre du chapitre suivant. Avant, il fallait parfois jouer avec l’ascenseur, on pouvait "perdre le fil".

En tout cas merci à Jean-François, notre développeur, qui a dû tripatouiller un code informatique qu'il n'avait pas conçu à la base, ce qui a occasionné quelques belles prises de tête et deux ou trois jurons. :sweatingbullets: Heureusement, il aime relever des défis...

On espère que vous pourrez ainsi mieux naviguer, y compris en vacances, où le smartphone ou la tablette sont souvent les terminaux de prédilection. Ou depuis votre jardin quand les beaux jours arriveront... Voire depuis votre hamac ?

YANIK · 15 février 2017

Super, tres lisible même sur un petit smartphone et très agréable sur tablette.

J'ai juste noté un texte tronqué sur la gauche (sur une page - sur smartphone) et une petite difficulté à valider une "Lire la suite (ça vient peut être de mon viel iPhone 5c car ça ne s'est pas produit sur tablette) que personnellement, j'aurais mis en bleu.

Bonne journée.

Thierry P. · 15 février 2017

Oui même les petits écrans des smartphones sont effectivement adaptés. Le principe, déjà adopté sur la plupart des autres sites, est une lecture sur une seule colonne et s'il y a d'autres colonnes, elles passent au-dessous de la première, entièrement ou partiellement. On a encore à travailler là-dessus.

Texte tronqué : ça peut provenir d'un élément perturbant dans le texte. Une idée de l'endroit ?

La validation du "Lire la suite" normalement marche partout. Idem, une idée de l'endroit ?

YANIK · 16 février 2017

Bonjour,

C'est LIRE LA SUITE lui même qui semble inactif. Le texte descriptif (en minuscules) après les deux points l'est, lui. D'où peut être l'intérêt de le mettre en bleu.

Relevé dans le test de la Sony AX53.

Pour le texte tronqué : des que je rentre dans le menu.

YANIK · 16 février 2017

loupiod · 16 février 2017

bonjour,

excellentes évolutions aussi bien sur mon samsung S4 que sur ma tablette 7" Nexus...

je n'ai pas relevé d'images tronquées comme YANIK...

un vrai progrès :bien:

merci

Thierry P. · 16 février 2017

Il y a 1 heure , YANIK a dit:

C'est LIRE LA SUITE lui même qui semble inactif. Le texte descriptif (en minuscules) après les deux points l'est, lui. D'où peut être l'intérêt de le mettre en bleu.

ah j'ai compris. Lire la suite n'est pas actif effectivement, c'est "normal". Le lien vers le chapitre est actif, mais comme la couleur est la même...

Je ne sais plus s'il s'agissait d'une contrainte technique. Je vais voir si on peut arranger ce paramètre.

Il y a 1 heure , YANIK a dit:

Pour le texte tronqué : des que je rentre dans le menu.

Pas normal. Sur iPhone ? Mais ça ne se produit ni chez le développeur ni chez moi.

C'est sur Chrome, Safari ou Firefox ?

YANIK · 16 février 2017

Sur le texte tronqué, uniquement sur iPhone, donc Safari.

Attention : un 5c, donc le même "petit" format que les 5, 5S et SE, des 4 pouces je crois.

J'ai vérifié sur un 5s, même problème.

Pas de problèmes sur l'iPad de mon épouse. C'est même très confortable d'utilisation, limite je vais le préférer à mon MBP 15' (2015).

Thierry P. · 17 février 2017

Nous avons réduit légèrement le menu de droite en haut (de 350 px à 300 px) mais nous avons besoin de tester avec un écran 4'' réel (type iPhone 5). Nous ne disposons pas de ce "device". Est-ce que cela a changé un peu (capture d'écran requise pour se rendre compte), voire résolu le problème ?

Merci.

En attendant, pour ce qui concerne le premier problème, nous avons corrigé : le chapitre est en lien actif en mauve après les deux points de "Lire la suite".

loupiod · 17 février 2017

voici une capture d'ecran faite avec mon S4 mini ( 4.3" )de Samsung sur une page du site...

si ca peut faire avancer le dossier ....

bonne journée :bien:

Modifié 17 février 2017 par loupiod

Thierry P. · 17 février 2017

merci mais le problème soulevé par Yanik (et notre problème du coup) concerne le rognage / décalage du Menu d'accès aux rubriques en haut à droite, une fois ouvert.

Ca ne pose pas de souci sur les autres pages je pense.

Par ailleurs, comme ça se joue à quelques millimètres près, ça peut moins rogner sur un 4,3" que sur un 4''.