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 02/01/15 11:42, Une Bévue a écrit :
Bonjour et meilleurs vœux à toutes et à tous !



Bonne année.

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



comme on ne sait ce qu'il trafique ? !
(appelle t-il (en xHtmlRequest) les items de la fiche de droite ?)

mais seulement aux css.



Heu ... il faudra commencer par le html ! (à mon idée)

<ul>
<li>Catégorie 1
<ul>
<li>Item 1
<span>fiche 1</span>
</li>
<li>Item 2
<span>fiche 2</span>
</li>
<li>Item 3
<span>fiche 3</span>
</li>
</ul>
</li>
<li>Catégorie 2
<ul>
<li>Item 1
<span>fiche 1</span>
</li>
<li>Item 2
<span>fiche 2</span>
</li>
<li>Item 3
<span>fiche 3</span>
</li>
</ul>
</li>
<li>Catégorie 3
...
</li>
</ul>


les
<li> Item x <span>fiche x</span><li>
pouvant être remplacés par des :
<li><dl>
<dt>Item x</dt>
<dd><ul>
<li>Item sélectionné ligne 1</li>
<li>Item sélectionné ligne 2</li>
<li>Item sélectionné ligne 3</li>
<li>Item sélectionné ligne 4</li>
</ul>
</dd>
</dl></li>



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 | | |
+----------------------------------------------------------------------+



quant aux boutons des footers ... comme leur usage est mystérieux ils
seront utilisés dans une autre appli ou conception ?

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



ou un menu à 3 étages ?
(les smartphones acceptent les scrolls verticaux, me semble-ce ?!)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 02/01/15 23:46, SAM a écrit :
comme on ne sait ce qu'il trafique ? !
(appelle t-il (en xHtmlRequest) les items de la fiche de droite ?)



non pas de xhr mais websocket.

mais seulement aux css.



Heu ... il faudra commencer par le html ! (à mon idée)



dans ce cas, c'est un autre dossier avec d'autres pages.

un redesign complet de l'interface.
Avatar
SAM
Le 03/01/15 06:58, Une Bévue a écrit :
Le 02/01/15 23:46, SAM a écrit :
comme on ne sait ce qu'il trafique ? !
(appelle t-il (en xHtmlRequest) les items de la fiche de droite ?)



non pas de xhr mais websocket.



connais pas mais ça doit être de fonctionnement équivalent je suppose.

mais seulement aux css.



Heu ... il faudra commencer par le html ! (à mon idée)



dans ce cas, c'est un autre dossier avec d'autres pages.

un redesign complet de l'interface.



Le redesign html (à mon idée qui ne doit pas être la seule ?) doit
permettre l'affichage "à l'ancienne par colonnes" comme celui en "mode
menu" sans doute plus favorable aux tous petits écrans.
(css "normales" pour ordi + css "conditionnelles et correctives" pour
petits écrans)

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

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)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Henry Monnier
Le 02/01/2015 à 11:42, Une Bévue a écrit :
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




bonjour,
si vous travaillez avec des cms tels wordpress ou joomla, vous avez des
plugins mobile.
Sinon, balisez la largeur de page dans le css ainsi que la largeur de
chaque colonne. Pour cela, ne mettez pas de valeur en px mais en %,
l'essentiel étant qu'au final votre body soit égal à 100%
Avatar
Une Bévue
Le 03/01/15 09:53, SAM a écrit :
non pas de xhr mais websocket.



connais pas mais ça doit être de fonctionnement équivalent je suppose.



éwuivalent, je ne sais pas, en fait j'interroge un serveur de base de
données.

mais seulement aux css.



Heu ... il faudra commencer par le html ! (à mon idée)



dans ce cas, c'est un autre dossier avec d'autres pages.

un redesign complet de l'interface.



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.

doit
permettre l'affichage "à l'ancienne par colonnes" comme celui en "mode
menu" sans doute plus favorable aux tous petits écrans.
(css "normales" pour ordi + css "conditionnelles et correctives" pour
petits écrans)

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" ?



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.
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.

pour la version tél mobile au lieu de 3 colonnes j'ai trois pages :
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é).
Avatar
Une Bévue
Le 03/01/15 20:12, Henry Monnier a écrit :
bonjour,
si vous travaillez avec des cms tels wordpress ou joomla, vous avez des
plugins mobile.
Sinon, balisez la largeur de page dans le css ainsi que la largeur de
chaque colonne. Pour cela, ne mettez pas de valeur en px mais en %,
l'essentiel étant qu'au final votre body soit égal à 100%



OK, merci bien, non je n'utilise ni joomla ni wordpress, c'est
"entiérement fait main" ;-).

donc avec body à 100 %, ce qui est mon cas je vais pouvoir tester "brut
de fonderie" et voir ce qui se passe.

ouais, ça marche tel quel...

les caractères sont un peu petit tout de même, mais j'arrive à naviguer
sur la page.

les butineurs Android (là je suis avec Google Chrome) ont un inspecteur
pour voir la console JS par exemple ?
Avatar
Une Bévue
Le 04/01/15 18:40, Une Bévue a écrit :
Le 03/01/15 20:12, Henry Monnier a écrit :
bonjour,
si vous travaillez avec des cms tels wordpress ou joomla, vous avez des
plugins mobile.
Sinon, balisez la largeur de page dans le css ainsi que la largeur de
chaque colonne. Pour cela, ne mettez pas de valeur en px mais en %,
l'essentiel étant qu'au final votre body soit égal à 100%



OK, merci bien, non je n'utilise ni joomla ni wordpress, c'est
"entiérement fait main" ;-).

donc avec body à 100 %, ce qui est mon cas je vais pouvoir tester "brut
de fonderie" et voir ce qui se passe.

ouais, ça marche tel quel...

les caractères sont un peu petit tout de même, mais j'arrive à naviguer
sur la page.

les butineurs Android (là je suis avec Google Chrome) ont un inspecteur
pour voir la console JS par exemple ?




voila ce que ça donne "brut de fonderie" :
<http://www.cjoint.com/15jv/EAetlWMrylV_screenshot_2015-01-04-19-00-12.png&gt;
Avatar
Pierre Zemmour
Le 04/01/2015 à 18:40, Une Bévue a écrit :
Le 03/01/15 20:12, Henry Monnier a écrit :
bonjour,
si vous travaillez avec des cms tels wordpress ou joomla, vous avez des
plugins mobile.
Sinon, balisez la largeur de page dans le css ainsi que la largeur de
chaque colonne. Pour cela, ne mettez pas de valeur en px mais en %,
l'essentiel étant qu'au final votre body soit égal à 100%



OK, merci bien, non je n'utilise ni joomla ni wordpress, c'est
"entiérement fait main" ;-).

donc avec body à 100 %, ce qui est mon cas je vais pouvoir tester "brut
de fonderie" et voir ce qui se passe.

ouais, ça marche tel quel...

les caractères sont un peu petit tout de même, mais j'arrive à naviguer
sur la page.

les butineurs Android (là je suis avec Google Chrome) ont un inspecteur
pour voir la console JS par exemple ?




La version mobile du butineur vaut la version classique ordinateur, sauf
si vous utilisez IE mobile pour Windowsphone.
Mais pour le coup des %, c'est bon, ça gère
Avatar
JC_Et
*Bonjour*, Le 02/01/2015 11:42, Une Bévue a écrit :

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



Il existe des sites pour tester l’affichage et comparer entre les
différents systèmes
quelques exemples
- http://www.pikock.fr/19/pi-responsive-design
- http://responsive.victorcoulon.fr/
- http://cybercrab.com/screencheck/

--
JC E.
Avatar
Une Bévue
Le 06/01/15 09:49, JC_Et a écrit :
Il existe des sites pour tester l’affichage et comparer entre les
différents systèmes
quelques exemples
-http://www.pikock.fr/19/pi-responsive-design
-http://responsive.victorcoulon.fr/
-http://cybercrab.com/screencheck/



super, merci beaucoup !
1 2 3 4 5