2010-03-25 9 views
2

Je suis intéressé par les largeurs de colonnes que vous proposez pour les sites Web à deux ou trois colonnes.Largeur de colonne du site Web

Par exemple, si l'on considère deux colonnes (largeur totale 1000px), quelques largeurs possibles seraient: 900-100, 800-200 , 750-250, 700-300 , 600-400. Quelle mise en page est la meilleure pour la convivialité, les emplacements d'annonces possibles, l'intégration de widgets?

+0

Voulez-vous placer des annonces dans la colonne "side-bar"? C'est un facteur important pour la plupart des gens! –

+0

Aussi, c'est généralement un bon choix pour laisser un petit espace vide entre vos colonnes. Par exemple, au lieu de 700-300, vous pouvez faire 680-20-300. IIRC, ça s'appelle un "caniveau" en anglais. – user64075

Répondre

2

960px - http://960.gs

Il est le meilleur numéro pour diviser en toutes les colonnes disponibles et ce site a tous sortes de guides et de grilles pour vous aider à faire la mise en page.

Il est également aussi large que vous le souhaitez et peut toujours tenir dans un écran 1024 large - 1000px provoquera des barres de défilement horizontales.

Je déconseille également une largeur basée sur% car il est presque impossible de contrôler la disposition.

0

382px et 618px.

1

Cela dépend vraiment du site Web et de la fonction particulière de chaque col que vous allez implémenter. Mais en demandant la convivialité, très probablement je n'utilise pas de cols de largeur fixe. La définition de cols avec une largeur en pourcentage (et un rendement total de 90% +) utiliserait principalement l'écran du lecteur. Vous pouvez probablement commencer de 20% - 60% - 20% pour les 3-col et 30% - 70% pour les 2-col

+1

Le stress dépend. En outre, @keks: si vous souhaitez inclure des annonces, je vous suggère d'utiliser une colonne distincte pour cela, sur le côté droit. – ANeves

0

960 px - largeur totale. Je pense que c'est la meilleure norme. Ensuite, vous pouvez essayer 160 + 800 ou 800 + 160

0

Utilisez la grille 960 comme DCD dit ci-dessus.

Facile à travailler avec des maquettes dans photoshop/feux d'artifice à inclure dans votre code HTML. Vous obtiendrez une mise en page rapidement une fois que vous connaissez les concepts simples du «cadre» de la grille. Il prend soin de la marge/rembourrage pour vous.

De nombreuses conceptions de sites utilisent cette grille.

Quant à vous des questions spécifiquement:

960px largeur (en utilisant 960 grille): container_12 et à l'intérieur de cette comprennent un mélange 9: 3 ou 10: 2 disposition de la grille de 2 colonnes OU container_16 intérieur qui comprennent Disposition de grille 3: 9: 4 pour 3 colonnes

Mais il n'y a pas de règles strictes à ce sujet. Faites-le fonctionner en fonction de votre contexte & utilisation.

Si vous fournissez plus d'informations sur ce que vous envisagez de le faire, je pourrais vous donner des conseils plus spécifiques :)

0
  • Go avec 960px largeur. 960 pixels est bon dans 800x600, 1024x768, et 1280x960 moniteurs.

  • Si vous voulez soutenir les appareils mobiles (résolutions plus petites) puis utilisez un fluid layout et utiliser Media Queries pour un meilleur contrôle.

  • éviter de considérer TOUTES résolutions d'écran, car il gaspillera votre temps.

  • Utilisez un outil de suivi, par exemple Google Analytics pour suivre les tailles de fenêtre de navigateur de vos utilisateurs afin de déterminer la résolution d'écran de votre audience.

En ce qui concerne l'utilisabilité, trois des facteurs les plus importants en termes de résolutions d'écran, au moins de mon expérience sont:

  • Évitez de laisser une barre de défilement horizontale .
  • Évitez de trop petite taille de police (très difficile à lire).
  • Évitez les tailles de police fixes.