Largeur & Hauteur de votre site

[DrOSX]

La largeur et la hauteur de votre site internet doit être réfléchie si vous voulez éviter au visiteur de dérouler sans cesse la page pour lire vos informations.

Comment choisir la largeur, la hauteur? Ici dans l'inspecteur:



Il vous faut entrer une largeur et hauteur (en pixel) définitive.
Contrairement à d'autres outils de création de sites qui permettent d'adapter la hauteur et largeur du contenu aux écrans des visiteurs; nous devrons avec iWeb choisir une largeur et hauteur fixe.

Cela signifie qu'un site peut prendre tout l'écran d'un MacBook 13' mais pratiquement la moitié d'un 27'. Attention aussi à la couleur de votre arrière plan du navigateur dans ce cas...

Pour cela, mieux vaut connaître les statistiques actuelles de tailles d'écrans des internautes et faire une sélection intelligente.

Voici un lien très intéressant sur les statistiques de résolution d'écran:
http://www.w3schools.com/browsers/browsers_display.asp


On y retiendra pour Janvier 2010 que 76% des internautes ont un écran d'une résolution supérieure à 1024 x 768

En conclusion, Il semble donc en 2010 cohérent de choisir une largeur de 1024 au minimum. Cela vous évitera aussi d'avoir un site étroit qui nécessite un défilé vertical (scrolling).



Lien utile:

Alsacréation, un site pour toues les résolutions.

[ericdlg]

Compliqué tout cela. Moi et mon iMac 24" on râle souvent de tomber sur des sites qui présentent des pages non redimensionnables... donc, en général, j'aime les pages qui s'étirent en hauteur comme les sites de news (macgé...). Mais bon, cela ne va pas avec tous les styles de sites. Je crois qu'au-delà de 1000x800 les choses peuvent être un peu risquées car il est très chiant de devoir aller chercher des morceaux de pages dans tous les sens. Mireille a raison.

En fait, c'est surtout une question d'ergonomie. Pas mal de sites sont étroits (comme les thèmes standards d'iWeb d'ailleurs) et fonctionnent très bien. D'autres prennent le partie de la page unique et imposent alors de cliquer pour passer à la page suivante (si beaucoup d'infos illustrent un onglet). Il faut juste que tout soit clair, facile et agréable à utiliser. Mais, à voir la production web, beaucoup ne savent pas ce qu'est la simplicité.

[zepatente]

Personnelement je précpnise un sondage sur son propre site car tout dépend se l'objectif et vers qui s'adresse le site .

Un petit google analytics sur uniquement la page d'accueil permeterra se voir si la dimension n'est pas trop grande.


@+

[PJG]

beaucoup ne savent pas ce qu'est la simplicité.

Et bien moi je ne vois pas grand chose sur tes pages. Aïe, aïe, aïe...bobo les yeux.

[ericdlg]

Evidement. Cette page fait en gros 1050x850 pixels. Elle s'affiche donc au max de ce que peut faire un écran 17" classique (1280x1024). Là, tu ne montres qu'une partie. Par-contre, il est vrai que l'affichage ne se fait correctement que dans Firefox et Safari... pas dans Internet Explorer.

Je suis photographe de métier et j'ai envie de faire du graphisme web. J'essaie donc des solutions.

[PJG]

J'aime bien la présentation de ton site, mais j'ai vraiment du mal à lire les textes.

[ericdlg]

C'est vrai, t'as raison. C'est un site fait en deux nuits pour présenter mon boulot et mes mômes à une copine de longue date. J'avais envie d'un truc classe et pas trop vu.

J'utilise toujours iWeb, mais maintenant je me forme sur Flash CS3... parce que j'ai tenté de faire des choses sympas sous Keynote mais il est trop limité côté intéractivité. On peut y faire des sites entiers mais on bute vite sur des problèmes lourds à gérer. Mais bon, quand on voit l'usine à gaz qu'est Flash...

[naty]

Bonsoir,
je rebondis sur ce sujet car j'aimerais savoir comment interagir sur les deux bandes de chaque côté dans les pages Iweb.
Je suis en train de faire ma page d'accueil avec Photoshop, version scrapbooking, donc mon intention est de faire ma page en jpeg et de la placer sur ma page Iweb, mettre des boutons invisibles pour gérer les liens, etc,....

Plusieurs problèmes se posent : J'ai vu que les pages pouvait être dimensionnées par exemple en 1100x 600, cela veut-il dire que mon image doit être de ce format ? (ma question est surement bête mais j'aimerai être sure de la réponse.)
Le 1100 c'est la largeur de mon image ou celle de mon image + les 2 bandes ?
Comment supprimer ces bandes car du coup elles ne vont pas avec mon arrière plan ?

Merci pour vos réponses et votre aide

NATY

[zepatente]

Bonjour,

si tu le désires j'ai fait un tutoriel video sur ce qu'est l'ergonomie d'une page celà te donnera, je l'espère, des réponses

@+

[DrOSX]

Bonsoir,
je rebondis sur ce sujet car j'aimerais savoir comment interagir sur les deux "bandes" de chaque côté dans les pages Iweb.

Les bandes verticales dont tu parles dépendent de la largeur choisie dans l' inspecteur de page d' iWeb et surtout de la résolution écran du visiteur..(préferences systéme)

Exemple: tu choisis 1200 de large dans l' inspecteur pour ta page.

Si ton ordinateur a une résolution de 1920 par exemple, il y à une différence de 720 pixels. Cette différence sera traduite par 2 bandes de 360 de large dont la couleur sera celle de l' arriére plan du navigateur choisie dans l' inspecteur.

Si ton ordinateur a une résolution de 1200; la page de ton site, remplira toute la largeur de l' ecran et il n' y aura pas de "bandes" sur le coté..

SI Largeur de ta page = largeur choisie en résolution écran------> PAS DE BANDES
Si largeur de ta page < largeur choisie en résolution ------->BANDES
Si largeur de ta page > largeur choisis-------->PAS DE BANDES le visiteur fera défiler la page horizontalement...(plutot chiant...)

Cela dépend donc de la moyenne de la résolution des gens...
Et de ton choix.
Par soucis de précaution, si tu choisis la même couleur pour l' arriere plan navigateur, les "bandes" se verront moins...

Pour preuve, regarde le site APPLE par exemple, avec un portable 12' le site remplit l' ecran et avec un IMAC 24' il y à du rab à gauche et à droite...

[MireilleG]

Ajoutons aussi que nous n'avons aucun contrôle sur l'équipement des visiteurs. Mais une chose est certaines les gens n'aiment pas à avoir à naviguer horizontalement et verticalement donc il vaut mieux rester dans les normes de 1000px maximum. Bien que j'ai vu dernièrement 2 ou 3 sites dont la navigation est horizontale au lieu de verticale. C'est un peu déroutant mais on s'y fait. Je ne crois que cela deviendra la norme surtout qu'avec le iphone on a maintenant tendance à réduire la largeur plutôt que de l'agrandir.
Mireille

[Madeline]

Par soucis de précaution, si tu choisis la même couleur pour l' arriere plan navigateur, les "bandes" se verront moins...

Pourquoi se verront moins... ?
Si la couleur de l'arrière plan est semblable à celle du plan...
Alors les bandes ne se voient plus... il me semble.
C'est ce que j'ai sur mon site... en tous cas

[DrOSX]

Oui, mais je dis "moins" parce que le site ne remplira la page...
il y aura donc des "bandes" mais qui se voient moins grace à la couleur identique...Ou plus du tout en fait...

A voir si l'on parle de "bande" ou d "espace"

[PJG]

Je suis en train de faire ma page d'accueil avec Photoshop, version scrapbooking, donc mon intention est de faire ma page en jpeg et de la placer sur ma page Iweb, mettre des boutons invisibles pour gérer les liens, etc,....

Bonjour naty, ça c'est une très bonne idée il faut te procurer le magazine Avosmac N° 82 page 40 et 41, j'ai écris un article sur le sujet. "Alléger iWeb c'est bien"

[naty]

Merci vraiment à tous pour vos réponses !
Zepatente tu m'as eu ! j'avais visionné que la première partie de l'inspecteur lol je n''avais pas vu qu'il y avait une deuxième partie ! çà m'a bien aidé
Jeancharles, super ton explication, j'y vois bcp plus clair
Mireille, tu as une adresse de site à navigation horizontale ?
Madeline et JeanCharles de toute façon c'est du scrap et je n'ai peux pas mettre la meme couleur ;-)
PJG, le AVos mac N°82 c quel mois ? çà m'intéresse effectivement !
Pour l'instant mes images oscillent entre 152 et 200 Ko en Jpeg Qalité Niveau 8 est ce trop lourd deja ?

NATY

[PJG]

PJG, le AVos mac N°82 c quel mois ? çà m'intéresse effectivement !

Mois de Mars

[MireilleG]

Bonjour Naty Je ne suis pas sure de comprendre la question.
La plupart des sites ont une navigation horizontale. C'est à dire que les boutons ou le texte s'aligne de gauche à droite sur la page, certains ont une navigation verticale et d'autres ont les deux.
Si je te comprends mal corrige-moi s'il te plaît.
Mireille

[koeklin]

Pour l'instant mes images oscillent entre 152 et 200 Ko en Jpeg Qalité Niveau 8 est ce trop lourd deja ?

c'est pas énorme compte tenu de la grandeur et de la richesse des couleurs mais quand même essaie quand même un coup de smallimage dessus. surtout ne redimensionne jamais tes images dans iWeb sinon tout sera png et plus lourd!
Avec iWeb, plus c'est léger mieux c'est.
N'oublie pas de partir d'un thème blanc ou noir pour faire ton scrapbooking et évite de rajouter des images par dessus, fais le max de chose sur Photoshop.

[PJG]

Pour faire ton scrapbooking il te faut juste un scanner N° 82 d'Avosmac Mars 2008 page 41.

[naty]

Salut tout le monde,

Ohhhhhh Mireille j'ai trop honte loooooool J'avais compris que le site se visualisait de gauche à droite avec un ascenseur horizontal genre une page qui serait bcp plus large que haute !!!! Désolée, je devais pas être en forme lol mais là j'ai bien compris.
PJG tu es un pro d'avosmac ? lol en gros j'ai toujours besoin du même ;-)
mais j'ai trouvé un super site où il y a des kit à télécharger et imprimer : http://cp.c-ij.com/english/scrapbook/index.html
Koeklin, je fais mon maximum avec photoshop, et merci du conseil, je ne modifierai pas l'image ds iweb. Je vais regarder smallimage et j'ai bien pris le thème blanc.

Merci à tous

NATY

[PJG]

j'ai trouvé un super site où il y a des kit à télécharger et imprimer : http://cp.c-ij.com/english/scrapbook/index.html

Le mieux, si tu as une âme créative, c'est de créer toi même tes pages.
Un peu de colle, des ciseaux, du carton, des gommettes, de la laine, des photos, un scanner bien sûr et le tour est joué.

[MireilleG]

En fait Naty c'est mon tour d'avoir honte, j'ai relu le fil et j'avais parlé sur la page précédente d'un site que l'on navigue de gauche à droite, mais évidemment j'avais oublié. Je me rappelle à peine de ce que j'ai dit il y a cinq minutes alors une ou deux semaine.
Donc pour me faire pardonner je te donne ce site.
La navigation se fait entièrement horizontalement

http://www.thehorizontalway.com/

Il y a du pour et du contre.
Mireille

[zepatente]

j'ai trouvé un super site où il y a des kit à télécharger et imprimer : http://cp.c-ij.com/english/scrapbook/index.html

Le mieux, si tu as une âme créative, c'est de créer toi même tes pages.
Un peu de colle, des ciseaux, du carton, des gommettes, de la laine, des photos, un scanner bien sûr et le tour est joué.

Pas trop de colle sinon le site à du mal à charger

Naty regarde ou je vais à la fin septembre http://www.ausecretdepolichinelle.com/spc/

[PJG]

Merci pour l'adresse, je l'envoie à ma fille.

[zepatente]

Pas de problème çà me fera plaisir

[Contenu sponsorisé]