[MOBILIS'ACTION] 1. Articles - Améliorer LISibilité & visibilité sur smartphones

JASEUR_BOREAL · Juillet 15, 2017, 4:34

Bonjour,

Je vous partage mes observations de quelques copies écrans : but améliorer le site sous Escal Lettonie-Francija .
Dans un premier temps elles sont volontairement issues d’un smartphone android Logicom 480 x 854 pixels format « Portrait ».
On constate des réglages et améliorations à réaliser dans l’affichage des pages sous Escal pour en faciliter lisibilité et visibilité.
Toutes vos suggestions et astuces partagées seront les bienvenues.
Dans un autre courriel je vous montrerai des copies écrans d’autres sites avec quelques trucs et astuces utilisables et bénéfiques à la navigation d’internet sur smartphones.
N’hésitez pas à partager vos suggestions et vos bonnes trouvailles.

Qu’en dites vous ?

Synthèse des principaux constats sur smartphone + ma liste de modifications à réaliser :1. L’’ accès au Menu mobile est parfois invisible ? bizarre selon ?P’tet le chargement plus long selon les images de l’accueil ?

"Recherche" est « fixed » dans la page or il serait mieux dans la partie cachée du menu à faire apparaître selon besoin en cliquant sur le menu.
Un bouton « Haut de page » survolant « fixed » serait bienvenu. Il pourrait apparaître après avoir quitté le haut de page.
Le bouton "LOGO SITE" « fixed » serait bienvenu en haut à gauche : Il permet de revenir à l’accueil général de n’importe où dans le site.
Un seul bouton « partage » réseaux sociaux accessible par apparition temporaire serait idéal. Il pourrait être accessible dans le menu.
Dans une rubrique : Les articles de la rubrique : réduire la marge du texte & permettre de cliquer sur l’ensemble d’un article pour y accéder.
Texte de l’article : Aligner à gauche ! Lisibilité +++
Cadres autour de textes : Aligner le texte à gauche et réduire les marges autour du cadre
"A+" , « A- » inutiles : agrandir l’écran c’est réalisable avec 2 doigts sur smartphone
image « imprimer » inutile là. La mettre en plus accssible avec les boutons sociaux « partager ».
Player Audio à rendre adaptatif
"Notes de bas de page" : rendre adaptatifs police caractères et interligne du texte
Bouton « Répondre » Rendre adaptatif Bouton « Répondre » enlever le mini images qui est à gauche.
Affichage Carte & lieux sur mobiles: Empêcher déplacement de la carte avec le doigt dans son container, car sinon on ne peut plus remonter ou descendre plus bas dans la page avec son doigt.

Merci de vos autres modifications et suggestions à proposer.

Cordialement @ Le Chti qui Jase

Observations dans une rubrique

Les articles de cette rubrique :

réduire la marge du texte
rendre adaptatif (hauteur et largeur) les textes des titres et descriptifs selon les dimensions d’écrans
permettre de cliquer sur l’ensemble de l’article pour y accéder, comme dans les articles en une de la page accueil.
simplifier l’a date inscrite

Rubrique

Accéder depuis l’accueil à l’article :Dans les articles en une de la page accueil

on clique sur l’ensemble de l’article pour y accéder :
c’est facile et direct

En page accueil les articles en une : cliquer sur
tout l'article pour y accéder

Observations dans un article

Haut de page de l’article :Boutons,

menu
logos,
fil de suivi de la hierarchie des rubriques et articles

Container de l’article sur écran mobile.

Espace blanc inutile

### Haut de l’article pour portable :- - image « imprimer » inutile là. La mettre en plus gros avec les boutons sociaux « partager ».

- « A+ » , « A- » inutiles : agrandir l’écran c’est réalisable avec 2 doigts sur smartphone

### Texte de l’article : Aligner à gauche ! Lisibilité +++

Player Audio à rendre adaptatif

Player Audio à rendre adaptatif :

- Augmenter hauteur du player
- le rendre adaptatif
- agrandir bouton « Play » « Pause » « volume ? » …
  ### ### ### TABLEAU dans article- -Diminuer marges gauches droite
-Adapter largeur colonnes au contenu
-Centrer chiffres colonne 1
-retour à la ligne sans déborder

Notes de bas de page

### ### Bouton « Répondre »

Rendre adaptatif Bouton « Répondre » enlever le mini images qui est à gauche.

Bouton Répondre

Carte « GIS4 » pour mobiles:

Empêcher déplacement de la carte avec le doigt dans son container, car sinon on ne peut plus remonter ou descendre plus bas dans la page avec son doigt.

Cadres autour de
textes

Cadres autour de textes

Aligner à gauche et réduire les marges

Exemple d’affichage de 6 autres articles suggérés à lire dans un bas d’article

Exemple
d'affichage d' "Autres articles à lire"

Fin de page - merci de votre attention et de vos suggestion.

J-C · Juillet 15, 2017, 4:48

Hello

Que de suggestions intéressantes !

Là je pars pour 15 jours sans ordi mais promis, courant Aout, je regarde tout ça de près, de très près.

Certains points me semblent très faciles à régler, d’autres nettement moins, d’autant qu’ils ne dépendent pas forcément d’Escal (point 11 par exemple) …

Et comme le dit notre Jaseur préféré, si certains veulent apporter d’autres suggestions, n’hésitez pas.

JASEUR_BOREAL · Juillet 16, 2017, 7:02

Bonjour,
Je vous partage BLABLAOO projet novateur, réalisé avec PLUXML sans base de donnée.
Certains de ses outils en ligne permettent de **tester l’**affichage et les réglages d’écartement des caractères
Cela aide à choisir des dimensions dans les réglages CSS de perso.css

Bonne découverte.
Cordialement
@+

Blablaoo c’est quoi ?

Blablaoo est un projet portail qui reproupe une palette d’outils internet gratuits pour aider les DYS qui permettent de lire des textes, des documents pdf, et des sites internet.

C’est aussi une solution de blogging, pour permettre à toutes celles et ceux qui ont des difficultés de lecture de pouvoir gérer un site internet.

Puis, pour simplifier tout ceci, nous avons lancé notre propre plateforme d’hébergement pour vous permettre de démarrer rapidement et ainsi éviter toutes les contraintes techniques d’installation.

http://www.blablaoo.com/comment-ca-fonctionne

Certains troubles de la lecture ne permettent pas de distinguer toutes les lettres d’un mot, ou les syllabes. On peut même perdre le fil d’une lecture parce que l’on saute une ligne de trop après un retour à la ligne.

Notre barre d’outils permet aux lecteurs, de rajouter des couleurs dans les mots, de mieux identifier les lignes de texte, de choisir des polices de caractère, d’agrandir les textes, de régler l’espacement entre les lettres, les mots et les lignes. La reconnaissance syllabique de LireCouleur est également intégrée à cette barre d’outil.

Blablaoo s’appuie sur PluXml, un système de gestion de contenu (CMS) libre, simple, léger, rapide et efficace.

stephane_poupard · Juillet 16, 2017, 10:30

Hello

j’espère ne vexer personne mais ceci est la liste escal + spip

que vient faire pluxml ?

j’irais quand même jeter un oeil …

Jean_Christophe_Vill · Août 7, 2017, 1:18

Allez, je m’y colle peu à peu …

Réponses entre les lignes

Pas de souci sur mon Sony Xperia avec chrome ou Firefox. Dépend peut-être du smartphone utilisé ? En revanche, quand le menu déplié dépasse la hauteur de l’écran, impossible de faire remonter le menu. Je pense avoir la solution : ne plus fixer le menu en haut Mouais pas forcément d’accord, j’aime bien que le formulaire de recherche soit toujours visible là va falloir que je cherche ! Le menu aussi ! De plus certains mettent une image assez haute dans le bandeau qui va manger une grosse part de l’écran Là aussi faut que je cherche. Pas sur que ce soit très simple à mettre en oeuvre … difficile d’avoir un comportement différent entre la version ordi et la version mobile pour ce cas-là ok, ça c’est facile Tu parles des cadres de couleur « important », « info », etc En effet, je vire. où la virer, tout simplement, non ? Qui imprime à partir d’un smartphone ? Ah, là, ce n’est pas de mon ressort car il s’agit d’un autre plugin Peux-tu préciser ? Là aussi besoin de précision sur le « rendre adaptatif » Bah, pourquoi virer l’image ? Là aussi, il s’agit d’un autre plugin.

JASEUR_BOREAL · Août 7, 2017, 3:13

Quelques trucs trouvailles et liens entre les lignes … quelque soit le type d’affichage du menu sur l’écran

Sommaire des réponses-questions ajouts avec accès direct entre les lignes :

Menu

Bouton Haut de Page

Affichage Rubrique

qui allie à la fois la séparation des rubriques selon leur couleur, et qui se déroule jusqu’en bas … Cet usage des différentes couleurs dans le menu est très visuel et pratique : on va direct à la rubrique vers sa couleur ! Cela peut-être une image, comme un « caractère flèche » de grande dimension … Y aurait-t-il aussi du CSS pour régler la div « top » ou autre appellation du genre « scrollup » ou « HautdeFrance » : avec le CSS du bouton : En fait, l’idée c’est obtenir le même comportement (version ordi et mobile) pour afficher une rubrique, c’est à dire le même type d’affichage des titres + images +partie de descriptif des articles, que celui obtenu en page d’accueil avec derniers articles : Plutôt l’ajouter dans un écran sur-affiché accessible par un seul bouton commun avec partager, réseaux sociaux, email, …

Jean_Christophe_Vill · Août 7, 2017, 3:41

Le 07/08/2017 à 17:13, JASEUR BOREAL a écrit :

*Quelques trucs trouvailles et liens entre les lignes ... **quelque soit le type d'affichage du menu sur l'écran *
*
Sommaire des réponses-questions ajouts avec accès direct entre les lignes :
*

     *

              Menu <#Menu>

     *

              Bouton Haut de Page <#Top>

     *

              Affichage Rubrique <#Affichage%20Rubrique>

Le 07/08/2017 à 15:18, Jean Christophe Villeneuve a écrit :

Allez, je m'y colle peu à peu ...

Réponses entre les lignes

Le 15/07/2017 à 18:34, JASEUR BOREAL a écrit :

Bonjour,

*Je vous partage mes observations de quelques copies écrans : but améliorer **le **site **sous Escal **Lettonie-Francija <https://www.lettonie-francija.fr/> **.*
Dans un premier temps elles sont volontairement issues d'un *smartphone android Logicom 480 x 854**pixels format "Portrait".*
On constate des réglages et améliorations à réaliser dans l'affichage des pages sous *Escal* pour en *faciliter lisibilité et visibilité*.
Toutes vos suggestions et astuces partagées seront les bienvenues.
Dans un autre courriel je vous montrerai des copies écrans d'autres sites avec quelques trucs et astuces utilisables et bénéfiques à la navigation d'internet sur smartphones.
*N'hésitez pas à partager vos suggestions et vos bonnes trouvailles.

Qu'en dites vous ?*

    Synthèse des principaux constats sur smartphone + ma liste de
    modifications à réaliser :

L'' accès *au Menu mobile *est parfois invisible ? bizarre selon ?P'tet le chargement plus long selon les images de l'accueil ?

Pas de souci sur mon Sony Xperia avec chrome ou Firefox.
Dépend peut-être du smartphone utilisé ?

En revanche, quand le menu déplié dépasse la hauteur de l'écran, impossible de faire remonter le menu.
Je pense avoir la solution : ne plus fixer le menu en haut

      Exemple très agréable d'affichage de menu:

<Dziesmu un deju svētki 2023 / LSM.LV;
qui allie à la fois la séparation des rubriques selon leur couleur, et qui se déroule jusqu'en bas .... Dziesmu un deju svētki 2023 / LSM.LV

Cet usage des différentes couleurs dans le menu est très visuel et pratique : on va direct à la rubrique vers sa couleur *quelque soit le type d'affichage du menu sur l'écran* !

<Dziesmu un deju svētki 2023 / LSM.LV;

<Dziesmu un deju svētki 2023 / LSM.LV;

Très compliqué à mettre en oeuvre avec Escal car chaque utilisateur à sa propre palette de couleur
De plus certains voudraient bien avoir une couleur par rubrique mais d'autres non

*"Recherche" *est "fixed" dans la page or il serait mieux dans la partie cachée du menu à faire apparaître selon besoin en cliquant sur le menu.

Mouais pas forcément d'accord, j'aime bien que le formulaire de recherche soit toujours visible

Un *bouton "Haut de page" *survolant "fixed" serait bienvenu. Il pourrait apparaître après avoir quitté le haut de page.

là va falloir que je cherche !

      Bouton Haut de Page

Cela peut-être une image, comme un "caractère flèche" de grande dimension ....
Y aurait-t-il aussi du CSS pour régler la div "top" ou autre appellation du genre "scrollup" ou "HautdeFrance" :

    <div <http://december.com/html/4/element/div.html> id="scrollUp">
    <a <http://december.com/html/4/element/a.html> href="#top"><*img
    <http://december.com/html/4/element/img.html>\*\*\*\*src\*\*=\*\*"to\_top\.png"\*/></a
    <http://december.com/html/4/element/a.html>>
    </div <http://december.com/html/4/element/div.html>>

avec le CSS du bouton :

    #scrollUp
    {
    position: fixed;
    bottom : 10px;
    right: -100px;
    opacity: 0.5;
    }

*sources : **HTML + JS + CSS : Créer un bouton "Vers le haut" sur son site - Wiki - Wiki*

*autres exemple avec JQuery : **http://www.rbastien.com/blog/2015/02/scroll-to-top/**
*

Tu as oublié le javascript (encore un de plus) qui gère son affichage que si on descend dans la page

**

Le*bouton "LOGO SITE*" "fixed" serait bienvenu en haut à gauche : Il permet de revenir à l'accueil général de n'importe où dans le site.

Le menu aussi !
De plus certains mettent une image assez haute dans le bandeau qui va manger une grosse part de l'écran

Un seul *bouton "partage" réseaux sociaux* accessible par apparition temporaire serait idéal. Il pourrait être accessible dans le menu.

Là aussi faut que je cherche. Pas sur que ce soit très simple à mettre en oeuvre ...

*Dans une rubrique *: Les articles de la rubrique : réduire la marge du texte & permettre de cliquer sur l'ensemble d'un article pour y accéder.

difficile d'avoir un comportement différent entre la version ordi et la version mobile pour ce cas-là

Affichage Rubrique

En fait, l'idée c'est obtenir le même comportement (version ordi et mobile) pour afficher une rubrique,
c'est à dire le même type d'affichage des titres + images +partie de descriptif des articles,
que celui obtenu en page d'accueil avec derniers articles :
*on clique sur la surface globale (titre + image +partie de descriptif de l'article) et on accède à l'article*

mais il faudrait quand même garder le lien vers la page auteur si on affiche celui-ci

*Texte de l'article* : Aligner à gauche ! Lisibilité +++

ok, ça c'est facile

1. *Cadres autour de textes *: Aligner le texte à gauche et réduire
    les marges autour du cadre

Tu parles des cadres de couleur "important", "info", etc

      *oui*

*"A+" , "A-"* inutiles : agrandir l'écran c'est réalisable avec 2 doigts sur smartphone

En effet, je vire.

image *"imprimer"* inutile là. La mettre en plus accssible avec les boutons sociaux "partager".

où la virer, tout simplement, non ?
Qui imprime à partir d'un smartphone ?

Plutôt l'ajouter dans un écran sur-affiché accessible par un seul bouton commun avec partager, réseaux sociaux, email, ...

*Player Audio* à rendre adaptatif

Ah, là, ce n'est pas de mon ressort car il s'agit d'un autre plugin

*"Notes de bas de page" *: rendre adaptatifs police caractères et interligne du texte

Peux-tu préciser ?

*C'est du réglage de dimensions des hauteurs de caractères des notes de bas de pages qui **
*

1. *Bouton "Répondre"* Rendre adaptatif Bouton "Répondre" enlever
    le mini images qui est à gauche.

Là aussi besoin de précision sur le "rendre adaptatif"
Bah, pourquoi virer l'image ?

1. *Affichage Carte & lieux* sur mobiles: Empêcher déplacement de
    la carte avec le doigt dans son container, car sinon on ne peut
    plus remonter ou descendre plus bas dans la page avec son doigt.

Là aussi, il s'agit d'un autre plugin.

_______________________________________________
Spip-avec-escal@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-avec-escal