Construire un site fixe qui occupe l'écran de façon optimisée

Bonjour à tous,

Je réfléchis à la construction d'un site basé sur un affichage fixe des éléments principaux de design à l'écran. J'ai déjà vu ce genre de réalisation sur de nombreux sites, mais je souhaite aller plus loin, dans un concept que j'appelle "scroll lock", à savoir la suppression totale de la barre de défilement, aussi bien horizontale que verticale.

Mon idée consiste à construire un bloc graphique qui occupe tout ou la plus grande partie de l'écran de façon à naviguer en permanence sur un visuel fixe à l'écran... l'idée étant de conserver une totale ergonomie pour l'internaute dans un cadre variable (4/3, 16/10, 16/9).

Pour la question du cadre variable, je pense agir directement sur les fichiers sources (différents fichiers selon le ratio d'affichage...), pour des questions de proportions... mais les questions que je me pose sont liées à l'affichage :

Comment faire (au mieux) pour conserver certaines parties affichées à l'écran qui sont identiques pour plusieurs pages ?

Le fait est que les frames sont déconseillées...

j'ai vu par contre un certain nombre de réponses concernant l'utilisation du css et du php, en renommant des pages "enfants" en .php... sachant que l'idée reste pour moi de ne pas casser l'affichage par un rafraichissement qui n'a pas lieu d'être... en fait, j'y connais rien, mais j'ai soif

Par exemple, j'ai vu ce site qui m'esbrouffe totalement :

http://www.i-marco.nl/weblog/ ... je tiens à dire que ce que je cherche n'est pas là


J'aimerais en savoir plus.

Merci de votre réponse.

Pour être plus précis, je parle ici d'un changement de paradigme en ce qui concerne la publication internet, qui s'appuie sur la capacité d'affichage (en taille et en résolution) des écrans d'aujourd'hui...

If you see what i mean

Pour ceux que ça intéresse, merci d'entrer dans la bande.

zizoubazooka a écrit :

Par exemple, j'ai vu ce site qui m'esbrouffe totalement :

http://www.i-marco.nl/weblog/ ... je tiens à dire que ce que je cherche n'est pas là

Quel est l'intérêt de parler de ce site alors?

Je suis nouveau sur ce forum et je vois que ma réponse n'apparait pas (celle que j'ai faite à Tony)... alors je le redis publiquement :

Ce qui me plait dans ce site, c'est le fait que toutes ses parties fixes restent présentes à l'écran quand on active un lien. C'est ce que je veux obtenir mais en conservant un cadre fixe : tout se passe à l'écran et rien n'est en dehors du cadre.

Ce qui signifie qu'on doit garder les éléments fixes présents, sans qu'il soit besoin de les rafraîchir (je crois que c'est un effet du php... je n'y comprends pas grand chose, mais je pense que comme le php fonctionne au niveau du serveur, celui-ci ne répète pas l'opération de rafraîchissement de ce qui est déjà présent sur la page précédente... ai-je raison ?

Ensuite se pose la question d'un affichage à la fois en hauteur et en largeur... en tirant le meilleur parti du pourcentage... si quelqu'un a une idée

Bonjour,

C'est que tu m'avais envoyé un message privé plutôt que de répondre dans le sujet.

Pour changer le contenu d'une page sans recharger complètement la page, fais des recherches sur AJAX (javascript) et aussi sur JQuery et ses plugins. Voir http://jqueryui.com/demos/tabs/ et http://jquery.com/

Sinon le principe du site cité ainsi que de beaucoup vient du php où il est très facile de répéter tout ce qui est commun de page en page.

Ainsi on a souvent l’algorithme suivant pour chaque page du site ( Accueil, About .... )

Charge entete document()  
Affiche entete() 
Affiche menu_principal()
Affiche menu_contexte(pageid)
Affiche contenu(pageid)
Affiche pied de page()

Il suffit donc de faire une fonction php pour chaque partie commune

Ça c'était pour expliquer l'impression de rester dans la même page alors que ce n'est pas du tout le cas :
http://www.i-marco.nl/weblog/ n'est pas la même page que http://www.i-marco.nl/weblog/about.php même si visuellement il n'y a juste qu'une partie de la page qui change .... explore les codes sources tu comprendra de suite ....

Maintenant j'avoue ne pas supporter les sites à scrolling qui ne sont ni des forums ni des sites marchands ( un listing comparatif en colonne est dès fois bien pratique ... )
Le pire étant ces blogs où arrivé en bas de page tu n'a plus de menu de navigation ... les frames étaient quand même plus ergonomiques je trouve ...

@ Tony

Bien sur, il y a le jquery... mais je découvre la publication internet et toutes les complications liées au dynamisme de ce média. J'avoue même qu'à force de voir ici du javascript, là du jquery, de l'ajax, du php... j'en viens à me décourager
Maintenant, je vais regarder ton lien de plus près... merci.

@ Arialia

Je vais jeter un oeil un peu plus éclairé sur les 2 sources citées (que j'ai déjà regardées) en m'intéressant à la logique que tu as mentionnée... sans doute que ça va me faire avancer. En tout cas merci de ces conseils.

Ci-joint une pré-maquette, pas vraiment encore finalisée, de ce que je veux faire (si ça intéresse quelqu'un). Les 3 jpegs sont les 3 apects que pourra prendre le site, sachant que pour le dernier, il me reste encore à résoudre le problème de la page 2 qui prend la place de la page 1 quand on passe à la page 3, et ainsi de suite .

j'ai cliqué trop vite... voilà les images :

Je ne comprends pas, j'envoie toujours la même image
Modifié par zizoubazooka (07 May 2011 - 00:20)

Ça marche pas avec plusieurs images... tant pis
Modifié par zizoubazooka (07 May 2011 - 00:36)

image 3 (développement)






... je ne comprends pas pourquoi mes différents messages envoient tous la même image, la dernière pièce jointe ???
Modifié par zizoubazooka (07 May 2011 - 00:32)

Tout ça pour montrer que tout se passe à l'intérieur de l'écran dans une recherche d'ergonomie... Je suis bien d'accord avec toi, Arialia, à savoir que quand ce n'est pas nécessaire, je ne vois pas pourquoi on s'accroche à cette pratique d'étirer les pages en longueur... c'est ce que je cherche justement : tout avoir sous les yeux, avec quelques effets visuels (et sonores) qui sont déjà visibles quand on regarde les 3 jpeg.

Ce genre d'ergonomie était florissant : il y a 10 ans !

jb_gfx a écrit :
Ce genre d'ergonomie était florissant : il y a 10 ans !

Eh bien oui mais je regrette fortement cette époque pour ma part ... on a eu du progrès en visuel c'est indéniable depuis ... mais très peu voire même une régression en ergonomie.

Parce que se retrouver en bas de la page d'un site et ne plus avoir de menu pour naviguer ni l'identité du site .... ben moi je déteste ... il faut alors que le contenu soit vraiment accrocheur pour rester sur un tel site.

Par contre pour un site pour mobile tactile c'est différent : le scrolling est plus ludique et n'est pas gênant.

Par contre la vision comme un livre est sympa mais demandera surement du javascipt (pour feuilleter les pages) et du php pour préparer les pages en fonction de la place disponible/accordée , c'est beaucoup plus difficile que de faire des articles qui scrollent.

Pour des longs articles ma foi scroller n'est pas si gênant , c'est même assez naturel , ce qui est dommage dans les designs actuels c'est le scrolling de tout le reste du site ( entête et navigation )

Hello,

Arialia a écrit :

Eh bien oui mais je regrette fortement cette époque pour ma part ... on a eu du progrès en visuel c'est indéniable depuis ... mais très peu voire même une régression en ergonomie.

Une régression en ergonomie ? Je ne vois pas en quoi l'abandon des frames pourrait être une régression en ergonomie… Il va falloir argumenter, là

[edit : mais rien, à part le bon sens, ne t'oblige à renoncer aux frames : le doctype frameset est fait pour ça et existe toujours]

Arialia a écrit :

Parce que se retrouver en bas de la page d'un site et ne plus avoir de menu pour naviguer ni l'identité du site .... ben moi je déteste ... il faut alors que le contenu soit vraiment accrocheur pour rester sur un tel site.

Sur un site avec beaucoup de contenu, en effet, il est courant de prévoir un rappel du menu en base de page, voir un menu fixe qui suit la page (voir ici par exemple).

Je t'invite à lire cette discussion, à propos du défilement vertical.
Petit extrait :

Raphael a écrit :

[…]
le média Web à l'écran est un média non paginé.
Donc il est normal, attendu, logique,... de scroller sur un tel média. C'est même fait pour ça.

Pourquoi cette manie de torturer un média et tenter de le contraindre à des comportements non prévus ?

Quand on fait du print, on essaye aussi de rendre les liens cliquables ?

Pour revenir à la demande de zizoubazooka, vu la maquette que tu as prévu, il faudrait te poser la question de ce que tu vas faire lorsque, pour certaines pages, le volume de contenu ne rentrera pas dans la hauteur de ton bloc principal… Tu risque de te trouver rapidement coincé par ton design (ce qui est un comble !).

Ensuite, pour la question de la conservation des éléments de design commun à toutes les pages, je ne comprend pas le problème (et encore moins en quoi il s'agirait d'un « changement de paradigme » ) : la quasi totalité des sites internet se comporte comme ça, il suffit de répèter les éléments communs sur chaque page du site

Enfin, s'agissant de l'adaptation des éléments de la page aux dimensions du navigateur, tu peux jeter un oeil aux media queries css3 (mais ce comportement peut-être mis en place dans un deuxième temps).
Modifié par audrasjb (07 May 2011 - 14:57)

Arialia a écrit :

Parce que se retrouver en bas de la page d'un site et ne plus avoir de menu pour naviguer ni l'identité du site .... ben moi je déteste ... il faut alors que le contenu soit vraiment accrocheur pour rester sur un tel site.

position: fixed

Sur l'entête et le menu et le problème est réglé... pas la peine réinventer la roue.

Comme ça :

http://www.pixemedia.com/temp/header-fixed.html
Modifié par jb_gfx (07 May 2011 - 15:45)

Je suis bien d'accord mais beaucoup de sites oublient de le faire et ils sont de plus en plus fréquents.

Et je parlais plus du design que du côté réalisation

Je voudrais juste préciser un point de conception qui me paraît important, à l'appui de ce que dit Arialia :

Il est arrivé qu'on renonce à des conventions parce que la technologie ne le permettait plus : l'exemple qui me vient est l'abandon de la majuscule accentuée en typographie. En fait, c'est l'avènement de la machine à écrire qui a rendu impossible de respect d'un haut de casse accentué. Néanmoins, lorsque l'utilisation de l'ordinateur s'est généralisée, on a quand même conservé abusivement le principe des majuscules non accentuées (il suffit de regarder le paramétrage par défaut de word pour le constater).

Alors je peux comprendre que le scrolling ait eu un sens à une époque où les outils graphiques ne permettaient pas de faire mieux... et notamment sur internet.

Mais qui peut prétendre aujourd'hui qu'il est plus agréable de faire défiler un texte plutôt que d'avoir une pagination permettant de garder le fil de ce qu'on lit ?

Le principe du visuel que je me propose de réaliser, justement, reprend le principe de la lecture d'un livre, mais en mieux, à savoir qu'on a en permanence sous les yeux les 2 dernières pages visionnées. Ça ne sera sans doute pas simple à réaliser, comme le dit Arialia, mais loin d'être un principe archaïque ou ringard, ça me semble être au contraire quelque chose de novateur qui redorera l'image de la lecture sur un écran... alors, si ça intéresse des gens de réfléchir avec moi sur ce challenge, je suis preneur (de même que si j'atteins l'objectif, je ne manquerais pas de donner mes sources).

Mais je n'en suis pas encore là : pour l'instant, mon enjeu est la suppression de la scroll bar, aussi bien en horizontal qu'en vertical : tout avoir sous les yeux à n'importe quel moment de la consultation du site.

Merci de vos commentaires... et surtout merci à Arialia qui m'a apporté beaucoup par son premier commentaire... même si ça peut paraître dérisoire à certains

@ audrasjb

j'ai lu attentivement ta remarque :

Le premier point qui cite une discussion sur un soi-disant principe de pages web non paginées, je pense y avoir répondu dans mon message précédent...

Maintenant, pour ce qui est du maintien à l'écran des parties fixes... dont tu ne sembles pas voir la pertinence, je t'invite à consulter le lien que j'ai fourni dans mon message initial et de comparer ce travail avec ce qui se voit communément, à savoir une rupture d'affichage. Or, pour atteindre une vraie ergonomie de consultation dans un principe d'affichage plein écran, je pense que ce qui doit demeurer à l'écran ne doit pas être effacé... ne serait-ce qu'une seconde.

Enfin, c'est sur que le challenge d'avoir un contenu de bloc qui dépasse mon affichage n'est pas simple à gérer... alors si t'as une idée