#adaptatif

HOURTOULE

Transport en bus

Aujourd’hui je suis particulièrement contente, car l’application que j’utilise pour créer des sites web (Adobe Muse) vient tout juste de livrer une nouvelle version qui m’a rendu de bonne humeur: la possibilité de créer des site webs “responsives”.

Pour ceux qui se demandent quelle est la différence, disons qu’un site web adaptatifs vous permet de créer différentes versions de votre site web, sous le même domaine. Au moment ou vous ouvrez ce type de site, le code détecte la largeur de l’écran utilisé et aiguille l’utilisateur vers la bonne version (moniteur d’ordinateur, tablette, téléphone). Cette techno est intéressante parce que l’expérience utilisateur peut vraiment être adaptée au support utilisé. L’ordinateur requiert une souris (en général), la tablette se tient avec les deux mains et les pouces font la majorité de la navigation. Même histoire pour le téléphone.

Un exemple de site adaptatif? http://www.coursdepianobeauport.com/ (oui, par un heureux hasard c’est un de mes derniers projets). La cliente avait beaucoup de contenu. Nous nous sommes entendus pour que la version “ordinateur” puisse être en mesure de tout montrer. Ensuite, elle m’a envoyé une version du contenu plus épurée pour la tablette, ainsi qu’une autre pour le téléphone. J’en ai profité pour m’assurer que chacune des versions soient optimisées afin que les visiteurs du site soient toujours confortables lors de la lecture et de la navigation.

Pour la partie plus “responsive” voici deux bons exemples:

http://getbootstrap.com/

https://html5boilerplate.com/

Essayez les: une fois ouvert sur le navigateur de votre ordinateur, jouez à redimensionner l’écran jusqu’à atteindre la grosseur d’un téléphone portable. Remarquez les éléments graphiques de la pages qui s’imbriquent les uns par dessus les autres, ou le texte qui grossi, se stylise différemment, etc. Dans ce cas-ci, la magie du code fait en sorte que chaque élément a une position précise selon la largeur de l’écran et s’adapte automatiquement, sans redirection.

Quelle techno utiliser? Personnellement, j’aime la diversité. Si le site a peu de contenu, est “one page” et est plutôt épuré, j’aurais tendance à aller vers le “responsive”.

On ne veut pas non plus surcharger les téléphones avec des éléments graphiques cachés. Donc si le contenu est exhaustif, allons vers l’adaptatif. À retenir: chaque site est unique et la solution choisie devrait également tenir compte des goûts et besoins des clients.

Et si, comme moi, vous êtes (beaucoup) plus visuel et qu’un vidéo vaut mille blogues, je vous invite à regarder la vidéo de cet expert de Muse qui explique lui aussi ce concept très clairement - mais en anglais - la différence entre adaptatif et “responsive”:

https://www.youtube.com/watch?v=YPRqvZumLkc

Ainsi que Wikipedia, qui est pas mal aussi: https://fr.wikipedia.org/wiki/Site_web_adaptatif

Truc: si vous vous posez la question à savoir si votre propre site est “l’ami des mobiles” (ça ne s’invente pas) Google a créé un outil pour vous en assurer:

https://www.google.com/webmasters/tools/mobile-friendly/?hl=fr

Seule déception, j’ai eu beau “googler” le mot “responsive” sur le web, je n’ai pas trouvé d’équivalent en français. La seule traduction que j’ai trouvé était “design adapté”. Mais ça ressemble à un mot fourre-tout qui ne différencie pas les deux concepts.

Traduction en français du thème freemium Auberge

Après vous avoir présenté le thème freemium généraliste Vantage, je vous propose d’en découvrir un autre, mais spécialement conçu pour les restaurants et autres établissements de bouche: Auberge.

(more…)

Traduction en français du thème Vantage de SiteOrigin

Je vous propose aujourd’hui de découvrir la présentation et la traduction en français de la version gratuite du thème Vantage de la plateforme Sud Africaine SiteOrigin qui est la créatrice du fameux constructeur de page Page Builder.

(more…)