Discussion :

[Artemus24]

Bonjour à toutes et à tous.

J'ai plus un problème d'organisation pour concevoir mes pages pour les mobiles ou les tablettes qu'un problème de conception.
Et du coup, je ne sais pas comment procéder pour ne pas trop en faire dans l'organisation du 'Responsive Web Design' d'une simple page.

Je rencontre trois problèmes qui sont récurrents à tous les développeurs.

1) pour tester mes pages, j'utilise 'Responsinator' que l'on trouve à ce lien.
Plusieurs modèles de tablettes et de mobiles y sont présentés avec des tailles différentes.
Cela se résume au tableau suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
+---------------------+----------------------+
|                     |     Largeur pixel    |
|   marque du mobile  |----------------------|
|                     | Portrait | Landscape |
+---------------------+----------+-----------+
| Crappy Android      |     240  |      320  |
| iPhone 5            |     320  |      568  |
| iPhone 6            |     375  |      667  |
| android (nexus 4)   |     384  |      600  |
| iPhone 6 Plump      |     414  |      736  | 
| ipad                |     768  |     1024  |
+---------------------+----------+-----------+

Je ne vais pas faire un cas particulier pour chaque largeur qui se présente ici, il y en aurait de trop à gérer.

Donc ma question concerne le choix des largeurs que vous choisissez de traiter dans vos pages WEB ?

2) pour mon site, j'utilise un gabarit sur deux colonnes, dont l'une contient des liens vers mes autres pages, et l'autre le corps de mon sujet.
Quand les dimensions du mobile sont assez importantes, j'arrive à conserver le gabarit sur deux colonnes.
Mais cela devient vite illisible quand je me retrouve sur des largeurs comme celui du 'crappy android' dont les dimensions sont 240 X 320.

Comment faites-vous pour gérer vos pages dans une dimension aussi petite ?
Et surtout quel est le gabarit que vous choisissez de faire ?

3) j'ai un problème de taille entre mes caractères (font-size) et la largeur de mes colonnes (width).
Il faut dire que la taille, je l'utilise en pixel et que la largeur, je l'utilise en %.

Comment faire pour conserver les mêmes proportions entre la police de caractères et la largeur de mes colonnes ?

Merci de m'avoir lu.
@+

[ABCIWEB]

Tout dépend de ce que tu fais comme applications et si c'est spécialement ciblé pour les mobiles, mais dans les cas courants on fait l'impasse sur les résolutions inférieures à 320px. D'ailleurs il me semble que le module "mobile friendly" de google teste pour une résolution minimale de 320px de largeur.

Pour le texte utilise des "em" plutôt que des pixels.

[Artemus24]

Salut ABCIWEB.

Merci de votre participation !

Tout dépend de ce que tu fais comme applications et si c'est spécialement ciblé pour les mobiles, ...

Au départ, mon site a été conçu pour les ordinateurs et non pour les tablettes, ni pour les mobiles.
Je me suis intéressé au RWD par nécessité et ce, à cause du référencement et plus particulièrement à cause de 'Google Webmasters', qui dans la rubrique 'ergonomie mobile', j'ai eu plusieurs erreurs.

... mais dans les cas courants on fait l'impasse sur les résolutions inférieures à 320px.

Ok, je comprends. Donc la plus petite résolution est 320px.
Et quand est-il des autres valeurs où l'on fait un '@media screen' dans la feuille de style ?

Pour le texte utilise des "em" plutôt que des pixels.

J'ai déjà essayé les 'em' mais ça ne répond pas à mon besoin. Ou alors, je me suis pris comme un manche. Avez-vous un exemple à me donner ?

J'ai besoin de définir dans le cas général, une taille de police.
Puis pour chaque subdivision de mes '@media screen', j'aimerai avoir d'une part une taille qui reste proportionnelle à la largeur et d'autre part que le positionnement du texte reste toujours le même dans la subdivision. J'ai fait une recherche sur google, et j'ai trouvé le format 'vw' que je ne connaissais pas du tout.
J'ai fait quelques exercices pour voir comment cela se comporte et il me semble que cela correspond à mon attente.

J'ai oublié de vous parler des images.

4) j'ai un double problème avec les images.
D'une part, sur un ordinateur, la vitesse de téléchargement est tout à fait acceptable.
Comme je n'ai pas de mobile, ni de tablette, je ne peux pas me rendre compte du temps de téléchargement.
Est-ce un problème si je garde les mêmes images de la partie ordinateur pour les mobiles et les tablettes ?

D'autre part, pour les mobiles, j'ai vu des images de plus petites tailles, c'est-à-dire adaptées à la résolution des écrans.
Dois-je tenir compte de ce genre de problème qui résoudrait mon problème de téléchargement ?
Par contre, j'ai essayé sans succès l'attribut 'srcset'. Avez-vous un exemple de fonctionnement ?

Et en ce qui concerne mes autres questions ? J'aimerai avoir des conseils sur la bonne démarche à entreprendre.

@+

[ABCIWEB]

En général on ne fait pas un taille de police proportionnelle à la largeur, mais suffisamment lisible quelque soit la largeur.

Pour les images, soit tu les redimensionne dynamiquement avec javascript ou par l'intermédiaire d'une feuille de style en css, soit tu charge les images en fonction du périphérique. La deuxième solution est plus optimisée surtout si les images sont nombreuses et qu'au final tu gagnes beaucoup de ko pour le chargement de ta page. Faut voir en fonction de l'optimisation que tu veux faire, suivant les cas on préfèrera la première solution plus simple si le gain est inférieur à 50 voire 100 ko si l'utilisation principale n'est pas sur portables.

[Artemus24]

Salut ABCIWEB.

Tes réponses ne m'aident pas du tout. Je vais détailler un peu plus mes questions.

1) je me pose juste la question du nombre de largeurs que je dois traiter afin de tout couvrir (moniteur, tablette et mobile).
Si je reprends mon tableau, et si j'ajoute aussi le cas de l'iphone 3 & 4 que je n'ai pas mis, je me retrouve avec douze tailles à gérer.
Qui sont : 1024, 768, 736, 667, 600, 568, 480, 414, 384, 375, 320 et 240.

Je ne vais quand même pas faire un '@media screen' pour chacune de ces valeurs, il y en a de trop.
Ce que je désire savoir, ce sont les valeurs que vous utilisez le plus souvent pour gérer le 'Responsive Web Design' ?

Si je prends les deux sites suivants qui donnent différentes tailles :
--> http://mydevice.io/devices/
--> http://screensiz.es/phone

et en faisant un résumé, on trouve :
--> smart phone
==> portrait : 504, 414, 412, 400, 390, 384, 375, 360, 346, 320.
==> paysage : 800, 768, 768, 720, 667, 640, 604, 600, 598, 568, 533, 504, 480, 390, 346.

--> tablette
==> portrait : 800, 768, 720, 604, 600, 480.
==> paysage : 1366, 1280, 1024, 960, 800.

--> moniteur (desktop)
==> 2560, 1920, 1800, 1700, 1600, 1440, 1366, 1080, 1050, 900, 800, 768.

J'ai un semblant de réponse dans cette page : http://stackoverflow.com/questions/6...let-and-mobile

si je prends l'exemple de cette page : http://webdesignerwall.com/tutorials/css3-media-queries
l'auteur ne traite que trois cas : 'Large size', 'Medium size', 'Small size', sans préciser en terme de pixel à quoi cela peut correspondre.
Son gabarit de départ est sur trois colonnes ('large size'), puis passe à deux colonnes ('Medium size') et termine à une colonne ('Small size').

Tout ça ne m'aide pas vraiment.

Si je prends l'autre site, voici ce qui est indiqué : Smartphones (320 à 480), tablettes (481 à 767), petits écrans (768 à 979) et Ordinateurs (980 à 1199), Écrans larges (1200 et plus).

Si je fais un résumé de toutes ces tailles, je choisirais de faire : Mobile (<=480px), Tablet (<=800px), Desktop (<=1200px), Huge (>1200px).

Qu'est-ce que vous pensez de cela ?
Plus je lis les sujets consacrés à la largeur, et plus chacun y va de sa propre définition, sans avoir consensus sur le bonne usage.
Au final, on a l'impression que personne ne travaille sur les mêmes écrans, et pourtant c'est le cas.

2) Que dois-je faire pour une taille inférieure à 320px ?

D'ailleurs il me semble que le module "mobile friendly" de google teste pour une résolution minimale de 320px de largeur.

Autrement dit, je ne dois pas traiter et c'est votre réponse. D'ailleurs, c'est le même propos en ce qui concerne IE 6.0.
Faire l'impasse n'est pas une solution. Et dire qu'ils doivent passer à un navigateur plus récent, ne répond en aucune façon à l'accessibilité pour tous.
Et je ne parle même pas de l'accessibilité pour les mal-voyants.

Pour les petites largeurs, je passe à une colonne. Mais est-ce que je dois mettre la colonne contenant le sujet, avant ou après celle contenant les liens ?

3) J'ai bien compris que l'usage des pixels ne convenaient pas, d'où mon problème.

Pour le texte utilise des "em" plutôt que des pixels.

Mais le 'em', comme le pixel, ne respectent pas non plus la flexibilité, si je ne me trompe pas.

En général on ne fait pas une taille de police proportionnelle à la largeur, mais suffisamment lisible quelque soit la largeur.

Mais la page n'est jamais redimensionnée, juste adaptée en fonction du périphérique.
Je pense que mettre 'vw' est plus adapté à ce que je veux faire.
Autrement dit, en repartant sur mes intervalles, je conserve d'une part les mêmes proportions (taille de la police vis-à-vis de la largeur), voire le même positionnement du text dans la ou les colonnes et d'autre part le texte reste lisible.
C'est pourquoi le choix des intervalles est cruciales.

En quoi cette façon de procéder n'est pas correcte ? Je ne comprends pas bien en quoi un dimensionnement fixe (pixel ou em) est meilleur qu'une adaptative (vw) ?

4) gestion des images.

Pour les images, soit tu les redimensionne dynamiquement avec javascript ...

Je ne voie pas l'intérêt d'utiliser javascript pour faire cela.

... ou par l'intermédiaire d'une feuille de style en css ...

Je n'ai qu'une feuille de styles par type de page. Le redimensionnement de mon image se fait en mettant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
max-width	: 100%;
height	: auto;

... soit tu charge les images en fonction du périphérique.

J'ai essayé d'utiliser l'attribut 'srcset' sans succès. La multiplicité des images en fonction des périphériques va vite devenir ingérable.

La deuxième solution est plus optimisée surtout si les images sont nombreuses et qu'au final tu gagnes beaucoup de ko pour le chargement de ta page.

Je n'ai que deux photos dont la taille est de 151Ko (164X314) et 13Ko (64 X 64).
Les images vont de 104Ko pour la plus grosse à 85Ko, 76Ko, 69Ko et en moyenne cela tourne entre 20Ko et 60Ko. Est-ce volumineux pour des mobiles ?
Sinon, j'ai aussi des icônes, des flèches, des points, de l'ordre de 1Ko. Je ne me rends pas bien compte si c'est volumineuses ou pas.
Le temps de téléchargement est instantanés sur mon ordinateur.

Faut voir en fonction de l'optimisation que tu veux faire, suivant les cas on préfèrera la première solution plus simple si le gain est inférieur à 50 voire 100 ko si l'utilisation principale n'est pas sur portables.

Tu parles bien d'un redimensionnement dynamique avec javascript. En quoi cette solution est préférable ?
Je ne comprends pas bien où est l'avantage de cette technique pour une optimisation du téléchargement.

@+

[Invité]

Bonjour,

Tu te poses beaucoup de questions.

Les réponses les plus simples sont souvent les meilleures. Mais ne t'attend pas à des réponses toutes faites, ni "universelles".
Cherche plutôt des réponses, et fais-toi TA PROPRE OPINION.

D'autant que tout ça dépend essentiellement de ton CHOIX de design (dont on ne sait rien !).
L'intérêt principal du "responsive design" est de permettre d'adapter la mise en page et le contenu en fonction du média (phone, tablet, desktop), pour une LECTURE FACILE.

Pour les breakpoints, tu peux choisir : 1024, 768, 480. Ou 1024, 640. Ou.......

• A toi de voir quand passer de 2 à 1 colonne pour que ça reste agréable à lire.

Pour les photos : optimiser signifie surtout adapter la taille réelle en fonction de la taille d'affichage.

• Si la taille d'affichage ne dépasse pas 640px, inutile de l'enregistrer à 3000px !
• Pour des images de fond par exemple (les plus lourdes) : enregistrer plusieurs images, à 1920px, 1024px, 640px de large par exemple, et afficher celle correspondant au media.

N.B. Si tu ne veux pas te prendre trop la tête : Bootstrap

[Artemus24]

Salut jreaux62.

Merci de ta participation.

Les réponses les plus simples sont souvent les meilleures.

Ca, c'est la réponse de celui qui sait comment faire et qui a de l'expérience dans le webdesign, ce qui n'est pas mon cas.

Mais ne t'attend pas à des réponses toutes faites, ni "universelles".

Je ne cherche pas des réponses toutes faites ou encore une solution passe partout.
Je cherche le savoir-faire de ceux qui ont de l'expérience. Est-ce trop demandé de communiquer votre expérience ?

Cherche plutôt des réponses, et fais-toi TA PROPRE OPINION.

D'accord ! Je comprends que je dois me démerder tout seul et que je ne dois plus vous déranger à l'avenir avec mes questions.

D'autant que tout ça dépend essentiellement de ton CHOIX de design (dont on ne sait rien !).

J'ai précisé que c'est un affichage sur deux colonnes. Vous pouvez consulter dont les références sont en bas de chaque message.

Pour les breakpoints, tu peux choisir : 1024, 768, 480.

Je ne savais pas que cela se nommais ainsi. J'ai opté pour : 1200 - 800 - 480. C'est presque pareil.

optimiser signifie surtout adapter la taille réelle en fonction de la taille d'affichage.

J'avais bien compris qu'il s'agissait d'adapter les dimensions de l'image en fonction du périphérique.

Si la taille d'affichage ne dépasse pas 640px, inutile de l'enregistrer à 3000px !

Je ne comprends pas trop votre remarque. La largeur de ma plus grande image est de 725 pixels.
Ma question est de savoir ce que je dois faire si la largeur de mon périphérique est de 320 pixels ?
Soit je crée une nouvelle image à une dimension réduite, et par voie de conséquence, le temps de téléchargement se trouvera réduit.
Ou bien, on s'en fout car l'image sera redimensionnée automatique et le temps de téléchargement est rapide car la volumétrie des images est faible.

Si je pose ce genre de question, c'est que je ne sais pas évaluer le temps acceptable d'un téléchargment.

Pour des images de fond par exemple (les plus lourdes) : enregistrer plusieurs images, à 1920px, 1024px, 640px de large par exemple, et afficher celle correspondant au media.

L'image de fond est juste une mosaïque. Ce n'est pas ce qui est le plus lourd au téléchargement : 26Ko.

@+

[Invité]

Bonjour,
au lieu de répondre ligne par ligne à ce qu'on t'écrit, essaie de prendre du recul pour avoir une vue d'ensemble.
Et réfléchis... au lieu de brasser de l'air...

1) pour tester mes pages, j'utilise 'Responsinator' que l'on trouve à ce lien.

Dans ce cas, tu es capable TOUT SEUL, PAR TOI-MEME, de constater le rendu selon différentes résolution !

Où est ton problème ?

A oui ! Tu ne sais pas coder.
Du moins, on n'a encore rien vu...

Si tu veux des conseils personnalisés, montre au moins ce que tu as déjà fait, et si possible TON SITE (ou une copie d'écran).

Salut ABCIWEB.
Tes réponses ne m'aident pas du tout...

D'accord ! Je comprends que je dois me démerder tout seul...

CONSEIL :
Commence par être plus aimable avec ceux qui prennent le temps de te répondre.

[Artemus24]

Salut à tous.

Commence par être plus aimable avec ceux qui prennent le temps de te répondre.

Je suis aimable, mais j'ai l'impression de perdre mon temps ! Je pose des questions et vous n'y répondez pas.

Et réfléchis... au lieu de brasser de l'air...

La politesse n'est pas votre fort. Et maintenant, on devient condescendant !

Bon, j'en reste là, vu que vous n'êtes pas décidez à m'aider. Merci quand même d'avoir pris de me lire.

@+

[Invité]

Ne confonds pas.

Ce n'est pas qu'on ne veut pas te répondre.

C'est que tu ne comprends pas les réponses.

[friendofweb]

Faut pas se décourager...