Une introduction à la façon dont le web design responsive fonctionne – Partie 2

Cet article est a deuxième partie de l’article intitulé « Une introduction à la façon dont le web design responsive fonctionne – Partie 1 ».

Dans cet article, nous chercherons à expliquer comment différents éléments interagissent pour former ce que l’on appelle aujourd’hui la création web responsive.

En bref, ce que nous appelons les « fluid layout » (mise en page fixée en pourcentage) affectent le CSS structuré d’un site Internet, ce qui contrôle sa mise en page et donc son affichage sur différents appareils. Les requêtes des médias, d’autre part, concernent le CSS liées à la stylisation ou au rendu, et peuvent être conceptualisées comme une série de questions ou d’une logique conditionnelle liée au périphérique sur lequel elle est consultée.

• Dispositions de largeur fixe et « fluid ».

Auparavant, les sites Web étaient basés sur des largeurs fixes et une proportion de mise en page. Il s’agit de l’ancien temps, calqué sur l’industrie de l’imprimerie et des journaux, lorsqu’une publicité ou un article faisait une taille bien définie. Les sites Internet, cependant, ne sont pas aussi limités et peuvent se développer. Deuxièmement, contrairement aux journaux, la lecture ou l’affichage d’une page dépend de l’appareil ou du navigateur sur lequel elle est consultée.

Pour cette raison, une approche basée sur les pixels est redondante et n’est pas vraiment adaptée aux sites Web. Lorsque les tailles de périphériques multiples ont commencé à apparaître, l’approche de largeur fixe était obsolète et n’a pas bien fonctionné. Ainsi, au lieu des pixels utilisés pour décrire la taille des objets qui composent un site Internet, les développeurs ont commencé à utiliser un pourcentage pour indiquer des proportions. Par exemple, au lieu d’une image d’une largeur de 300 pixels, elle représente maintenant 50% de la largeur totale de la fenêtre.

Cela explique pourquoi, lorsque vous redimensionnez la fenêtre d’un site, les éléments se réduisent et se développent en conséquence. Cependant, il y aura une étape où les éléments de la page se réduiront lorsqu’ils ne seront plus lisibles sur l’écran où ils sont affichés.

C’est à ce moment-là que nous devrons présenter un autre niveau de «techniques» pour optimiser les petits appareils avec des interfaces différentes telles que les écrans tactiles. C’est à ce moment-là que le deuxième élément de la conception Web responsive vient dans les requêtes Médias.

• Requêtes aux médias

Les requêtes multimédias sont un ensemble de questions que le site Internet demande à l’appareil ou au navigateur dans lequel il se trouve, afin qu’il puisse s’adapter à une conception prédéfinie pour l’optimiser. Pensez-y comme un code vestimentaire pour un site Web, par exemple, lorsque l’ordinateur pourrait être mieux adapté aux «décontractés», un mobile pourrait être mieux adapté aux versions «formelles».

Donc, toutes les requêtes multimédias sont en train de vous demander «qui êtes-vous, à quel point êtes-vous important, avez-vous un …?» Sur le navigateur ou l’appareil, et en ajustant l’affichage et la fonctionnalité du site.

En revenant à la relation avec la conception « fluid », cela se révèle utile lorsqu’une proportion est devenue trop petite pour être idéale pour le périphérique sur lequel elle est visualisée. La mise en page devra être ajustée ou « empilée », de sorte que ses éléments seront étendus en conséquence. Par exemple, les requêtes Media peuvent dire «si l’écran du périphérique est inférieur à 600px largeur = afficher cette version», une disposition de 4 colonnes s’ajuste pour devenir un site Web à 2 colonnes et vice versa.

Souvent, ces éléments sont également appelés «points d’arrêt», car ce sont des points où la mise en page «se casse» ou «raccorde» à un nouveau format. Par exemple, un affichage sur ordinateur peut avoir 4 × 1 images l’une à côté de l’autre sur la page d’accueil, mais peut être de 2 × 2 pour un mobile.

Comme vous pouvez l’imaginer, il existe des possibilités infinies que vous pouvez réaliser ou personnaliser pour différentes requêtes multimédias et, pour cette raison, la conception Web responsive est une approche évolutive pour l’avenir et permet plus de créativité.

Alors, pourquoi tous les sites Web ne sont-ils pas responsive ?

La majorité des sites Web à l’échelle mondiale sont désormais adaptés aux mobiles. Seulement 11% des meilleurs sites sur Alexa n’ont pas de conception responsive. Et bien que la conception de site Internet responsive soit une solution fantastique pour la navigation mobile, elle a ses propres défis.

Une conception Web parfois responsive peut ne pas être une bonne solution pour diverses raisons.

• Test (temps et coûts)

Lorsque vous obtenez un nouveau site Internet, vous devrez tester correctement le fonctionnement de toutes les pages et les liens. Auparavant, les entreprises de création de site Internet prenaient en compte le temps de création pour un site affiché sur un ordinateur de bureau et deux ou trois navigateurs, pas plus.

Aujourd’hui, le fait de tester un site Web responsive implique néanmoins beaucoup plus de variables et, en tant que tel, prend beaucoup plus de temps et donc plus coûteux. Bien que cela dépende de la complexité de votre site Internet, il convient de le considérer, en particulier si vous faites le test vous-même ou avez un budget limité.

• Limites avec une fonctionnalité complexe

De nombreux sites Internet s’appuient sur les fonctionnalités principales de leur site pour leurs opérations commerciales et leur génération de revenus. Bien que la conception de site responsive soit flexible dans son application, il convient de discuter plus en détail de la compatibilité de vos besoins avec votre concepteur de sites Internet. Par exemple, les bannières publicitaires ne sont généralement pas adaptables selon les affichages, donc, selon la plate-forme de service Web utilisée par votre site, la conception responsive peut ne pas être adaptée.

• Coût

Bien qu’ayant un coût parfois conséquent, les sites Web constituent un élément central d’une entreprise à la fois pour l’image de marque et la génération de prospects. La plupart des propriétaires d’entreprises apprécient cette valeur et sont plus ouverts à investir dans la conception de leur site dès le début.

À mesure que votre activité devient de plus en plus concurrentielle avec les meilleures pratiques en ligne, des fonctionnalités supplémentaires comme le fait que votre site soit adapté aux mobiles n’est pas superflu, mais bien une exigence qui évolue. Plus de 20% des recherches de Google sont effectuées sur un appareil mobile et les recherches locales sur un appareil mobile augmentent de sorte qu’il est impératif pour votre stratégie sur les moteurs de recherche, d’avoir un site Web mobile.

Ce que cela signifie pour la conception de sites Internet ?

Les changements dans les conventions pour la conception Web sont déjà apparents. Ceci est principalement dû à l’adoption d’approches «mobiles first» pour la conception de sites Web. Le défilement vertical est l’action naturelle d’un navigateur mobile, et maintenant, beaucoup de sites s’orientent vers le défilement vertical, plutôt que sur la navigation latérale. La montée de «une seule page» ou les longs sites continus est due à leur adaptabilité à un design adapté aux mobiles.

L’autre changement qui est devenu évident dans les tendances de conception de sites Internet est la prévalence de composants conviviaux tactiles. Les boutons sont maintenant plus grands, les tables sont moins fréquentes, les navigations sont moins complexes et les vidéos et les formulaires sont intégrés, plutôt que sur des pop-up.