Rechercher
  • Sandrine FEARING

Sites web adaptatifs

Vous vous rappelez des premiers sites web ?


Il n'étaient conçu que pour les ordinateurs ... Aujourd'hui avec les nouvelles technologies et l'évolution des modes de communication, la conception de ces sites doit prendre en compte de nouveaux paramètres pour que leurs contenus soient disponibles sur d'autres supports (téléphones mobiles, tablettes, ...).


Pensez-y : combien de temps par exemple passez-vous sur votre téléphone par rapport à l'ordinateur ? Qu'est-ce qui est le plus simple à transporter lorsque vous voyagez au quotidien ?


De façon plus factuelle et chiffrée il y a environ 2.6 milliards d'utilisateurs de smartphones dans le monde, chiffre qui, selon les estimations, devrait tripler d'ici 2020 pour atteindre

6 milliards ... Concevoir un site web pour utilisation mobile, (adaptatif ou responsive), n'a jamais été autant d'actualité et capital pour votre business !


Qu'est-ce que cela signifie plus précisément ?


Pour vulgariser le processus, cela signifie que les designs présents sur votre site web sont conçus de façon à ce que l'apparence et le code du site change fonction de la taille de l'écran sur lequel il est visionné (Androïd, iPad, Home cinéma).


Là où cela se complique un peu c'est lorsque l'on doit aussi prendre en compte les différents navigateurs existants, car chaque navigateur a sa propre façon de présenter les sites web.


Mais ne vous inquiétez pas, tout le monde se trouve dans la même situation et la bataille est permanente et évolutive. La meilleure chose à faire est tout simplement de tester son site web sur autant d’appareils que possible, vieux comme récents et si vous ne vous sentez pas à la hauteur, reste à engager un dieu ou une déesse du développement web :)

Quelques bases de conception


Il n'y a pas de format standard de site web. En revanche un design de site web adaptatif doit avoir au moins trois versions différentes pour balayer large :


Petite : moins de 600 px, format pour la plupart des smartphones.

Moyenne : 600px-900 px, format pour la plupart des tablettes, gros téléphones et petits ordinateurs.

Large : plus de 900 px, format pour la plupart des ordinateurs.


Chacun de ces formats doit pouvoir contenir le même texte, les mêmes éléments graphiques

tout en gardant une qualité optimale. Par exemple, si vous réduisez une page pour que le contenu tienne dans un écran plus petit vous obtiendrez un texte illisible.


Autres éléments essentiels à réfléchir en amont


L'expérience utilisateur (UX)

Ce serait presque trop beau que de ne se limiter qu'à des problèmes de taille d'écran ...

Votre site doit prendre en compte l'expérience utilisateur ou plus précisément la façon dont vos utilisateurs viennent interagir avec vos pages. Quels contenus regardent-ils vraiment ? Sur quoi cliquent-ils ?


Créez votre site en fonction de votre contenu

Réfléchissez, au moment où vous créez votre arborescence à la façon dont votre mise en page et les différents éléments devront s'agencer pour s'adapter aux formats d'écrans.


Ergonomie

Il est toujours mieux de faire simple et sobre.

L'expérience sur mobile est toujours plus concentrée (du fait du manque de place).

Le sens de lecture doit être clair et rapidement compréhensible.

Que voulez-vous que les visiteurs fassent sur votre page principale ? Si c'est un maximum de clic sur "contactez-nous", il faut que vous rendiez ce bouton bien visible, etc.

Concevez votre plateforme en fonction de l'expérience que vous voulez créer.


Images flexibles

Il n' y a pas que le texte qui bouge ... les images aussi. Le code doit donc intégrer le changement d'échelle (en pourcentage).


La navigation

Étape importante, car c'est elle qui rend votre site, pratique, agréable à visiter et efficace ou au contraire, on ne trouve pas ce que l'on cherche, l'ensemble paraît brouillon et ... "clic" on va sur un autre site.

Plusieurs méthodes pour positionner les menus XXL : le menu hamburger par exemple, le menu déroulant ou la barre de navigation horizontale.


Quelques outils et tuyaux


1) votre navigateur web

Un outil qui tombe sous le sens, mais qui ne sera pas l’un des outils les plus efficaces pour avoir un aperçu de vos designs une fois sur la toile. Installez différents navigateurs pour voir comment votre site apparaîtra sur chacun d’eux. Recadrez ensuite la taille des fenêtres du navigateur.


2) Votre téléphone mobile

Très utile pour voir votre site sur un petit écran et tester l’UI/UX.


3) Les grilles fluides

Elles permettent de baser votre mise en page en fonction d’un pourcentage au lieu de pixels. Par exemple, si la largeur du contenu sur l’écran d’un ordinateur est de 930px, mais que vous voulez que ce chiffre passe à 320px sur un mobile : 320/930 = 34.4%. Lorsque vous utiliserez ce pourcentage, les éléments de votre design garderont leur taille proportionnelle les uns par rapport aux autres. Testez One% CSS Grid.


4) Google Resizer

Bon outil pour visualiser son site sur différentes tailles d'écran.

5) Media Queries

Il s'agit d'un type de code qui sera implémenté dans votre site au moment de sa construction. Il est important pour votre code, car il établit les conditions nécessaires pour que votre site s’adapte aux différentes tailles d’écran. Par exemple : “si la taille de l’écran est inférieure ou égale à 480px, changez le design au format tablette”. Essayez cet outil en réduisant la taille de la fenêtre de votre navigateur (depuis un ordinateur). Vous verrez que le contenu change d’échelle automatiquement pour s’adapter à ces nouvelles dimensions.


En résumé


Challenge, même pour les pros. Restez au courant des tendances UI/UX, assurez-vous que vos images sont flexibles, restez conscients qu'il existe plusieurs types de navigateurs et que ce qui prime c'est l'expérience utilisateur !





3 vues

Contact

 

contact@graphartgency.com

 

0643265727

73T Avenue de la République

94290 Villeneuve le Roi

  • Facebook
  • Twitter

Siret 518 616 743 000 28