Comme vous le savez, je suis en train d'essayer de bidouiller le rendu de ce blog pour l'adapter aux différentes tailles d'écrans de mes visiteurs.
Pas facile quand on n'a à disposition qu'un écran d'ordinateur 1920 x 1200 pixels (mais un navigateur qui sait simuler d'autres largeurs) et une tablette capable d'afficher en 1280 x 800 pixels et "adaptant" automatiquement une page oueb pour que "ça" rentre au mieux.
Certains d'entre-vous m'ont fait parvenir des copies d'écran avec des résultats qui m'étonnent un peu beaucoup et des trucs qui ne répondent pas à mes attentes. Du coup, sur le métier je remets mon ouvrage.
J'essaye d'optimiser mes CSS ou, au moins, de les organiser pour faciliter la prise en compte de "mediaqueries" diverses et variées. Je tâtonne et fouille l'internet pour voir ce qui se fait ailleurs. Je regarde les entrailles de certains thèmes proposés par des dotcleariens émérites. J'essaye également quelques techniques pour rendre adaptable le bandeau servant de titre au blog. Je viens même de découvrir ce tableau qui va m'aider à mieux connaître ce qui existe et me permettre de fixer quelques seuils.
Quoiqu'il en soit, et à cause de ça, l'affichage de ce blog chez vous risque de tanguer ce week-end avec des marches avant et des reculades. Il est même possible que je casse tout.
1. par mirovinben, le samedi 07 décembre 2013 à 09h01 commentaire
Étape n°1 : je vire les "mediaqueries" et reviens à la situation d'avant : "une seule largeur pour les gouverner tous"... Histoire de repartir sur de bonnes bases.
J'aimerais bien que vous puissiez me communiquer les dimensions de celui de vos écrans le plus souvent utilisé pour surfer et si vous vous servez de préférence du mode "portrait" (hauteur max) ou du mode "paysage" (largeur max).
Merki d'avance.
2. par Cunégonde, le samedi 07 décembre 2013 à 09h53 commentaire
Dis tu as gardé celles de mon note ?
3. par mirovinben, le samedi 07 décembre 2013 à 10h01 commentaire
Oui...
4. par Kozlika, le samedi 07 décembre 2013 à 10h16 commentaire
Un outil tout simple pour visualiser une page à différentes résolutions : http://lab.maltewassermann.com/view... tu colles le bidule dans ta barre personnelle (sous Firefox) et yaplukakliker
Sinon, je serais toi je laisserais tomber le tableau des différentes résolutions : ce qui doit gouverner la modification de la disposition des blocs, c'est à quel moment *ton* layout le nécessite (parce que tel bloc devient trop grand ou trop petit).
My two cents
5. par mirovinben, le samedi 07 décembre 2013 à 13h29 commentaire
Merci Kozlika. Étrangement (?) c'est le même lien que celui que m'a donné Frank ce matin (ici) et j'ai enfin compris comment me servir de l'outil. C'est tip-top en effet.
Je vais suivre ton conseil et mettre en place progressivement les différentes variantes nécessaires et suffisantes... Et que celles-là.
6. par Gilsoub, le samedi 07 décembre 2013 à 14h09 commentaire
Mon écran principale 2560 par 1440... un iMac 27'
7. par mirovinben, le samedi 07 décembre 2013 à 15h45 commentaire
Gilsoub, avec de telles dimensions, j'ai dans l'idée que tu devrais avoir un peu de marge à droite et à gauche...
8. par mirovinben, le samedi 07 décembre 2013 à 15h59 commentaire
Étape n°2 : Les pictos en haut à gauche qui représentaient écran, laptop, tablette et smartphone permettant d'identifier la largeur d'écran prise en compte (cf ce billet) ont été remplacés par des pastilles colorées.
La pastille rouge identifie un format temporaire. Les deux autres formats peuvent être considérés comme stabilisés et ne devraient plus changer. En principe...
9. par Gilsoub, le samedi 07 décembre 2013 à 16h12 commentaire
Un peu oui
et puis si il faut j'ai un deuxième écran 
10. par mirovinben, le dimanche 08 décembre 2013 à 16h22 commentaire
Étape n°3 : deux nouveaux formats pris en compte :
Sauf oubli ou bug, ce devrait être la dernière étape.
11. par lynxxe, le dimanche 08 décembre 2013 à 17h04 commentaire
Ah chouette, c'est tout automatique !
sur mon MacBook sous Firefox, c'est passé tout seul du format bleu (quand je laisse ma liste de marque pages affichée, ce qui est ma pratique) au vert (quand je l'enlève).
Par contre sur l'iPhone, le portail est très bien, mais les billets se mettent en format orange et n'épousent plus le mode 'paysage'. Très lisibles mais plus déstructurés (si tu arrives à me comprendre...).
Bon, je dis ça, mais en fait c'est rare que je me serve de l'iPhone pour lire les blogs.
Bravo en tout cas de tout ce boulot.
12. par mirovinben, le lundi 09 décembre 2013 à 06h51 commentaire
Je dois reconnaître que le mode "orange : largeur 340px" met les choses très à l'étroit. Ce n'est pas le mode que je préfère et il me serait très facile de le mettre hors-ligne.
Les smartphones et les tablettes semblent capables de réduire automatiquement la taille apparente des pixels et permettent un affichage complet d'une page quelque soit sa largeur (comme celle-ci, qui n'a pas été "mediaquerisées"), mais au détriment de la taille des caractères (lisibilité et difficulté de cliquer précisément sur un lien).
Du coup, je me demande si ça vaut bien le coup de proposer un blog en 340px de large. Certains sites le font. Dois-je les imiter ?
13. par mirovinben, le lundi 09 décembre 2013 à 15h10 commentaire
Allez, zou !...
Étape n°4 : un format de moins à gérer (et en plus ce n'était pas le plus simple). Adieu le "pastille orange : largeur 340px". Donc, finalement et en résumé...
En espérant arrêter là mes tergiversations et, surtout, en souhaitant fortement que les visiteurs avec smartphone y trouvent leur compte (redimensionnement pas trop pénalisant par leur bouzin et retour du mode paysage).
14. par lynxxe, le lundi 09 décembre 2013 à 16h38 commentaire
Merci M'sieur !
15. par Obni, le mardi 10 décembre 2013 à 07h18 commentaire
Pastille violette sur l'iPad 1, sur le Galaxy S3 et bleue sur le MacBook Pro… tout semble bien fonctionner chez moi. C'est sûr que sur le smartphone… les caractères sont vraiment petits… Mais il n'est pas dans mon usage d'utiliser trop ce device pour le web.
16. par mirovinben, le mardi 10 décembre 2013 à 12h32 commentaire
lynxxe, de rien..
Obni, d'où la difficulté d'arranger tout le monde en toutes circonstances. D'autant que je ne suis pas prêt d'avoir un smartphone... Surtout pour surfer sur le ninternet. Donc, je vais considérer l'état des choses comme satisfaisant. Pour l'instant...
17. par mirovinben, le lundi 23 décembre 2013 à 10h34 commentaire
Comme le père Noël vient de m'apporter prématurément un smartphone (voui, je suis pistonné), je suis en train de tester l'affichage du blog dans la résolution de ce nouveau jouet. Du coup, je ré-active la pastille orange avec un paramétrage "< 660px - largeur fixe 480px".
En testant, j'ai constaté l'effet pervers d'un "width: 100%" inutile quelque part dans le thème qui faisait apparaître à tort une barre de défilement horizontale dans des situations où ça n'aurait pas dû.
Bref, ça devrait aller mieux. Même si je considère que le visionnage d'un album photo avec un smartphone n'est pas forcément tip-top. Du moins en l'état actuel de mes connaissances.
Je récacapitule :
A suivre...