INTRODUCTION

En 2010, les tendances ont un peu évolué sur les définitions d'écran. Le succès des smartphones permet une utilisation mobile des sites internet. Malheureusement, les écrans de mobiles reviennent sur des petites résolutions, souvent en dessous de 800×600 :-( Autrement, l'équipement en netbooks, très populaires, contraint aussi à des résolution limitées en 1024×600 ou 1024×768.

Au domicile, l'équipement en écrans HD (1280×720) est maintenant devenu commun. Le Full HD (1920×1080) restant encore limité.

Le design des sites internet doit donc tenir compte des petits écrans de smartphones ou netbooks, tout en proposant une navigation confortable à domicile en HD.

Le standard qui en ressort est surement… le grid 960 :-)

Pour les différents modèles, on peut créer une hiérarchie pour la structure d'affichage d'un site internet.

La page d'accueil est la plus importante, elle doit avoir son propre modèle.

Ensuite, il y a les pages “simples” de contenu.

Et puis il y a les pages “groupées” de contenu.

Il faut aussi prendre en compte le flux RSS car c'est un outil très utilisé par les moteurs de recherche comme par les applications des visiteurs.

Accueil
Simples
1. Pages
2. Articles
3. Media
Groupes
1. Keyword, Tag ou Mot-clé
2. Blog (les N dernières pages publiées)
3. Archives (année, mois, jour)
4. Recherche
RSS
1. Blog (les N dernières pages publiées)
2. Keyword, Tag ou Mot-clé
3. Archives (année, mois, jour)
4. Recherche

Grid 960

Le meilleur compromis pour la présentation du contenu d'une page web est un découpage en blocs de 960×180.

Le design général sera en 1280×2160 pour prendre en compte le format HD et Full HD

Pour mettre en valeur le format 16×9, si on utilise 960 pixels en largeur, cela donne 540 pixels en hauteur.

Le contenu sera inclus dans des blocs “scènes “de 960×540, afin d'être complètement lisibles par des écrans en 1024×768 ou 1024×600.

Une scène de 540 pixels de hauteur peut donc contenir 3 “bandes” ou “strips” de 180px.

Les 2 premières scènes sont très importantes car elles sont les premières à s'afficher et l'attention du visiteur se focalisera sur ces 2 scènes.

Si on veut utiliser un carré 540×540 pour mettre l'animation principale, il reste 420 pixels pour 1 ou 2 autres colonnes (210+210 pixels)

On peut découper ainsi une page entière en 12 strips de 180px de hauteur.

Pour les colonnes, on réduit la largeur minimale d'une colonne à 160px. Ce qui fait 6 colonnes de 160px dans 960px.

On arrive au final à une grille de 6×12=72 cases ou “box” pour répartir le contenu de la page.

Vue en 1:10 des 72 "box"

*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*

Cela devient trop serré de créer des colonnes en dessous de 160px, pour une largeur de 960 pixels, on obtient donc un maximum de 6 colonnes.

160 Pixels en largeur

ANTICONSTITUTIONNELLEMENT

Il est bien sur possible de créer une ligne ou un menu avec plus de 6 éléments sur la même ligne. Mais on ne fera jamais de grande colonne car cela reviendrait à une longue énumération de mots. Le résultat serait trop serré et donc peu lisible, ni esthétique.

Vue en 1:10

*

**

***

****

Avec 2160px de hauteur de page, on peut envisager une centaine de lignes de texte par page (ce qui donnerait une hauteur de ligne de 21px)

En décomposant en 6 blocs ou “scènes”, cela reviendrait autour de 15 lignes de contenu par “scène”. Suivant les mises en pages et les graphismes, on a une fourchette entre 10 et 20 lignes de texte par scène.

Vue en 1:1

Titre I de la scène

Premier paragraphe

Deuxième paragraphe

Titre II de la scène

Premier paragraphe

Deuxième paragraphe

Titre III de la scène

Premier paragraphe

Deuxième paragraphe

Titre I de la scène

Premier paragraphe

Deuxième paragraphe

Titre II de la scène

Premier paragraphe

Deuxième paragraphe

Titre III de la scène

Premier paragraphe

Deuxième paragraphe

Grid 960x2160

Si on découpe la surface totale 960×2160 en une grille de 24×48, on obtient 1.152 cases de 40×45 pixels.

Cela fait largement de quoi créer toutes sortes de design :-P

En nombre de mots équivalents, on aurait ainsi une page avec 1.152 mots en écrivant un mot par case.

Ce qui doit donner environ 150 lignes de texte ?

*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*

*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*

INTRODUCTION

Grid 960

Vue en 1:10 des 72 "box"

Vue en 1:10

Vue en 1:1

Titre I de la scène

Titre II de la scène

Titre III de la scène

Titre I de la scène

Titre II de la scène

Titre III de la scène

Grid 960x2160

Exemples

*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*
*	*	*	*	*	*