background preloader

Ergonomie

Facebook Twitter

Introduction au responsive design : comment rendre son site responsive sans trop d’efforts. 10 avril 2013 Depuis quelques mois, beaucoup de développeurs et d’intégrateurs web entendent parler de responsive design , c’est à dire avoir un seul site web qui s’adapte parfaitement à la taille de l’écran de l’utilisateur… Seulement au final, peu de sociétés ont le courage de se lancer dans cette voie, et de transformer leur site pour que celui-ci soit “100% responsive”.

En effet, cela demande énormément de travail : il faut un design totalement adapté, une intégration quasi-parfaite, des choix marketing importants, une recette plus complète (définitions d’écran * navigateurs web = démultiplication du nombre de tests), etc. Aujourd’hui, je vais donc vous présenter rapidement en quoi consiste la création d’un site responsive, et comment transformer, sans trop d’efforts, votre site classique en un site agréable à consulter sur tablettes et smartphones ! 1) Le responsive, en quoi ça consiste ? Ainsi, rendre son site responsive peut être réalisé de différentes façons : Comment fait-on cela ? Creer un site Responsive. Le RWD, s'adapter au nouveau cadre Comment concevoir aujourd'hui une interface qui réagira aux écrans de demain ? Comment ajuster le rendu à son support ? Telles sont les questions du Webdesigner, plus que jamais confronté à la problématique du multi-écran.

Car entre l'ordinateur de bureau, l'ultraportable, la tablette tactile et le smartphone, voir la WebTV, il ne sait plus ou donner de la tête. Ainsi, la diversité des résolutions d'écran lui impose un nombre gradissant de contraintes, mais la conception d'une interface souple et adaptable enrichit son expérience et renouvelle son approche du Web.

Cette explosion des usages confirme bien la place prépondérante que le Responsive Web Design va prendre dans l'univers de la création Web. Vous allez donc pouvoir, au travers de ce dossier et de ses tutoriels, appréhender cette technique, connaitre les spécificités qui y sont liées et découvrir les secrets de la conception d'un site RWD. Au sommaire. Creer une interface Responsive cohérente. Nous allons voir dans ce tutoriel comment proposer une interface adaptative en fonction de différentes résolutions d'écran. Pour ce faire, et afin de bien comprendre la manipulation des media queries et le principe des feuilles de styles parent-enfant, nous n'utiliserons pas, ou très peu, les pourcentages et préférerons l'usage des pixels. Enfin, nous utiliserons trois feuilles de styles séparées. Pour chacune des résolutions visées, nous mettrons en place des jeux chromatiques, des chaines de caractères et des images différentes dans la partie supérieure, bien que pour construire des éléments structurels HTML et des chaines de caractères il sera toujours préférable de faire appel à JavaScript ou, mieux encore, à un langage serveur comme PHP.

Enfin, nous aborderons la question de l'emploi de CSS3, des solutions JavaScript d'émulation de CSS3 pour Internet Explorer 7, 8 et les particularités de CSS3 pour Internet Explorer 9. Voir la page de demo Télécharger les fichiers sources. Ergonomie d’un site web et ligne de flottaison. Le débat a longtemps fait rage parmi les ergonomes. Mettre du contenu sous la partie directement visible à l'écran sans avoir besoin de scroller sur une page web était une hérésie pour certains. Qu'en est-il en 2014 ? Ce que l'on nomme le pli, le fold ou la ligne de flottaison est-il encore aujourd'hui une barrière à la visibilité du contenu complet d'une page web ?

Mais où est le "Fold" Le fold (en français : pli) est représenté par la limite basse de ce que vous voyez à l'écran quand vous affichez une page web. Pour en voir plus, vous devez "scroller", c'est-à-dire utiliser la molette de votre souris ou l'ascenseur à droite de la page, ou bien votre doigt sur une tablette ou un smartphone.

En image, voici la représentation de la ligne de flottaison en rouge sur notre page d'accueil la semaine dernière pour mon écran. Le fold : Une ligne virtuelle qui varie d'emplacement selon l'outil de visualisation. Doit-on encore se préoccuper de cette limite ? Des habitudes qui changent En conclusion. Ergonomie web : les mythes et légendes ont la vie dure... Malgré le travail acharné de grands ergonomes Web reconnus (Amélie Boucher et Jean-François Nogier chez nous, ou Steve Krug et Jakob Nielsen aux USA, pour ne citer qu’eux), des mythes perdurent en donnant des réponses à l’apparence facile et pratique aux profanes, tout en dépréciant notre démarche au passage. Grâce aux ouvrages de Steve et Amélie dont je me suis inspiré pour cet article, et en y ajoutant mon expérience personnelle, je vous livre ici une courte liste de 12 légendes qui sont encore colportées régulièrement sur l’Ergonomie Web… 1.

La règle des 3 clics Ergonomie web : la règle des trois clics Vous avez déjà tous entendu cette phrase : “Pour que ton site web soit facile à utiliser, l’internaute doit trouver ce qu’il veut en moins de 3 clics, sinon il se barre” ou du style… C’est l’exemple typique d’un argument vrai sur le fond mais complètement idiot sur la forme. 2. « Les clients sont stupides » Ergonomie web : “les clients sont stupides” 3. “Round One, Fight !” Ergonomie Web - Lois de la Gestalt et Web Design. Responsive design : définition, fonctionnement, ressources et tutoriels. Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”.

Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant. De nos jours, il n’y a pas un client qui demande un site Internet sans demander une version mobile de celui-ci. Seulement en quelques années le nombre d’appareils et de résolutions servant à consulter des sites web a tout simplement explosé : ordinateurs, smartphones, tablettes, web TV, grille-pain, format portrait, paysage, etc… Entre 2005 et 2008 on a identifié pas moins de 400 résolutions d’écran différentes pour tous les appareils vendus.

Définition du responsive web design La mise en page La typo. Ergonomie 101 : les éléments d’une bonne scénarisation. Pourquoi scénariser le web? La scénarisation est un terme surtout utilisé dans l’industrie du cinéma. En contexte web, elle désigne l’étape de création de maquettes dites « fonctionnelles », aussi appelées les maquettes fil de fer ou wireframes. Un peu comme l’architecte dessine les plans d’une maison, l’ergonome organise l’espace sur les pages web. Pour faire des choix judicieux, il prend en considération plusieurs éléments : les objectifs du siteles personas (ou clientèle cible)les données d’utilisation du site (merci Google Analytics!)

Tout ça dans un but ultime : créer la meilleure expérience pour l’utilisateur. Le travail de scénarisation permet de communiquer facilement les orientations du projet au client et valider les enjeux du site. Un complément à l’arborescence L’arborescence illustre bien les différentes sections du site et chacune des pages qui s’y retrouvent. Le contenu d’abord Le contenu définit un site et permet aux visiteurs d’atteindre les objectifs souhaités.

Les 12 règles de l'ergonomie Web [Partie 1] Ergonomie et référencement : les meilleures pratiques pour 2013. Vous avez été plus de 300 à nous suivre lors de la conférence du salon e-Commerce Paris 2012. C’est avec un grand plaisir que nous vous livrons ici les Best Practices 2013 en matière d’optimisation du référencement et de l’ergonomie. Tout d’abord, un bref rappel des conventions et règles ergonomiques déjà en vigueur… 1. Conventions et règles en ergonomie Les conventions et règles à respecter dans une démarche ergonomique pour le haut de page (header) Vous remarquerez que beaucoup de ces éléments relèvent désormais du bon sens.

Ci-dessous, les éléments pour le footer : Les conventions et règles à respecter dans une démarche ergonomique pour le bas de page (footer) Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptées et appliquées par tous en 2013. Les conventions et règles à respecter dans une démarche ergonomique 18 critères répartis en 8 groupes : Voici les autres règles que nous vous proposons : 2.

La Méthode du tri de cartes (“Card Sorting”) 3. 4. 5. 6. 7. 8. 9. 10.