WebSite X5Help Center

 
D. BREUVART
D. BREUVART
User

Différence adaptabilité entre écran ordi et smartphone  fr

Auteur : D. BREUVART
Visité 1101, Followers 1, Partagé 0  

Bonjour à tous 

Je remarque toujours une différence entre la facon dont je dispose mes éléments dans website (etape 2 parametre du modele  Header - de 480 px) et ce que je vois sur mon telephone une fois le site publié.

Je dois toujours déplacer les elements (images textes... voir PJ ) hors de la zone définie  pour que ca fonctionne. Pourquoi ce souci ?  

et en fait, suivant le type de telephone (Iphone ou android) ca ne s'affiche pas de la meme façon. Bref je dois jongler entre deux pour que header et footer soient à peu pres centrés quelque soit le telephone !

merci de vos lumières, j'espere que vous comprenez ce que je veux dire

Dom

Posté le
10 RéPONSES - 2 UTILE
D. BREUVART
D. BREUVART
User
Auteur

PJ pardon !

Lire plus
Posté le de D. BREUVART
JiPeR 48
JiPeR 48
Moderator

Salut Dom,

Tout peut dépendre, sans doute, des différents navigateurs utilisés par les téléphones ? Chez moi le menu hamburger est légèrement tronqué sur certaines pages, et entièrement visible sur d'autres. 

Je crois me souvenir d'un sujet où il était indiqué que l'ajout d'un point sur une des résolutions permettait un bon affichage, mais je n'arrive pas à le retrouver. Mais sans garantie car je ne me souviens plus du détail précis du sujet en question. 

Si je le retrouve, je passerai te l'indiquer. Sinon nous nous en remettrons au Support Incomedia dès le début de la semaine prochaine.

@Suivre,

J.P.

Lire plus
Posté le de JiPeR 48
Axel  
Axel  
User

Par défaut il y a de mémoire 4 points différents prédéfinis.

Il faut peut être comme le dis Jipé en ajouter un ou encore modifier la definition du dernier point qui représente les mobiles.

Le dernier point doit être utilisé  pour les mobiles si la définition de l'écran est inférieure à celle configurée dans le logiciel. Peut être que en augmentant la taille du dernier point alors les différents types de téléphones entrent dans cette même catégorie. cela peut se jouer à quelques pixels sur la taille de l'écran.

Enjoy !

Axel

Lire plus
Posté le de Axel  
D. BREUVART
D. BREUVART
User
Auteur

coucou

oui je pense que la taille définie par défaut dans website5 pour la derniere taille n'est pas bonne  : il indique  - de 480 px or apparemment ca ne correspond pas aux standards, bref il faut jongler et trouver une taille qui répond le plus possible aux smartphones actuels : Axel, une idée de taille idéale ?

Sans confondre entre taille et résolution d'un telephone portable, j'ai trouvé ces quelques tailles sur un site qui traite de la question : http://www.creation-spip.ch/les-tailles-d-ecrans-et-le-responsive-design

 Intermédiaires entre différentes tailles d’écrans.

  1. 320px : Petits téléphones d’écran de résolution 480x320 en mode portrait.
  2. 480px : Smartphones moyens, ou petits téléphones en orientation paysage.
  3.  600px : Tablettes en portrait, iPad, e-readers, téléphone de résolution 800x480 en orientation paysage.
  4. 801px : tablette, iPad en orientation paysage, laptops de basse résolution.
  5. 1025px : Grandes tablettes en orientation paysage, laptops et desktops courants.
  6. 1281px : laptops et desktops de haute résolution.

D'autres part... de plus en plus de clients me demandent un site orienté m-commerce. Notamment celui que je suis en train de faire : ternoisfrites.fr

en effet sur ce type de site, ce sont majoritairement des gens (plus ou moins jeunes) qui passent commande ou plutot réservent (puisque pas de paiement en ligne pour l'instant) leur repas juste avant d être livrés (évite l'attente pour une pause repas de plus en plus courte). 

Dans l'idéal ce serait presque une appli qu il faudrait ou en tout cas un site m-commerce
http://www.creation-spip.ch/passer-au-m-commerce

Ma question : est ce que website 5 se pose cette question ?

Website 5 envisage le developpement de ce type d'évolution ?

sur cette question existancielle... bon dimanche, vous avez 4 heures et pour les dev : 1 semaine !

a+

Dom

Lire plus
Posté le de D. BREUVART
Axel  
Axel  
User

Hello Dominique

Si pas possible de faire une taille qui conviendrait à tous les téléphones (et cela ne fonctionnera pas à 100% bien sûr), alors je suggère d'ajouter différents points en fonction de ce que tu as trouvé (320px, 480px, 600Px)... ainsi tu peux courvir le maximul de téléphones... mais c'est un problème infini car les télphones évoulent tous les jours... 

Il faut trouver le juste milieu...

Et si tu ajoutes x points dans Website celui augmente aussi la configuration des headers, footers pour chaque definition.

Nota: Et j'avais remarqué que par exemple que l'image du logo dans le header est toujours de la même taille pour chaque point de rupture... Il n'est pas possible de changer sa taille pour chaque point mais juste la position... donc à un moment donné l'image du header de base ne peut pas s'adapter au téléphone car trop grande....Il faut donc réduire celle du header principal qui dans ce cas devient trop petite pour le header principal mais bien pour un téléphone...

Enfin moi j'ai pas trouvé comment changer la taille des images ou texte en fonction des points de rupture... 

Enjoy

Axel

Lire plus
Posté le de Axel  
FABRE Danielle
FABRE Danielle
User

Bonjour à Tous,

Effectivement tout dépend de la résolution du média utilisé.

Vous avez raison, il faut ajouter un point de rupture inférieur à celui proposé par le logiciel, de type 320.

Si on reste en 480 il faut positionner les objets plutôt vers la marge de gauche et ne pas hésiter à tester dans un navigateur en rétrécissant la fenêtre au max.

En complément du site indiqué par Dominique, en voici un qui montre en temps réel les résolutions les plus utilisées en France et partout dans le monde https://gs.statcounter.com/screen-resolution-stats/all/france

@ Axel, je n'ai pas de problème pour redimensionner les images (logo) dans les définitions inférieures, ou titres.... (voir exemple en PJ). Ne pas omettre pour les titres de cocher l'option

Pour les autres objets comme Texte, s'ils sont trop grands, il faudra les cacher dans les définitions inférieures et recréer d'autres objets d'une plus petite taille (police...)

A moins que je n'aie pas compris le problème ?

Bonne journée.

Danielle

Lire plus
Posté le de FABRE Danielle
D. BREUVART
D. BREUVART
User
Auteur

pr Axel

"Et j'avais remarqué que par exemple que l'image du logo dans le header est toujours de la même taille pour chaque point de rupture... Il n'est pas possible de changer sa taille pour chaque point mais juste la position... donc à un moment donné l'image du header de base ne peut pas s'adapter au téléphone car trop grande....Il faut donc réduire celle du header principal qui dans ce cas devient trop petite pour le header principal mais bien pour un téléphone..."

En effet ce que tu dis est vrai. Mais dans ce cas la solution trouvée est : je masque le gros logo de la version destop pour les versions inférieures et j importe à nouveau le logo que je rends plus petit (avec les ancres) pour adapter les versions tablette et telephone

je vais donc creer une version supplémentaire à 320 sur tous mes sites

Bonne journée bonne semaine à tous

dom

Lire plus
Posté le de D. BREUVART
D. BREUVART
D. BREUVART
User
Auteur

A Danièle : Je fais exactement comme toi !! sauf que tu es plus claire que moi !!

Pour les autres objets comme Texte, s'ils sont trop grands, il faudra les cacher dans les définitions inférieures et recréer d'autres objets d'une plus petite taille (police...)

Je ne pense pas qu il y ait une autre solution

dom

Lire plus
Posté le de D. BREUVART
FABRE Danielle
FABRE Danielle
User
D. BREUVART
je vais donc creer une version supplémentaire à 320 sur tous mes sites

Coucou Dom,

Ou alors tu te contentes en 480 de disposer tes objets en laissant une marge suffisante à droite... C'est ce que je fais en général.

Danielle

Lire plus
Posté le de FABRE Danielle
D. BREUVART
D. BREUVART
User
Auteur

Bonjour Danielle et tous,

Oui je vais laisser à 480 et faire comme tu dis . J'ai essayé d'ajouter la taille 320 mais ca ne va pas

merci à tous

dom

Lire plus
Posté le de D. BREUVART