[PRO] Kanangart.com Look, mum, no flash !

Bonjour tout le monde,
Un petit site que je viens de réaliser, sans Flash (sauf le lecteur youtube), mais avec jQuery.
Je suis particulièrement fier du redimensionnement de la fenêtre, et des effets CSS3, comme le masque de transparence en dégradé sur les listes d'image ou vidéo (visible que sur Chrome et Safari).
Dans l'ensemble, si vous voulez bien en profiter, il vous faut Chrome ou Safari. Ca passe sous Firefox, mais il manque des trucs, et sous IE8, il en manque encore plus.
J'ai pas eu le temps de tester IE9 et opéra, vous me direz.

Il manque encore un peu de boulot, surtout pour avoir une adresse différente par page.
Bien sûr, il n'est pas accessible, pas dégradable, ni valide. Mais toujours plus qu'un site en flash quand même.

Merci de vos commentaires.

http://www.kanangart.com
Modifié par mouloud (07 Jan 2011 - 17:37)

Je n'ai pas le temps de dire grand chose, mais un truc qui me choque en entrant sur le site c'est que j'arrive sur une page où je ne peux rien faire ! Une image en plein milieu et un menu dans le bas de la page qui n'a aucun effet puisque non cliquable !

Ça c'est pour la première impression puisque j'ai compris par la suite que je pouvais descendre dans la page pour voir arriver "english" -"français".

J'ai pourtant une résolution des plus habituelles (1280x800), la première chose à revoir serait donc de remonter tout ça de 100-200 pixels.


Au passage, j'ai bien rigolé en voyant "441.812px", tu peux donc découper un pixel en 1000 ?

Sinon mis à part ça c'est sympa mais sans plus, la navigation est vachement perturbée par l'arrière plan qui empêche de lire le texte.

Bon peut être que c'est normal vu tes remarques sur safari et chrome, mais je suis sous firefox et je ne trouve la navigation assez dérangeante.

Pas du tout normal, ce que tu me raconte... Tu peux me donner la version de ton Firefox et la version de ton système ?
Merci !

Edit : laisse béton, j'ai trouvé. Je corrige tout ça, et je relance le fil.
Modifié par mouloud (07 Jan 2011 - 20:48)

Bonjour,

Sans Javascript, aucun contenu n'est accessible. Ça risque d'être un énorme frein au référencement et pour ceux ayant désactivé Javascript pour des raisons de sécurité ou parce qu'ils habitent sur un cimetière indien.

Edit : En relisant ton premier message, je me rends compte que tu es déjà au courant.
Modifié par Tony Monast (07 Jan 2011 - 22:53)

En fait, au départ, le client voulait un site en flash. Pas accessible, ni référençable. Mais comme le site n'est destiné qu'à quelques dizaines de clients et prospects connus à l'avance, et qu'il ne veut absolument pas que son site soit référencé, ce n'est pas un problème.
J'ai réussi à répondre à son cahier des charges sans utiliser flash (parce que j'aime pas flash). C'est ce que je voulais vous montrer (d'où le titre).
Et j'ai réussi à rendre le site beaucoup plus accessible que du flash. Regarde-le sans javascript ni css, tout le contenu est là, largement accessible.
Il faut encore que j'évacue le javascript dans un fichier externe, et je ne devrais pas avoir trop de mal à valider le code de la page.

j'ai pas compris la référence au cimetière indien ?

mouloud a écrit :
Regarde-le sans javascript ni css, tout le contenu est là, largement accessible.

Sans Javascript ET sans CSS, effectivement le contenu est là, mais l'idéal serait que le contenu soit là aussi Sans Javascript ET avec CSS.

mouloud a écrit :

j'ai pas compris la référence au cimetière indien ?

C'était de l'humour. Certaines personnes désactivent Javascript pour des raisons de sécurité ou pour des raisons farfelues, d'où le cimetière indien. C'est vendredi, on a le droit de dire des conneries.

Je pourrais le faire pour l'amour de l'art, mais comme ce n'est pas dans le cahier des charges, j'aurais du mal à convaincre le client de payer pour ça.
On est quand même sur un site dont le but principal et de montrer des vidéos youtube des lapins crétins. Le public pour ça habite rarement sur un cimetière indien

Non, par contre, ce qu'il faut que je mette en place, c'est la possibilité de mettre des signets page par page, voir la possibilité d'utiliser le bouton back du navigateur.

Et avant ça, il faut que je travaille l'ordre de chargement des images, parce que là, lors de la première visite, les pages s'affichent avec plein d'éléments manquants, ce qui nuit beaucoup à leur lisibilité.
Pourtant, j'ai déjà bossé, je sais pas si vous avez regardé le poids du site, y'a 1MO juste pour l'accueil, et ça monte à plus de 3MO avec les pages derrières. Un site en flash du même poids mettrait beaucoup plus de temps que ça à se charger...

pixelb a écrit :

J'ai pourtant une résolution des plus habituelles (1280x800), la première chose à revoir serait donc de remonter tout ça de 100-200 pixels.

En fait, j'avais pas testé sur les écrans panoramiques (enfin si, mais pas en plein écran). Si tu remets ta fenêtre dans un ratio normal, le choix de la langue apparaîtra. Mais c'est clair qu'il faut que je gère les formats plus allongés. En attendant, j'ai déjà rajouté le lien sur le simili-menu.

a écrit :

Au passage, j'ai bien rigolé en voyant "441.812px", tu peux donc découper un pixel en 1000 ?

Où tu as vu ça ? Il me semblait avoir fait des arrondis partout...

a écrit :

Sinon mis à part ça c'est sympa mais sans plus, la navigation est vachement perturbée par l'arrière plan qui empêche de lire le texte.

C'est le temps de chargement. Si tu attends quelques secondes, il y a fond sous les textes qui les rendent non seulement plus lisibles, mais l'ensemble du site plus compréhensible.
Faute que j'affine un peu pour que les fonds se chargent en premier, parce que là, c'est clair que ça le fait pas...

Bon, ça y est, j'ai corrigé le problème sur la page d'accueil : maintenant, le menu et le choix de la langue sont toujours visibles.
Essayez de redimensionner votre fenêtre, vous verrez comment ça se comporte bien :
- l'image de fond est toujours centrée, et occupe toujours toute la fenêtre, en mode crop.
- les menus qui sont des images indépendantes sont toujours positionnés par rapport à l'image de fond, avec une taille proportionnelle.
- Mais si la fenêtre est trop écrasée, et que le menu risque d'être caché, il cesse d'être positionné par rapport au fond, pour rester visible dans tous les cas.

J'ai aussi fait quelques ajustement pour améliorer le temps de chargement. Y'a encore du boulot, mais il me semble que c'est déjà bien mieux.

Les sites en Flash qui se redimensionnent jusqu'à ne plus occuper 1x1 pixels, c'est juste une très mauvaise utilisation de Flash. Donc émuler ça en HTML+CSS je vois vraiment pas l'intérêt.

ouah l'autre, hé, t'es un peu dur.
D'une part, je pourrais bloquer le redimensionnement en dessous d'une certaine taille pour les plaisantins qui essayent d'aller trop petits, mais bon, ce serait du temps et de l'argent passés à une fonctionnalité pas fondamentale, tu l'admettras. Et sans parler de 1x1 pixels, tu admettras que c'est quand même pratique que la fluidité naturelles des éléments html s'applique aussi à la taille de ces éléments, dans une certaine mesure. La grande disparité des tailles d'écran y pousse, en tous cas.

Et d'autre part, mon redimenssionnement ne fait pas qu'émuler celui de flash, il est beaucoup plus intelligent que ça. La gestion du ratio de la fenêtre, par exemple, je n'ai jamais vu ça en flash.

Et enfin, si cette histoire de 1x1px est vraie sur la page d'accueil, c'est par contre faux sur toutes les autres pages, pour lesquelles il y a un maximum et un minimum pour les éléments (à part le fond, mais bon, c'est le fond)

moi je suis impressionné par ce que tu as fait sans flash. je suis sous Chrome donc je suis certainement dans la cible.

Par contre, la page d'intro ne me semble pas "au niveau" des autres pages qui elles sont top aussi bien au niveau des dispositions que des images. Ca reste un peu simple et a la fin, ca ne sert pas les interets de ton client. Tu mets plus en avant les réalisations.

Sur la technique, le module de diapo me dit quelque chose. Tu as le nom par hasard ?
bye

Alors au niveau technique, j'ai utilisé
- Highslide JS pour les popup et les diaporamas
- SuperBGImage pour l'image de fond
- Jquery UI tabs pour les onglets
- Et puis Jquery tout seul un peu partout.

Je suis d'accord avec toi pour la page d'accueil, mais c'est une demande du client. Personnellement, je n'aime pas du tout les "splash screen" pour les sites internet, ça ne fait que rajouter un clic. Cependant, dans le cas présent, ça permet de "cacher" une partie du temps de chargement. Le temps que tu bouges ta souris, choisisses la langue, le reste du contenu continue à se charger silencieusement. Si on arrivait directement sur une page projet, il y aurait un temps de chargement plus long au début.