Catégories
livre Technologie

Projet Responsive Web Design


Ce livre de Rudy Rigot et Jérémie Patonnier permet de se poser énormément de questions sur la conduite d’un projet de site web intégrant du responsive web design.

La problématique n’est pas anecdotique : mon expérience m’a montré que dans 90% des cas un projet se déroule de la manière suivante :

  • Réalisation de maquettes par des graphistes
  • Réalisation du site par des développeurs

Certe on peut broder un peu autour en ajoutant quelques métiers tels que : marketing, SEO, ergonomies…

Mais cette approche simpliste marche très mal si le site doit s’adapter à différents terminaux (smartphone, ordinateur…).

Rudy et Jérémie nous font ici un retour d’expérience qui permet d’identifier des solutions concrètes pour résoudre ce problème et trouver un mode d’organisation plus efficace. En voici quelques une en vrac :

Faire de la pédagogie envers le clients : lui montrer et lui faire valider, non pas les maquettes, mais des prototypes fonctionnels sur différents supports.

Limiter l’engagement contractuel à quelques supports et valider sur ceux-ci.

Expliquer au client les principes de dégradation gracieuse, de design fluide, de design responsive et de design adaptatif.

Sans oublier quelques classiques de la gestion de projet :

Dans un projet, il ne faut jamais fixer plus d’un élément dans ceux-ci : délais, fonctionnalités, budget.

Au final la gestion de projet pour un site responsive permet de se rendre compte que le développeur frontend est bien plus proche du graphiste que ce que l’on peut imaginer.

Ce livre est un «must read» pour tous les chefs de projets web et d’une manière générale tous les intervenants sur ce type de projet.

Projet responsive web design : Du recueil des besoins à la mise en ligne

Catégories
livre Technologie

Responsive Web Design – Ethan Marcotte

Ce livre d’Ethan Marcotte est un bijou pour n’importe quel technicien débutant qui se pose la question d’adapter une maquette de taille fixe à un écran de taille inconnue.

Il offre les détails techniques et une méthodologie pour parvenir à un design fluide puis « Responsive ».

Si j’ai avalé l’ouvrage en quelques heures (facile à lire, drôle, concret…), je regrette de ne l’avoir eu que maintenant. En effet je connais et je pratique tout ce qui y est expliqué.

C’est un ouvrage que je recommande donc aux débutants… et qui est presque obsolète en 2014.

Responsive Web design

Catégories
Technologie

le « Responsive design », c’est du travail

Le «Responsive Design» est un ensemble de techniques qui consiste à faire en sorte qu’un site s’adapte à toutes sortes de supports : ordinateur, tablette, téléphone, télévision, console, papier.

À l’origine, ce n’est pas un problème : la plupart des sites sont consultables sur tout type de support, le confort du site, en revanche, est plus que discutable, si aucun travail d’adaptation n’est fait.

Et pourtant, le principal problème que je rencontre, lors de la réalisation, c’est que le graphiste n’a réalisé qu’une maquette et donc le client n’a validé qu’une disposition. En général, la situation est accompagnée d’une phrase lapidaire dans le cahier des charges : «il faut que le site s’adapte sur iPhone et iPad».

En fait, ça revient à dire que pour cette fonctionnalité, qui est attendue, il n’y a pas eu de conception : nous sommes passés directement de la demande du client à la réalisation.

Pour vous rassurer, ce problème n’existe quasiment pas si vous fonctionnez plus ou moins avec des méthodes agiles, ainsi vous pourrez améliorer rapidement le site par de courtes et nombreuses itérations. Le chef de projet est le mieux à même, étant donné sa visibilité sur le projet, de coordonner ces allés-retours et de prendre rapidement les bonnes décisions.

Dans tous les cas, au travail initial qui est de réaliser une page web, il faut ajouter le travail qui consiste à anticiper ces transformations là où elles sont nécessaires, en fonction des changements d’orientation ou des changements de dimensions.

Vous avez fait une maquette en 1500x700px ? Faites-la rentrer dans un petit échantillon de dimensions courantes : 320×480, 360×640, 768×1024, 800×1280, 980×1280, 1280×600, 1920×600… sans oublier d’envisager l’orientation : portrait ou paysage…

Alors, comment concevoir un site «responsive» ?

Le designer (au sens concepteur, donc celui qui fera une maquette fil de fer), s’il a la double compétence de développeur «front end», sera plus à même de comprendre les problématiques, les capacités et les enjeux liés à la technique.

Voici quelques pistes.

Un design simple est facile à adapter.

Si vous avez optez pour une architecture de l’information de votre site simple, voir minimaliste alors, de part la quantité d’information réduite à afficher en même temps, votre site sera facile à adapter à différents supports.

Ou par l’absurde : si vous mettez trop d’informations, ça ne rentrera jamais sur le petit écran d’un téléphone portable.

Corollaire : la surface de l’écran d’un téléphone est plus petite que celle d’un ordinateur de bureau.

La barre de scroll, est votre ami !

Passer d’un écran panoramique à un téléphone portable est à peu près équivalent à tourner une feuille de paysage en portrait. Il est donc inutile de concevoir un site en 16/9ième : tous les internautes ont un écran différent.

Par contre au niveau confort de consultation, faire défiler le contenu selon un axe, de préférence vertical, est le meilleur moyen de pallier à l’inconnu de la taille de l’écran. Ainsi mettre deux éléments l’un à côté de l’autre peut paraître évident, mais sur un smartphone il sera peut-être plus judicieux de les mettre l’un en dessous de l’autre. Le graphisme ne doit pas gêner cette transformation.

Pensez mobile puis enrichissez.

Comme nous venons de voir, le mobile est le plus contraignant, alors pourquoi ne pas hiérarchiser l’information pour ce support, pour ensuite s’enrichir en fonction de la place gagnée ? Think Mobile First !

Faites disparaître le contenu secondaire.

Dans le cas où vous avez un site existant ou que la conception est déjà trop avancée, il faudra surtout chercher à s’adapter au mobile. C’est le cas inverse du précédent, que je rencontre le plus souvent. L’idée est alors de conserver le contenu essentiel, le seul que l’on aurait mis si nous avions été dans la démarche «mobile first» et de retirer les autres par des méthodes plus ou moins subtiles : le mettre à la suite ou le faire apparaître sur une action de l’utilisateur (la navigation notamment).

Les éléments décoratifs sont-ils essentiels ?

Un certain nombre d’éléments peuvent être supprimés pour les écrans les plus petits, au passage c’est souvent ceux qui ont le moins de bandes passantes. Par exemple, une image de fond très grande qui ne peut être rendue sur un petit écran a tout intérêt à être supprimée. Dans la même idée, des boutons illustrés peuvent se passer de leur illustration ou de leur libellé selon les cas.

En résumé, si votre soucis est le contenu, sa hiérarchisation et le confort de son accès ; alors ce sera facile et utile de faire un site «responsive».