Un intégrateur Web, qu’est-ce que ça mange en hiver?

Écrit  par   le 4 Déc 2013  dans Programmation-intégration, Responsive   

unsplash-kitsune-3

Vous êtes-vous déjà questionné à propos de l’allure que prendra votre site internet ? Avec quelques maquettes graphiques, on peut avoir une bonne idée. Mais la production d’un site Internet exige la contribution de plusieurs autres spécialités et il est souvent difficile pour les clients de comprendre ce qu’implique l’intégration de toutes ces spécialités.

Qu’est-ce qu’un intégrateur?

L’intégrateur est responsable de concrétiser un site internet, c’est-à-dire le rendre fonctionnel dans plusieurs navigateurs et utilisable par plusieurs usagers. Le défi d’un intégrateur est de rassembler toutes les informations fournies par différents spécialistes et de donner vie aux pages du site. Bref de mettre toutes les pièces du puzzle en place !

Voici une liste, non exhaustive, des principaux spécialistes rencontrés :

  • Architectes d’information ;
  • Designers graphiques ;
  • Rédacteurs ;
  • Spécialistes de contenu ;
  • Programmeurs.

HTML en sauce CSS servi sur une platée de navigateurs

Comme toute profession, l’intégration comporte des défis et des limitations qui lui sont propres et la recette n’est pas toute faite.

Quels sont les navigateurs supportés ?

Les clients nous demandent souvent de faire en sorte que leur site soit top-notch dans l’ensemble des navigateurs. C’est parfaitement normal ! Ceci dit, plus le nombre de navigateurs à supporter est important, plus la réalisation des pages exige du temps et du doigté. Ce temps supplémentaire est nécessaire pour corriger tous les problèmes de compatibilité et réaliser ensuite des tests de contrôle de la qualité.

Prenons comme exemple Internet Explorer 7, un vieux navigateur encore bien courant dans certains établissements. Parce qu’il ne répond plus aux standards de l’industrie et pour d’autres raisons techniques, ce navigateur peut augmenter le temps de production de 15 % à 20 %. Et pourtant, seulement 1% des internautes l’utilise encore. Le support d’Internet Explorer 7 peut être un choix volontaire, mais il est souvent préférable de présenter une page alternative expliquant les avantages à utiliser un navigateur à jour.

Ma page n’est pas identique à la maquette graphique…

Encore une fois, les navigateurs ne sont pas tous identiques, et ne disposent pas tous des mêmes capacités. De plus, on les retrouve sur des systèmes d’exploitation qui présentent leurs propres exigences. Des différences peuvent donc être observées dans ces circonstances:

  • Des navigateurs de marques concurrentes (ex.: Internet Explorer 10, Chrome, Safari ou Firefox) ;
  • Deux versions différentes d’un même navigateur (ex.: Internet Explorer 10 vs. Internet Explorer 8) ;
  • Un même navigateur sur des systèmes d’exploitation différents (ex.: Chrome sur Mac, Windows ou Linux).

Notamment, une différence facilement perceptible concerne le rendu du texte qui peut varier d’un navigateur à l’autre. Le rendu des images peut également varier lorsqu’elles sont redimensionnées. Il s’agit là de limitations auxquelles il est coûteux de remédier, voire impossible dans certains cas.

Par ailleurs, pour des raisons volontaires, la présentation de l’information peut différer sur des navigateurs plus anciens. Par exemple, un bouton avec des coins ronds dans Internet Explorer 10 aura des coins carrés dans Internet Explorer 8. C’est ainsi, car Internet Explorer 8 n’est pas en mesure de produire des coins ronds. En contrepartie, le fait d’avoir des coins ronds est une question esthétique qui n’apporte rien de plus au contenu de la page. Un usager utilisant Internet Explorer 8 n’aura pas conscience de cette altération, et il n’est en rien brimé dans l’accès à l’information. Cette approche est ce qu’on appelle l’amélioration progressive.

Avoir un site mobile, qu’est-ce que ça implique?

La réalisation d’un site mobile permet d’augmenter sa présence sur le Web. Considérer cette variante de votre site sera de plus en plus incontournable. Mais cela entraîne des changements radicaux à plusieurs niveaux de la conception.

« Verticaliser » le contenu

La disposition de l’information a longtemps été statique. Elle présentait habituellement deux colonnes dans la page, l’une pour le contenu, la seconde pour des informations complémentaires. Vient alors le temps de consulter ce genre de page sur un téléphone intelligent… Pas facile pour l’utilisateur qui doit agrandir le rendu de la page pour la lecture et naviguer le site de gauche à droite pour accéder à l’ensemble du contenu !

Intégrer un site pour qu’il réponde aux contraintes d’un écran d’appareil mobile nécessite l’utilisation de media queries. Il s’agit de commandes spécifiques à la mise en forme (CSS) qui permettront à toute cette information d’être « verticalisée ». Le contenu entier de la page HTML sera alors rendu dans une seule colonne. Il demeure le même, c’est sa présentation qui est adaptée à votre appareil.

Cette transition de la présentation de l’information entre un affichage pour un ordinateur et un affichage pour différents appareils mobiles, est un défi important. Le sujet doit de plus être abordé avec l’architecte d’information et le designer graphique avant même que la production ne débute.

Est-ce que l’utilisation est adaptée pour un mobile ?

Pour ceux qui ont déjà utilisé une interface tactile, effectuer le survol d’un bouton sans cliquer sur celui-ci n’est pas une action réalisable aisément. En effet, certaines habitudes que nous considérons acquises sur un ordinateur ne conviennent pas pour les écrans tactiles. Cette démonstration met en évidence la nécessité de prévoir l’utilisabilité d’abord sur un appareil mobile (Mobile First) .

Écran Rétina

Les écrans à haute densité de pixels (HDPI) se retrouvent principalement dans les téléphones et les tablettes, mais les ordinateurs en sont munis de plus en plus. Il est relativement simple d’avoir des images nettes et définies sur ces écrans. Pour y arriver, il est important de fournir des images de bonne qualité aux intégrateurs. Plus vos images auront une résolution élevée, plus votre rendu sera de qualité. Le contenu textuel est quant à lui vectoriel et sa qualité visuelle sera toujours optimale sur les écrans HDPI.

Qu’est-ce qui distingue un intégrateur d’un programmeur ?

La tâche première d’un intégrateur est de réaliser les pages d’un site pour la consultation du contenu depuis un navigateur. Un programmeur quant à lui s’occupe de la gestion du contenu. Cela peut être accompli à l’aide de bases de données, de système de gestion de données, de service Web, etc. Ces deux spécialités sont complémentaires. Le programmeur est responsable de la logistique du contenu, et l’intégrateur de sa disposition dans les navigateurs selon les circonstances d’affichage.

Quelles sont les priorités de l’intégrateur ?

L’objectif premier est toujours de livrer un produit de qualité. La préoccupation principale sera toujours, le contenu. Après tout c’est le besoin de communiquer qui justifie la présence d’un site internet. Par la suite c’est l’enrobage, la présentation visuelle des pages qui soutient le contenu par sa mise en valeur. Enfin, le but est de fournir une expérience utilisateur stimulante, adaptée à l’appareil utilisé, et cela, dans le respect des orientations déterminées avec le client. Il faut par contre garder en tête que les navigateurs et les tendances vont continuer d’évoluer… Et inutile de parler d’obsolescence planifiée ici, la technologie s’en charge largement pour nous !

________________________

Sources & références | Apprenez-en plus …

Facebooktwittergoogle_pluslinkedinFacebooktwittergoogle_pluslinkedinby feather

Laisser un commentaire