Tout d’abord, rappelons que bien souvent, tout dépend du contexte : nous sommes bien obligé d’adapter chaque mise en page pour son contenu particulier. Les règles générales peuvent être nuancées.
la largeur de la mise en page : les minimums
Le minimum généralement respecté est de tenir la mise en page dans un écran de 1024×768 pixels (pour satisfaire la quasi totalité des internautes : voir statistiques statcounter et W3schools), fenêtre de navigateur agrandie sur tout l’écran : la largeur doit tenir compte de l’ascenseur éventuel pour défiler les informations vers le bas, ce qui retire 20 pixels, il reste disons 1000 pixels de large pour la mise en page, et la hauteur doit tenir compte des barres d’adresse du navigateur, de la barre d’onglet, des différentes barres d’outils supplémentaires (et parfois inutiles ?), ce qui réduit la hauteur à environ 550 pixels. Voilà pour les minimum : 1000×550 px.
Pour la hauteur, 550px n’est pas la hauteur de la page, qui pourra bien entendu contenir plus d’information à dérouler par un ascenseur latéral, mais c’est l’espace en haut de page qui devra contenir les informations importantes, le menu de navigation principal ou le nom du site par exemple, car c’est le haut de page qu’on verra en premier.
le minimum d’accord, mais pourquoi avoir un format maximum ?... Le premier point est le suivant, la largeur d’une colonne de texte...
Élargir la colonne de texte pour ne pas jouer de la molette ?
On peut toujours faire des lignes de texte plus longues, mais ça ne sera pas plus agréable à lire, au contraire.
La largeur d’un pavé de texte se calcule avec un certain nombre de mots par ligne pour une plus grande facilité à revenir à la ligne pour lire la suite de la phrase, c’est ce qu’on appelle le confort de lecture. (cf un livre de poche qui tente, quand c’est possible, de respecter ces règles.) Les colonnes d’un journal d’information « papier » sont nettement plus étroites.
Vouloir faire tenir toute l’information dans un écran 1024 x 768 n’est pas la solution. Mieux vaut synthétiser l’information importante en haut de page et développer ensuite tout en agrémentant de photos pour donner des informations complémentaires.
Ça ne dérange plus grand monde de descendre dans la page quand une information nous intéresse, on le fait sur n’importe quel site d’actualité, blog... quand à ceux qui ne le feront pas ça n’a pas d’importance puisque l’essentiel est présent en haut de page.
en septembre 2011 : "Les blocs de texte oscillent souvent entre 500 et 530 pixels de large, ceux du site du journal Le Monde font 540, je n’ai trouvé dans ebay ou amazone aucune colonne de texte dépassant les 500 pixels, Libé, le fig, le monde diplo, l’express ont tous des colonnes de texte de la même taille sauf Le Courrier international effectivement qui fait 650 pixel de large... mais c’est nettement moins agréable à lire."
Argument supplémentaire : si on veut éviter les frais d’une interface dédiée aux I-phones et autres smartphones, il est préférable de rester dans une certaine largeur pour réduire les zooms et les déplacements nécessaire pour lire une ligne...
la largeur de la mise en page : les maximums
si les colonnes ont un maximum (largeur individuelle de chaque colonne de texte pour le confort de lecture), et un minimum (largeur de l’ensemble de la mise en page + largeur individuelle pour ne pas faire un mot par ligne), on peut premièrement envisager une largeur proportionnelle qui s’adapte à l’écran de l’internaute, pour avoir un minimum et un maximum respecté dans tous les cas et pour la même interface.
On peut aussi envisager d’avoir une colonne qui se dédouble quand la largeur le permet : une colonne sur un petit écran peut devenir deux colonnes sur un écran plus large, les informations basses remontant latéralement. On peut aussi le combiner avec la solution proportionnelle...
Il y a des solutions comme celle-ci qui restent rarement utilisées, qui pourraient pourtant apporter une souplesse pour s’adapter à nos écrans très larges en respectant les petits...
retour à l’accueil se fait en cliquant sur le logo qui se trouve en haut de page :
c’est une habitude très fréquemment admise, mais pas essentielle. On évite de rallonger/surcharger le menu, on gagne en simplicité, mais ce n’est généralement pas le seul moyen de retourner à l’accueil du site.
Quoi qu’il en soit de la page d’accueil (où finalement on a aucune raison de revenir à l’accueil puisqu’on y est ;o), au cours de la navigation dans le site, le fil d’Ariane permet de se situer et de retrouver l’accueil à tout moment.
un menu général présent sur chaque page du site
Pour éviter les pages "cul-de-sac", les boutons "retour" et autres barrières qui ralentissent l’accès à l’information...
On devrait pouvoir, pour faire bien, accéder à n’importe quel page du site depuis n’importe quelle autre en maximum 3 clics de souris...
une page d’accueil préliminaire à l’entrée du site ?
au secours !
La page d’accueil doit contenir des informations vraies, refléter le contenu du site et changer régulièrement pour partie : montrer un site qui se met à jour, ne pas lasser l’internaute, satisfaire le référencement en même temps car les moteurs de recherches indexent la page sur son contenu...
c’est aussi ralentir le parcours de l’internaute et lui mettre une barrière comme pour qu’il n’accède pas rapidement à l’information... ça ne va pas dans le bon sens !
ajoutez le fait que si le site est bien conçu, il y a de fortes chances pour que l’on arrive chez-vous autrement que par la porte principale, et l’entrée sera inutile voire inopportune...
les libertés du rédacteur
C’est bête à dire, mais un site web est très souvent un ensemble de page : la mise en page de l’interface (l’ensemble de chaque type de page : accueil et autre...) est pensée et décidée au moment de la conception du site. C’est-à-dire que des choix de couleurs de fond et de texte ont été décidés, la typographie ou les typographies des textes, titres et d’intertitres, sa taille également, sa largeur, la taille des images, le comportement des galeries etc... pour que les éléments se trouvent en cohérence dans l’identité du site.
Le rédacteur ne doit pas pouvoir modifier chaque décisions déjà prises, et il s’en passe d’ailleurs très facilement : son travail en est allégé, il peut se concentrer sur le sens du texte et garde, dans un SPIP installé "par défaut", un certain nombre d’outils simples pour clarifier son texte : mise en gras/italique (ne pas oublier majuscule/minuscule à choisir sur le clavier), intertitre, saut de ligne/paragraphe, notes de bas de page, citation, quelques caractères particuliers (À, Œ et œ, Æ et æ... pour ceux qui ne les connaissent pas sur leur clavier), insertion d’images et documents en tout genre...
Ces outils sont volontairement sobres pour les raisons sus-mentionnées et ne polluent pas la base de données avec les choix de mises en forme : c’est primordial pour utiliser le contenu du site dans d’autres situations que le site internet, les flux RSS par exemple, ou au moment de refaire votre site, dans 6, 8 ou 10 ans, vous serez content de pouvoir utiliser tous vos textes tels que, sans aucune intervention manuelle...
On peut toutefois compléter ces outils par quelques plugins qui viendront donner le loisir de ferrer le texte au choix, d’en changer la taille et la couleur, mais dans des limites définies lors de la conception du site...
des contraintes de mise en page
Le contexte, et le but de notre travail, c’est de fournir des outils d’information originaux et également efficaces : nous nous devons de respecter les principes de mises à jours qui font tout l’intérêt des solutions dynamiques comme SPIP. Dans l’environnement actuel, avec les langages modernes mais néanmoins répandus largement, nous faisons avec un ensemble de contraintes toutes réunies dans la notion d’ergonomie web.
La tâche n’est pas simple, d’autant plus que les contraintes sont changeantes...
Dans notre façon de penser un site web, nous essayons de trouver des systèmes qui puissent s’adapter à tous types de contenus tout en offrant une certaine diversité de mise en page.