Bonjour,
je cherche a rendre mon site le plus accessible possible pour les mobiles.
j’ai donc des choix a faire dont le layout
j’aimerais qu’on m’explique la différence entre
Layout fluide : s’adaptant à la largeur de l’écran
Layout mixte : partie centrale fluide et colonnes latérales fixes
j’ai du mal a comprendre la différence, malgré l’explication du site escal
Chacun peut donc choisir sa mise en page mais je conseille d’utiliser une mise en page fluide en indiquant une largeur maximum. On profite ainsi du « Responsive Web Design » sans avoir un site trop large sur les grands écrans, ce qui peut gêner la lecture avec des lignes trop longues
cela veut il dire que le layout mixte ne bénéficie pas du « Reponsive »
merci
Le layout mixte n’a que la colonne principale responsive, la ou les colonnes latérales ne sont pas responsives
Teste sur ton site en reduisant la fenêtre du navigateur et tu comprendras rapidement la différence.
Bonsoir - Labvakar,
Pour *« Un site le plus accessible possible aux mobiles. »*Le layout ne fait pas grand chose pour rendre un site accessible aux mobiles, comme un courriel dit « adaptatif » lisible sur smartphones…
Le layout affiche, 1, 2, ou 3, … colonnes selon la dimension des écrans.
De mon point de vue, le principal travail pour faciliter la navigation sur mobiles, consiste d’abord à réfléchir au parcours du doigt et de l’œil sur l’écran :- entre le menu, les titres des articles,le texte
- les facilités à remplir un formulaire,
- les facilités à cliquer sur un lien, sur un bouton, …
- chercher …
Cela réclame principalement deux qualités : visibilité et lisibilité**.**On peut avoir le meilleur layout possible,
- si les caractères s’affichent en couleur pastel gris clair sur un écran de smartphone bien éclairé, on ne les verra pas !
-
si les caractères s’affichent trop petits pour un affichage sur un écran de smartphone bien éclairé, on ne les verra pas !
- Si les boutons de liens cliquables sont invisibles trop petits, personne ne cliquera !
- …
Pour être vus et lus, les textes doivent etre suffisamment grands et contrastés. C’est bien plus important que le choix d’un layout.
Sur la route, que ce soit sur un layout autoroute, un layout route départementale ou nationale, une layout communal, les panneaux du code de la route qui nous orientent, quelles que soient les largeurs de routes, sont tous écrits en caracteres de couleur noir, bien gras et bien grands, visibles du plus loin possible !
C’est pareil pour un site web, comme pour un livre imprimé par Gutenberg : Noir sur Blanc, et suffisamment grand et gras pour etre vu !
@ +
merci pour les explication mais ça n’a pas vraimment répondu a la question
toutefois Jc m’a expliqué par l’exemple
pour revenir a ton message
okay ça c’est fait … ouep déjà dit plus haut une dimension en pixel pour le théme grand m’arrangerais
okay j’ai testé
j’avoue que je voie aucune différence mais c’est normal, cela est du a ma config escal
sur une autre config, on voie bien la différence
donc pour mon site cela n’a aucune importance quand au choix du layout mixte ou layout fluide
puisque je n’utilise pas les colonnes
Entre les lignes …
Escal permet d’attribuer des couleurs et de régler ces couleurs globalement. On peut tout régler dans en matière de taille de caractères, de polices, de couleurs, etc … et ainsi on surcharge ESCAL La difficulté des tailles de caracteres, c’est de mettre en place un système qui varie selon les tailles d’écrans
Lire : https://www.creativejuiz.fr/blog/veille-technologique/taille-police-en-fonction-largeur-ecran-viewport
CSS3 à la rescousse : ViewportIl existe une unité encore peu connue car prise en charge par nos navigateurs depuis peu de temps, il s’agit des unités relative au viewport.
Pour comprendre ce qu’est le viewport, je vous invite à lire cette article de Raphaël Goetter : Comprendre le viewport dans le Web mobile.
**Pour résumer, nous allons proposer un corps de texte qui dépend de la largeur de la fenêtre du navigateur.**Si votre site internet se destine à un public utilisant les derniers navigateurs, vous pouvez utiliser les valeurs en viewport pour les polices.
Le viewport correspond à la résolution du périphérique que vous utilisez.
Il est possible de paramétrer la taille de la police avec 2 unités liées au viewport : viewport-width, qui se base sur la largeur que peut afficher l’écran, et viewport-height, qui est liée à la hauteur.
Pour ces 2 unités de mesure, le rapport est le même : 1 unité correspond à 1% de la largeur ou de la hauteur du viewport.
Il existe aussi les unités vmin et vmax, qui prennent le plus petit ou le plus grand entre la largeur et la hauteur, ce qui permet de tenir compte des différentes orientations possibles pour un smartphone ou une tablette.
https://www.journaldunet.fr/web-tech/developpement/1202405-comment-gerer-la-taille-des-caracteres-en-responsive-design/
h1 { font-size: 5.9vw;}
h2 { font-size: 3.0vh;}
p { font-size: 2vmin;}
etc