Je viens de finaliser (du moins, je l'espère) le passage de ce blog en mode "responsive". En principe, et si j'ai bien tout capté, la mise en page devrait s'adapter un peu mieux qu'auparavant à la zone d'affichage de l'engin utilisé pour lire ici.
S'affiche aussi tout en haut à gauche et en fonction de la largeur de la zone d'affichage détectée, l'un des pictogrammes suivants :
L'écran à partir de
1100px1024px, largeur fixe, menu à droite, images non redimensionnées.le laptop entre
801px840px et1099px1023px, largeurvariablefixe, menu en bas, taille maxi des photos = 570px.la tablette entre 551px et
800px839px, largeur variable, menu en bas, taille maxi des photos = 410px.le smartphone en dessous de 551px, largeur fixe, menu en bas, taille maxi des photos = 410px.
Remarque : les pictogrammes ont été choisis de façon complètement arbitraire et n'ont probablement aucun rapport avec la taille d'écran de la plupart des bouzins actuels. Leur affichage est provisoire, le temps de tester et de faire les derniers réglages.
1. par Franck, le mercredi 04 décembre 2013 à 14h33 commentaire
Suggestion
Ajoute cette ligne :
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Dans le
<head>de ton thème, ça rendra les caractères beaucoup plus lisibles sur petits écrans.2. par Sacrip'Anne, le mercredi 04 décembre 2013 à 15h12 commentaire
Faudra que je teste depuis mes différents terminaux, alors !
3. par Tomek, le mercredi 04 décembre 2013 à 15h25 commentaire
Je plussoie Franck, pour le reste ça fonctionne bien !
Et je pense qu'en version smartphone, il faudra virer le float:right de info-cat-tags.
4. par mirovinben, le mercredi 04 décembre 2013 à 17h51 commentaire
Merci de vos retours...
A part ça, je viens de modifier légèrement les "changements de tranche"
sur le principe "charité bien ordonnée commençe par soi-même" et parce que j'avais envie d'avoir le menu à droite pour ma tablette (largeur d'écran 1024px).
5. par Cunégonde, le jeudi 05 décembre 2013 à 08h12 commentaire
Sur mon samsung note 2, c'est trop grand, je vais t'envoyer des copies d'écran.
Sinon, c'est sympa
6. par Franck, le jeudi 05 décembre 2013 à 11h11 commentaire
mirovinben la ligne en question est très efficace sur petits écrans, je viens de le vérifier, ton blog est parfaitement lisible sur mon iPhone !
7. par mirovinben, le jeudi 05 décembre 2013 à 12h53 commentaire
Cunégonde, merci. Mail reçu, réponse sous peu. Je suppose que tu peux visionner aussi en mode "paysage", ce qui te permettrait sans doute d'avoir une plus grande largeur.
Franck, ok. Je te crois
8. par Obni, le jeudi 05 décembre 2013 à 23h10 commentaire
Assez bien visible (notamment après double tapotement sur écran) sur l'iPad 1 que j'utilise en ce moment.
9. par mirovinben, le vendredi 06 décembre 2013 à 06h46 commentaire
Obni, j'espère en tout cas que c'est plus lisible qu'avant. Surtout sur smartphone. Sur ma tablette sous android (une Asus de première génération, la TF101), que j'utilise toujours en mode "paysage", c'est impec. Modulo la police de caractère qui n'est pas présente et qui est remplacée par ce qui ressemble à de l'arial.
10. par Gilsoub, le vendredi 06 décembre 2013 à 14h44 commentaire
Parfaitement lisible sur mon iphone 4 sur l'adresse du portail : http://www.mirovinben.com
Par contre sur la partie blogue (index et billet) un petit embrouillamini dans l'entête due essentiellement au 3 menu Dotclear en superposition pas très jolie à voir... je t'envoie des copie d'écran
11. par mirovinben, le vendredi 06 décembre 2013 à 15h21 commentaire
Merci Gilsoub pour tes copies d'écran.
Merci encore.
12. par Tomek, le vendredi 06 décembre 2013 à 18h11 commentaire
Oups, idiot que je suis, j'avais vérifié le nom de la classe (.info-cat-tags) mais pas la manière dont les blocs étaient positionnés !
Bon par contre en portrait sur mon smartphone, ça dépasse. Et le texte est petit, et les liens difficilement touchables. Mais j'ai pas le temps de me pencher dessus là tout de suite. Ok en paysage. (viewport 360px x 600px)
13. par mirovinben, le samedi 07 décembre 2013 à 05h56 commentaire
Tomek, j'en connais qui font d'autres erreurs dignes d'être mises à l'index...
Sinon, c'est normal que ça dépasse si 360px. J'essaye en tâtonnant et avec votre aide, de régler les choses. Sauf que je n'ai qu'un écran 1920x1200 (mais avec un redimensionnement lié à la fenêtre de Firefox) pour le desktop et une tablette affichant en 1280x800. Donc pas très facile et pas complètement satisfaisant. Une fois trouvé les bonnes largeurs de référence, je m'occuperais des tailles de caractères.
Tout conseil est le bienvenu.
14. par Franck, le samedi 07 décembre 2013 à 08h38 commentaire
Alors mirovinben va voir ici et ajoute le bouton à ta barre d’outils.
Je l’utilise depuis des mois, c’est génial
15. par mirovinben, le samedi 07 décembre 2013 à 09h15 commentaire
Merci Franck.
Je viens d'aller y faire un tour, ça a l'air bien en effet mais je ne comprends pas trop comment m'en servir. Je suis (presque) nul en anglais.
C'est sa page qui sert d'exemple ou je peux visualiser "mon" site via chez lui ?
16. par mirovinben, le samedi 07 décembre 2013 à 13h24 commentaire
Ayé, j'ai trouvé comment m'en servir. Laborieux je suis. Et pas très doué aussi...