Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Rendre une page compatible tél mobile ?

41 réponses
Avatar
Une Bévue
Bonjour et meilleurs vœux à toutes et à tous !

Je cherche des tutos pour rendre une page compatible avec un tél mobile.

En espérant que je n'aurai pas à toucher au js mais seulement aux css.

actuellement ma page est ainsi faite :

+----------------------------------------------------------------------+
| Header |
+----------------------------------------------------------------------+
| Catégorie 1 | Item 1 | |
| Catégorie 2 | Item 2 | |
| Catégorie 3 | Item 3 | |
| ... | ... | Item sélectionné ligne 1 |
| Catégorie n | Item j | Item sélectionné ligne 1 |
| Catégorie m | Item k | Item sélectionné ligne 1 |
| Catégorie l | Item l | Item sélectionné ... |
| | | |
+----------------------------------------------------------------------+
| Footer | | |
+----------------------------------------------------------------------+

quand on sélectionne une catégorie, on affiche les items correspondants,
quand un item est sélectionné, sont contenu est affiché
à droite.

ce que j'imagine, c'est qu'avec un mobile, j'ai trois pages au lieu d'une :
catégories ;
items ;
item

10 réponses

1 2 3 4 5
Avatar
SAM
Le 04/01/15 19:04, Une Bévue a écrit :

voila ce que ça donne "brut de fonderie" :
<http://www.cjoint.com/15jv/EAetlWMrylV_screenshot_2015-01-04-19-00-12.png>



Et sinon, avec ces css correctives :

nav p.row { display: none; }
nav p.row.selected { display:block }
nav p.row.selected span { margin-left: 15px; background-color:#ffc; }
nav { height: auto; }
nav#categories { bottom: auto; position: relative; width: 50%; float: left}
nav#items { bottom:auto; position: relative; width: 50%;left: 0;
float:left; }
section#item { /* float: right; */ position: relative;left: 0; width:
100%; }
header div#header_left { width: auto; }

Et l'introduction de la class "selected" dans le p conteneur au lieu du
span du titre de l'item
(bien compliquée cette organisation là et ces css ceinture-et-bretelles)

Ça donne ça :
<http://cjoint.com/?EAgsDteLEXK>


reste plus qu'à revoir les footers


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 04/01/15 18:32, Une Bévue a écrit :
Le 03/01/15 09:53, SAM a écrit :

Le redesign html (à mon idée qui ne doit pas être la seule ?)



bien sûr toucher au html implique de toucher aux css et au js donc
redesign complet, pas top.



Je ne suis pas certain qu'il faille une refonte "profonde" du JS
(qui, et afin de le remplir, doit un peut se moquer de savoir si truc
est dans machin ou à côté)

Le redesign html proposé doit en outre permettre un affichage "correct"
des données en html brut (celui compatible avec l'Accessibilité)



ça veut dire quoi "correct" ?



accessible !!
(on regarde si on s'y retrouve quand il n'y a pas de css)

1)
1.1)
1.1.2)
ligne 1
ligne 2
ligne 3
1.1.3)
ligne 1
ligne 2
ligne 3
1.2)
1.2.2)
ligne 1
ligne 2
ligne 3
1.2.3)
ligne 1
ligne 2
ligne 3
2)
...
x)



là ça veut dire qu'il y a tout sur une page.



Non, pas forcément

Ça peut n'être qu'une sorte d'extrait du complet
(comme déjà par colonnes)

1)
2)
2.1)
2.2)
2.2.2)
2.2.3)
ligne 1
ligne 2
ligne 3
2.2.4)
3)
...
x)

perso, ce que je voyais était hérité du design actuel en 3 colonnes :
une colonne pour les catégories, une colonne pour les items de la
catégorie choisie et enfin une colonne pour l'item choisi.



une colonne pour les catégories
qui s'efface au choix d'un menu pour afficher les items
items qui s’effacent pour montrer fiche finale

pour la version tél mobile au lieu de 3 colonnes j'ai trois pages :



il doit suffire de jouer avec les colonnes comme si c'étaient des divs
successifs que l'on peut alors montrer ou non

je rentre sur les catégories, j'en choisi une et je passe à la page
items de cette catégorie, quand je choisis un item je l'affiche avec
tout son contenu (dans la page items seul le titre est affiché).



Oui, voilà,
mais sans réellement changer de page ?



Il fallait lire ce post-ci avant de lire mon autre post publié plus tôt !!!

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Denis Beauregard
Le Fri, 02 Jan 2015 11:42:35 +0100, Une Bévue
écrivait dans
fr.comp.infosystemes.www.auteurs:

Bonjour et meilleurs vœux à toutes et à tous !

Je cherche des tutos pour rendre une page compatible avec un tél mobile.



Deux petites remarques suite à mon expérience personnelle.

Tout d'abord, certains sites ont une version mobile. Par exemple,
on a d'un côté www.facebook.com pour l'usager régulier et
m.facebook.com pour le mobile. Ce sont deux sites différents
et donc avec une architecture différente. On a même des fonctions
sur l'un et pas sur l'autre (mauvaise idée à mon avis). On a aussi
des perles d'erreurs de programmation : si un visiteur avec son
mobile demande à rejoindre mon groupe, le lien ne fonctionne pas
sur mon Seamonkey (je dois remplacer le m par www)

Ensuite, je suis habitué à Windows et à un navigateur complet.
Quand j'utilise une tablette (comme Safari sur iPad), certains sites
ont une version pour mobile (appelée smartphone dans certains cas)
et je suis souvent dans le chaos car cette version n'a pas toujours
telle fonction que j'utilise sur Seamonkey ou Firefox. En d'autres
mots, si le site est le moindrement sophistiqué, l'usager pourrait
apprécier de tomber dans le mode qu'il préfère, au lieu du mode
imposé par le site. Ainsi, si on détecte un iphone comme on détecte
un ipad, le premier étant étroit et pas l'autre, en se fiant à
un mauvais critère (si safari est utilisé par exemple), on invite
presque le client à aller voir ailleurs (s'il a le choix). Donc, il
faut toujours laisser au client la possibilité de changer de mode
et ne pas trop automatiser ce choix.


Denis
Avatar
Une Bévue
Le 06/01/15 18:26, SAM a écrit :
accessible !!
(on regarde si on s'y retrouve quand il n'y a pas de css)



pigé la définition.

mais c'est pas du tout ce que je fais )))

j'utilise même des "dialog" qui ne passent pas sur Safari...
Avatar
Une Bévue
Le 06/01/15 18:23, SAM a écrit :
Le 04/01/15 19:04, Une Bévue a écrit :

voila ce que ça donne "brut de fonderie" :
<http://www.cjoint.com/15jv/EAetlWMrylV_screenshot_2015-01-04-19-00-12.png>




Et sinon, avec ces css correctives :

nav p.row { display: none; }
nav p.row.selected { display:block }
nav p.row.selected span { margin-left: 15px; background-color:#ffc; }
nav { height: auto; }
nav#categories { bottom: auto; position: relative; width: 50%; float: left}
nav#items { bottom:auto; position: relative; width: 50%;left: 0;
float:left; }
section#item { /* float: right; */ position: relative;left: 0; width:
100%; }
header div#header_left { width: auto; }

Et l'introduction de la class "selected" dans le p conteneur au lieu du
span du titre de l'item
(bien compliquée cette organisation là et ces css ceinture-et-bretelles)

Ça donne ça :
<http://cjoint.com/?EAgsDteLEXK>


reste plus qu'à revoir les footers


Cordialement,
--




Ah, ouais, bravo, c'est super !

ah oui, le "selected" ben c'est quand on a cliqué sur la
catégorie/l'item, ça change la couleur du fond

bon il faut que je révise mes css.
Avatar
Une Bévue
Le 06/01/15 18:23, SAM a écrit :
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8


euh, un nouveau 'iMac-intel 27"' en SL ?
Avatar
Une Bévue
Le 06/01/15 20:22, Denis Beauregard a écrit :
Ensuite, je suis habitué à Windows et à un navigateur complet.
Quand j'utilise une tablette (comme Safari sur iPad), certains sites
ont une version pour mobile (appelée smartphone dans certains cas)
et je suis souvent dans le chaos car cette version n'a pas toujours
telle fonction que j'utilise sur Seamonkey ou Firefox. En d'autres
mots, si le site est le moindrement sophistiqué, l'usager pourrait
apprécier de tomber dans le mode qu'il préfère, au lieu du mode
imposé par le site. Ainsi, si on détecte un iphone comme on détecte
un ipad, le premier étant étroit et pas l'autre, en se fiant à
un mauvais critère (si safari est utilisé par exemple), on invite
presque le client à aller voir ailleurs (s'il a le choix). Donc, il
faut toujours laisser au client la possibilité de changer de mode
et ne pas trop automatiser ce choix.



ok, merci, mais c'est quoi le "mode" ???
Avatar
Une Bévue
Le 06/01/15 18:23, SAM a écrit :
Et sinon, avec ces css correctives :



bon, j'essaie de comprendre...

nav p.row { display: none; }
nav p.row.selected { display:block }
nav p.row.selected span { margin-left: 15px; background-color:#ffc; }
nav { height: auto; }
nav#categories { bottom: auto; position: relative; width: 50%; float: left}



euh, là le 'width: 50%;' c'est relatif à body non ?

nav#items { bottom:auto; position: relative; width: 50%;left: 0;
float:left; }



là, avec 'position: relative;' ET 'left: 0;float:left;', ça veut dire
que 'nav#items' va se positionner contre 'nav#categories'.

section#item { /* float: right; */ position: relative;left: 0; width:
100%; }



là le 'width: 100%;' signifie quoi ?, c'est 100 % de quoi, du body (dans
le cas d'un smartphone), si c'est ça ok.

header div#header_left { width: auto; }



bon, ce que je retiens surtout c'est 'position: relative; width: 50%;
float: left' beaucoup plus sioux que ce que j'ai fait.

le pb, pour moi, est que je ne maitrise pas le css, j'en fait une fois
tous les n années, et je rajoute, pour corriger, l'existant plutôt que
virer ce qu'il y a en trop...

Mais bon, comme j'ai à peu près terminé mon serveur pour mes bd je vais
pouvoir m'y remettre.
Avatar
Une Bévue
Le 07/01/15 09:05, Une Bévue a écrit :
Et sinon, avec ces css correctives :



bon, j'essaie de comprendre...



je viens de comprendre un truc ;-)

toutes les catégories sont rendues non visibles exceptées celle
sélectionnées, idem pour les items, le résultat est super, il y a tout
sur une page.
Avatar
Denis Beauregard
Le Wed, 07 Jan 2015 08:21:41 +0100, Une Bévue
écrivait dans
fr.comp.infosystemes.www.auteurs:

Le 06/01/15 20:22, Denis Beauregard a écrit :
Ensuite, je suis habitué à Windows et à un navigateur complet.
Quand j'utilise une tablette (comme Safari sur iPad), certains sites
ont une version pour mobile (appelée smartphone dans certains cas)
et je suis souvent dans le chaos car cette version n'a pas toujours
telle fonction que j'utilise sur Seamonkey ou Firefox. En d'autres
mots, si le site est le moindrement sophistiqué, l'usager pourrait
apprécier de tomber dans le mode qu'il préfère, au lieu du mode
imposé par le site. Ainsi, si on détecte un iphone comme on détecte
un ipad, le premier étant étroit et pas l'autre, en se fiant à
un mauvais critère (si safari est utilisé par exemple), on invite
presque le client à aller voir ailleurs (s'il a le choix). Donc, il
faut toujours laisser au client la possibilité de changer de mode
et ne pas trop automatiser ce choix.



ok, merci, mais c'est quoi le "mode" ???



mobile ou pour tous les navigateurs


Denis
1 2 3 4 5