Conception, création, intégration : l’importance des grilles


Brand Content

Méconnues, parfois même rejetées par les webdesigners, les grilles sont pourtant de plus en plus importantes dans le monde digital d’aujourd’hui et surtout de demain avec la tendance qui ne cesse de croître des sites conçus en responsive webdesign (RWD).

Combien de fois vous êtes-vous déjà demandé pourquoi un site paraissait si clair, si équilibré ? Comment faisait-il pour arborer ce rendu si professionnel ? La réponse à cette question peut être multiple mais une chose est sûre : les grilles font partie des fondements de cet aspect soigné.

 

Qu’est-ce qu’une grille en webdesign ?

Utilisées principalement pour les supports destinés à l’impression mais aussi en architecture, les grilles ne sont rien d’autre qu’un ensemble de colonnes comprenant des marges extérieures et des marges intérieures appelées gouttières.

Moins utilisées mais pouvant être utiles pour aligner horizontalement les éléments, des lignes peuvent également faire partie de la composition de la grille.

 Conception, création, intégration : l’importance des grilles

 

Pourquoi utiliser les grilles ?

Les grilles en webdesign sont l’équivalent des plans d’architecte nécessaires au bien-fondé d’une maison conçue dans les règles de l’art et dans laquelle vous vous sentirez bien. Elles sont la structure et l’armature de votre site web.

Elles permettent d’organiser votre contenu par blocs, de faire respirer vos textes, de faciliter l’analyse de l’espace pour vos visiteurs afin d’améliorer la compréhension de votre site.

Les grilles ont aussi l’avantage de créer un cadre sain qui permettra de faciliter l’évolution de votre site et de ses fonctionnalités qui seront amenées à changer au fil du temps.

En définitif, ces avantages combinés permettent d’optimiser et de rendre encore plus agréable l’expérience utilisateur.

 

 

La taille idéale ?

Largeur

Au risque de vous décevoir, la taille idéale n’existe pas !

Nous pourrions prendre un raccourci et penser que la taille idéale correspond à 960 pixels de large (taille optimisée correspondant aux visiteurs cibles ayant une résolution de 1024 pixels).

Cependant depuis un an environ, nous pouvons clairement observer le déclin de cette résolution. La largeur des grilles exploitables est donc revue à la hausse et la conception des sites web doit tirer profit des résolutions plus larges.
Les avancées technologiques de ces dernières années font qu’actuellement en France, c’est la largeur de 1366 pixels qui prédomine.

Nombre de colonnes

Il existe des “standards” : les grilles sont généralement déclinées en 12 / 16 ou 24 colonnes.

Ce nombre dépend principalement du site que vous allez devoir mettre en place. Un site à fort contenu éditorial aura généralement besoin de plus de colonnes afin d’articuler de façon variable et flexible l’ensemble de ses contenus. Moins il y a de colonnes et plus les blocs seront larges : ceci peut très bien convenir pour les sites vitrines ou les portfolios.

Pour résumer et comme expliqué en préambule, la taille idéale n’existe pas !

Si votre audience est principalement composée de visiteurs ayant de petites résolutions, alors préférez une grille de 960 pixels. Cependant comme les statistiques nous le montrent, cette grille à tendance à ne plus être idéale et les résolutions explosent. Ainsi des grilles de 1140 pixels sont désormais accessibles et permettent de mettre en place des design toujours plus immersifs et adaptés.

Mobile, Grilles & Responsive Webdesign, le mariage parfait ?

La part de marché des smartphones n’a de cesse de croître depuis plusieurs années.

L’opérateur Américain Verizon Wireless prédit que le trafic internet mobile global devrait progresser en moyenne de 78% dans les années à venir et ainsi voir son volume multiplié par 18 entre 2011 et 2016. Il est donc primordial, en fonction de l’audience de votre site, de vous pencher sur les bénéfices que pourrait vous apporter un site adapté à tous types de supports.

Le Responsive Webdesign consiste à adapter le design d’un site web en fonction de la largeur/hauteur du terminal sur lequel il est affiché. Bien que cette thématique mériterait un article à elle seule, la notion de point de rupture est importante et permet de comprendre pourquoi l’utilisation des grilles est un préalable aux sites responsive.

 

Définition de point de rupture :
SOURCE : https://glossaire.infowebmaster.fr

“ En webdesign un point de rupture désigne le moment où le design d’un site en responsive design se modifie en fonction de la largeur/hauteur de la fenêtre du navigateur. Ces points de rupture sont comme des paliers qui, une fois franchis, permettent d’adapter le design ou le contenu à la nouvelle largeur de la page web. »

 Conception, création, intégration : l’importance des grilles

SOURCE  : https://www.nealite.fr

Les colonnes composant les grilles sont de très bon guides pour définir les différents points de rupture. Si votre site à été conçu en respectant le principe de grilles, il sera plus facile pour l’intégrateur de l’adapter à différents périphériques.

 

En conclusion

Vous l’aurez compris, en 2013, l’utilisation des grilles n’est pas seulement conseillée. Elle est nécessaire à la qualité d’un projet car c’est sur celles-ci que repose toute la structure de votre site.

Chez DISKO nous avons pris l’habitude d’adopter l’utilisation des grilles dans toute la chaîne d’élaboration de nos sites. Experts en ergonomie, directeurs artistiques, intégrateurs et développeurs peuvent alors travailler de manière cohérente et unifiée.

Laisser un commentaire