Dimension requise animation flash

Question

Bonjour à tous,

Je vais créer mon portfolio en flash.
Je sait pas sur quelle dimension commencer mon design ? 
Je veut pas que mon site soit trop petit ni trop gros ...
En général vous partez sous quelle dimension pour un site full flash ??

Merci

on_drag_on · Answer

Salut,
Perso je dirais que ça dépend du public cible pour qui est destiné ton site, ça dépend ensuite de sa construction (est-ce qu'il est bourré de scrollbar, est-ce que la navigation se fait de haut en bas, de gauche à droite (sisi ça existe ...) . Pour un portfolio, je dirais que l'idéal c'est qu'il puisse se visiter aisément sur un laptop donc sur un écran entre 15" et 17" à 19" ...  enfin bon c'est une question qui dépend finalement de beaucoup de choses ... ce qui est sur c'est que si j'arrive sur un site qui m'impose un fullscreen d'entrée je me barre instantanément ;) ...

@+.

Gozu13 · Answer

Le public cible sera essentiellement pour les professionnels soit les agence de com. Après il n'y aura pas de scrollbar, la navigation sera donc de gauche à droite =) 

Niveau résolution ça donne du combien à combien ?
Pour le fullscreen j'y pense, je vais essayé d'intégré çà avec un bouton tout simplement.

Merci de ta rapidité et de ton efficacité 

PS : je travaille sur le code d'hier ... j'ai du mal, je suis en train de revoir mon besoin à la baisse XD.

cs_Girou · Answer

Salut,

De plus en plus, j'utilise une tout autre technique. Je ne defini pas de taille du site mais tous les éléments du site sont placés dynamiquement en fonction de la taille réelle de la fenêtre de navigation.
Cela permet une occupation optimale de la surface de l'écran... mais par contre ca demande beaucoup de programmation au niveau redimensionnement/positionnement des éléments.

En plus classique si on se base sur les statistiques de fréquentation d'un site (environ 130.000 visites) voici les résolutions du top 5 :
1280 x 1024 : 37771
1024 x   768 : 27314
1280 x   800 : 23864
1680 x 1050 : 17689
1440 x   900 : 14984

A première vue, j'aurais tendance à créer une animation qui fera 950 ou 1000 (compter les bords du navigateur, sur PC du moins) X 600 ou 700 (décompter barre d'outils, de navigation,...)
Perso comme base j'utilise généralement 900 x 600. Là tu est sur que la toute grosse majorité des visiteurs auront une vision complete de ton site.

@+

Gozu13 · Answer

Ok merci beaucoup pour ton aide Girou !!!

Je vais prendre en compte tes statistiques car niveau programmation j'ai niveau zéro j'aimerais bien gérer çà en code mais çà sera pas possible pour moi.

Donc du 900x600 c'est une bonne base ?

Est ce que quelqu'un peut me confirmé çà, j'aimerais avoir plusieurs avis pour prendre une bonne décision car tout commence par là ^^

cs_ourso · Answer

Je vois un petit problème dans cette logique:
Je ne sais pas de quel site nous parle girou (citons nos sources, et merci encore pour ton aide tout à l'heure !!!). mais il faut prendre en compte que c'est dans les agence de com  ou tu trouvera plutôt des gros ecrans genre ceux du bas de la pile, de préférence des macs, donc plutôt safari, a la rigueur firefox. essaie de t'imaginer comment un site en 600*900 c'est tout petit, tout perdu, sur un gros ecran de dir' com !
Donc il faut vraiment que tu pense à qui est ta cible avant de decider la taille de ton site.
Si tu dois absolument eviter le placement dynamique, j'ai, quand j'en étais là, trouvé quelques solutions de dimensionement/ placement sur l'ecran avec un bon moteur de recherche ;) .
A moins que ça soit juste pour montrer a des amis et leur entourage... ( n'oublies pas les soucis de référencement avec un site flash surtout si tu inclues tes images et tes textes dans des swf), à ta place je pencherai plutôt pour la fourchette haute. Je calerai tout mon site dans un movieclip qui pourrait être redimensionné et centré en fonction de l'écran de l'utilisateur jusqu'a ce qu'il atteigne sa taille nominale .(ce sont des scripts qui se trouvent)... Les images seront un peu pixelisées et les typo petites sur des vieux ecrans, mais des ecrans crt gris de poussiere j'en vois dix par jour qui trainent sur le trottoir... Je crois que tu peux pousser dans ces conditions jusqu'a un 800 en hauteur voire un peu plus... c'est pour presenter des photos, déjà que sur ecrans c'est pas l'ideal si tes images doivent faire 400 px de hauteur n'oublie pas de fournir la loupe ! d'ailleurs pour tes images attention à ton profil de couleurs qu'il soit compatible avec une vision sur mac, s'il n'en a pas c'est la cata au niveau du gama.

Steph

cs_Girou · Answer

Bonjour,

pour préciser, j'ai pris les stats de piwik.org
Effectivement, il vaut mieux savoir quel public le site internet va cibler... mais tous le monde ne possède pas un ecran énorme.
Avec l'apparition des ecrans 16:9 la largeur a pas mal évoluée, mais la hauteur, elle, reste relativement restreinte.
Personnelement j'ai une résolution de 1680 x 1050 et j'ai calculé la taille de ma fenêtre internet (Firefox 2) et en hauteur, je 'perds' 300 pixels pour tout  ce qui est boutons, menu, onglets, barre vista,..
Bref, il me reste 850 pixels à tout casser (en hauteur) donc je ne monterais pas au-dessus de 700 pixels... ou du moins pas avant un certain temps, le temps que les ecran 21 ou 22 pouces deviennent la norme. (on y arrive lentement)

Je ne suis pas partisan du redimensionnement de l'animation, surtout si elle comporte des éléments type image (non vectoriels) jpg, png,... car bonjour la pixelisation sur les grands ecrans, et je préfère encore avoir une barre de défilement plutot qu'un site illisible car rétrécis. 

Quand au soucis de référencement, si c'est vraiment une nécessité il y a des moyens, et un jour ou l'autre (proche a mon avis) les moteurs de recherches pourront analyser le contenu des swf.
Mais là, c'est un choix à la base... flash ou pas flash... et sur flashkod, tu trouveras beaucoup de personnes qui ont choisi flash 

Concernant le profil de couleur, selon moi, pour le web c'est un faux probleme. Il est tout a fait exacte qu'un mac ou un PC n'auront pas (spécialement) le même profil de couleur, mais entre différent macs et différents pc / écrans les profils changent aussi... Tout le monde ne calibre pas patiement son écran. Donc, quoi qu'il arrive tu auras des divergeances au niveau couleurs. Cependant, n'exagérons rien, une photo resteras toujours visible et correct au niveau couleurs.
Les profils de couleurs c'est capitale lorsqu'il s'agit de passer des documents (couleur) d'un média à un autre scanner -> ordi + retouches -> impression. Là, les profils sont fondamentaux car dans ce cas, les différences de couleurs peuvent être très surprenantes.

@+

Gozu13 · Answer

Ok merci à vous deux pour vos réponses.

Au niveau site flash ou pas flash personnellement çà sera du flash à 100% vu les effets qu'on peut faire avec. Je sait quand javascript et autre langage on y arrive aussi mais bon moi je maîtrise plus le flash. C'est dommage pour le référencement mais on ferra avec, en espérant que çà s'améliore.

De toute façon mon site sera mal référencé car il sera + ou - fermé au public. Je m'en servirais juste pour le donner aux agences de communication, a quelques amis et à la famille ( c'est sacré la famille =).

Au final je compte partir d'après vos conseils partir sur une base de 700px de hauteur avec 900px de largeur est que çà semble correcte ? Il y a peut-être possibilité de grappiller en largeur vu que c'est pour des grands écrans en principe ...

cs_ourso · Answer

Encore une fois je me base sur l'idée que la cible c'est les agences de com et que le standard d'ecran dans ces boites comme dans toute les professions graphiques c'est plutot du 1200*1600. Si l'idée c'est que ce soit eux qui aient le plus de confort de vision, je maintiens. Et puisqu'il sont sur mac et certainement safari on dispose de plus de largeur d'ecran (quand ie ou ff te donnent (à moins de 10px près) 620 de largeur de stage safari (pour pc) t'en laisse 70 de plus. j'ai pas encore verifié sur chrome... ni sur opéra :D
Je reprecise bien que tu peux bloquer le redimensionnement de ton clip une fois qu'il a atteint sa valeur nominale( si ça n'existe pas dans le script que tu trouveras, c'est plutot simple à customiser ). Donc les ecrans plus petits seulement auront une version degradée... A mon avis si il y a un compromis à faire ici, c'est de privilégier la fourchette haute, sans trop pourrir la fourchette basse.
J'ai vu que l'on pouvait activer le smoothing (lissage) par le code en AS3... On ne sait pas justement si notre interlocuteur va passer par du loading externe ou par du chargement de swf pour ses galeries... Si ce sera de l'as 2 ou 3... donc certains point du débat concernant l'affichage d'images pourraient ne pas être d'actualité. Je pense, Gilou, que l'on adopterait toi et moi plus ou moins les même solutions, mais s'il debute, il faut nous même nous placer en arrière ! J'ai commencé l'AS2 avec les mêmes intentions que lui, je suis aussi photographe... Conclusion maintenant je m'en sers en tant que professionnel et mon site n'est toujours pas en ligne faute de temps... Du coup je le recommence en as3 pour m'habituer à la bête... il est pas encore sorti de terre !


Enfin pour les images. Je parle du gamma qui diverge sur mac et pc (1,8 pour l'un et 2 pour l'autre, je crois) sans profil attaché de belles photos sur pc deviennent pales et moches sur mac et inversement, parce que chaque becane va l'afficher avec son gamma propre sans correction. le calibrage des couleurs sur ecran est une autre et vaste affaire, mais là je parle de l'interface graphique du système d'exploitation....

Steph

cs_ourso · Answer

avec 700 de hauteur pour 900 de largeur... ton site est optimisé pour un ecran de ... environ 900*930 à toi de voir...

Steph

Gozu13 · Answer

Merci Ourso pour ces informations supplémentaire.
900x700 me rend pas trop compte tu me conseillerai quoi toi ?

PS : Je rectifie une erreur,je sait pas qui a dis que j'allai mettre des photos mais je suis graphiste et non photographe. Je pensais plus à intégrer des logos, affiches, site web, etc ...

on_drag_on · Answer

Tiens j'ai trouvé d'autres stats basées sur l'évolution d'un site sur les 8 dernières années. Ce n'est que les stats d'un site particulier mais mis en comparaison avec celles de Girou ont observent qu'elles montrent la même tendance.
Ca me semble assez réaliste.

http://www.w3schools.com/browsers/browsers_display.asp

@+

cs_ourso · Answer

Graphiste ou photographe t'en viendra toujours à incorporer des png ou des jpeg, c'est pareil en intégration et en contraintes visuelles au final. Je me basais sur mon expérience de photographe.
Pour la taille pour une hauteur de 700 tu peux au moins utiliser 1000 déja c'est sans risque puisque les ecrans de 800 par 600 à part à la poste y'en a plus trop !
pour t'imaginer une anim de 700 sur un ecran de 1200 1600 imagine toi deux bandeaux de 150 px de large en haut et en bas, et de 300 à gauche et à droite. et ta photo-logo-affiche qui fera à tout casser 600px en comptant une marge et un pied de page si tu n'as pas fait de menu bandeau là c'est encore 100 px en moins, donc la moitié de la hauteur de son ecran. ça passera mas o menos si l'image est horizontale mais si elle est verticale, tu va avoir un sacré vide de chaque coté
  J'ai pas de réponses particulière à te donner autrement. La panacée c'est de faire ton site en placement dynamique. Sinon tu auras toujours à faire un compromis qui avantagerons des visions sur certains écrans et pas sur d'autres. Tu en as la preuve avec la discussion qui à eu lieu, chacun propose sa propre vision des choses.
Si tu veux faire au plus simple :
Si c'est pour le taf et la famille, privilégie le taf... ta famille te le pardonnera toujours pas le dirlo ! Si sur son ecran ton logo à une gueule de timbre poste c'est pas sur que ça te flatte... Je ne peux pas te dire "fais ça"... si tu peux renseigne toi un peu chez tes clients sur quels format ils tournent... 

Steph

Gozu13 · Answer

Oauis avec cette nouvelle tendances on peut imaginer que le 1024*768 c'est finit et que la majorité des gens sont passé à quelques chose de plus grand...

Ca me dit toujours pas quelle dimension prendre ... pour s'adapter au mieux à cette tendance !

cs_ourso · Answer

oui... pour un site orienté developpement flash. Donc pour une "clientèle" déjà bien filtrée, mais pas du tout dans le même type de comportement que les milieux de l'image. Par exemple, gozu13 il y a de fortes chances pour que tu tourne sur mac avec un définition d'écran haut de fourchette, je me trompe ? Je ne connais pas beaucoup de professionnel de l'image qui tourne sur IE et PC quand ils surfent. Y'en a mais en tout cas ils ont de gros ecrans pour pas se faire bouffer toute la place par les palettes de leurs logiciels cheris...

Steph

cs_ourso · Answer

Essaie de choper des stats sur de sites fréquentés par des graphistes... je peux rien te dire de mieux. Un site d'image basiquement je t'ai dit que je le ferais en dynamique pour faire la part belle à l'image.

Steph

Gozu13 · Answer

Oui bien vu, moi personnellement je tourne sur un mac en 1920x1200 :D c'est pour çà que suis un peu pommé et je voit tout petit...

1000x750 çà peut le faire ?

Enfaite moi j'aurais voulu savoir tout simplement si vous étiez à ma place avec mon contexte vous serez parti sur combien ? Même si après tu fait çà dynamiquement tu part de toute façon sur une résolution de base qui s'adapte après.

cs_ourso · Answer

oui ça peut être une base pour la hauteur mais mi figue mi raisin... tu plante les ecrans de 800 et tu reste petit pour un ecran de 1200...
Ce que je ferais c'est que je prendrais une photo ou un logo vertical comme étalon ou même mieux une declinaison de charte genre un gros doc rectangulaire et vertical, un planche de bd si t'en fais et je regarderais à quelle dimensions en pixel on commence à bien voir les éléments et les apprecier et là une fois ta hauteur définie tu trouve une belle forme de rectangle et tu auras ta largeur. en tant que photographe une photo verticale 24*36 sur ecran à moins de, allez.... 700 pixel de hauteur, tu ne vois pas grand chose... Et un petit bord tournant ne fait jamais de mal. enfin pour une photo pas la même pour un logo. ça c'est l'ideal... Mais si tu as des planches composées à presenter tu sera dans la même problématique.
En fait ce qui va t'aider c'est de trier ton contenu et de voir ce que tu vas presenter. ça t'eclairera un peu plus sur le bon format
On parle bien d'un site qui sera essentiellement frequenté par des gens bien voire très bien equipé et tant pis pour les autres... un peu élitiste. Mais on sait à qui on s'adresse après tout.
Ensuite pour l'agencement préfère un menu sur le coté ou vraiment qu'il soit très fin s'il est en bandeau que tu ne perde pas inutilement ces precieux pixels gagnés.
Malgré l'importance de la chose, il faut que tu sache qu'en terme de présentation il y a plein de tactiques: ça c'est le site que j'ai fait pour une boite de graphisme justement : http://www.holdupstudio.com (un peu d'autopromo :D)
 http://www.thefwa.com/ sur ce site vachement bien il y a de très beaux exemples comme http://www.leoburnett.com/ un petit must dans le genre... enfin faut bien rever !!!

Steph

cs_Girou · Answer

Ourso, les deux sites que tu proposes utilisent justement un positionnement relatif aux dimensions du Stage et donc ne sont d'aucun secours à la question existentielle qui occupe Gozu13 depuis de nombreux messages : Oui mais combien sur combien finalement !

(Sans dénigrer évidemment les 2 références que tu indiques !!!)

Pour  http://www.holdupstudio.com par exemple, moi qui suis en 1600 x 1050 et bien sur la première page (entrée) j'ai une barre de défilement verticale ! Je trouve cela dommage...
Pas de soucis pour la suite du site (of course).

On en reviens a ce que tu disais... Qu'est ce qu'on veut montrer et a qui on s'adresse et c'est en fonction de cela qu'il faudra trancher.

@+

cs_ourso · Answer

ah ben zut la barre de defilement... j'avoue que les css et moi ça fait un peu deux...encore du boulot toujours du boulot !
celui dont je suis l'auteur on peut tout aussi bien le caler dans une config non variable... ce que je voulais montrer par là c'est l'idée du defilement... que la taille de l'ecran n'est pas necessairement un obstacle majeur quand le contenant offre une valeur ajoutée au contenu...par exemple si son image n'est pas assez grande il peut aussi proposer le telechargement d'un pdf... 
C'est juste histoire d'élargir les horizons de notre ami, souvent quand on ne sait pas faire quelque chose c'est qu'on ne sait pas que ça existe.... on vit ça tout les jours non ? ;)...
On tombe d'accord sur le combien par combien...

Steph

Gozu13 · Answer

Oauis c'est vrai que Girou n'a pas tord...
Moi j'aimerais que vous donniez une bonne résolution adapté à ma demande. si vous étiez à ma place vous prendrez combien sur combien.

Merci ourso pour les subtilités comme le menu vertical, le téléchargement de pdf mais c'est vrai que c'est encore pour le moment. Pour le moment je suis devant flash et il me demande quel taille pour mon fichier swf. Je lui réponds quoi ?

Voici mon ancien portfolio qui date maitenant... j'ai pas envie de recommencer les mêmes erreurs. J'annonce c'est tout petit XD et c'était avec mon niveau ^^

http://ugo.leprudhomme.free.fr/

Voila vous comprenez maintenant mieux mon malaise :(

Merci pour vos anciennes et nouvelle réponses

Dimension requise animation flash

25 réponses

Votre réponse

Discussions similaires