“Responsive Design Patterns” Ethan Marcotte

“Responsive Design Patterns” est la traduction française d’un ouvrage publié originellement en 2015 chez A Book Apart.

Ethan Marcotte (173 pages, Éditions Eyrolles, ISBN 978-2212117660)

L’auteur, Ethan Marcotte, est mondialement reconnu pour être l’inventeur du terme de “Responsive Webdesign” et l’écrivain du livre éponyme en 2010.

Son second opus dans le web Responsive témoigne d’un tournant dans nos techniques d’intégration : nous raisonnons de moins en moins en “pages web” et de plus en plus en composants modulaires tels que des navigations, des paginations, des boutons de formulaires, etc. Alors comment rendre ces composants responsive et réutilisables ?

Sommaire

Du plus petit au plus grand
Navigation
Images et vidéos
Publicité responsive
Concevoir la grille infinie
Ressources
Les plus

Après une introduction vantant les mérites de la méthodologie “Mobile First”, quatre thèmes principaux sont traités dans le détail : le menu de navigation, les images responsive, la publicité et les grilles de mise en forme.

Le choix de ces composants est pour le moins judicieux, d’autant que l’auteur les traite dans un souci constant de l’amélioration progressive et de l’accessibilité.

Le tout avec justesse dans les détails techniques et les approches. On y trouve toutes les spécifications et technologies actuellement employées en production : scrset et <picture> pour les images responsive, des navigations fonctionnant sans JavaScript, AJAX pour l’ajout de publicités, … Personnellement, j’ai beaucoup apprécié son code JavaScript de navigation responsive.

Les moins

Sa méthode de grille de mise en page, censée remplacer les frameworks trop complexes tels que Bootstrap, est vraiment trop alambiquée et laborieuse même si le principe de base est bien pensé. Les colonnes sont en float, leurs marges et largeurs en pourcentage.

Jusque là rien d’alarmant, mais l’obsession de l’auteur à se baser systématiquement sur des ratios pour le calcul de ses valeurs conduit à se confronter à des width: 47.602739726027397260 pour caser deux blocs flottants l’un à côté de l’autre, ou encore des margin-right: 3.043968432919954904. Chiffres véridiques.

Par ailleurs, et de manière générale, on reste un peu sur sa faim et on regrette rapidement un choix aussi restreint de cas concrets. On aurait bien aimé rencontrer toute une panoplie de composants responsive tels que les fenêtres modales, les slideshows ou autres formulaires. D’autant plus lorsque l’un des composants traités (la publicité par exemple) ne nous concerne pas plus que ça.

Bref, comme souvent dans ce genre de livres volontairement concis : c’est très vite lu, très intéressant et pertinent… et assez superficiel pour nous forcer à aller piocher ailleurs si l’on souhaitte véritablement approfondir l’un ou l’autre des sujets traités.

Affinity #1 Designer

Un article à étudier de près…

Utilisateur d’Illustrator et de la suite Adobe depuis une quinzaine d’années, autant dire que les habitudes sont solidement installées. Autant dire également qu’au fil des années, la suite et ses logiciels ont pris une direction bien lourde, tentant de faire ingurgiter 3D et vidéo à Photoshop, tentant de faire devenir Indesign un outil d’UX et de webdesign (???)… L’ergonomie et les outils accusent le coup.

Affinity Designer, l’Illustrator killer.

Google Web designer, késako ?

googleweb

Google lance un nouvel outil destiné à créer des publicités et des sites en HTML 5 depuis un PC ou un Mac. Avec des options d’animation, de création 3D et d’édition de code simplifiée, Google Web designer est un logiciel gratuit plutôt prometteur ! 

 

https://www.youtube.com/user/GoogleWebDesigner/feed

https://www.google.com/webdesigner/

https://www.youtube.com/user/GoogleWebDesigner

UX Design

UX Design (User eXperience)

Le UX design consiste à penser et à concevoir un site web de manière à ce que l’expérience utilisateur soit la meilleure possible. Reste à définir ce qu’est une bonne expérience utilisateur.

UX design et UI design

diagrame_experience_utilisateur

L’interface utilisateur (UI pour User Interface) est un élément important pour un site performant. La conception d’une bonne interface utilisateur est codifiée et est essentiellement liée au zoning des pages ainsi qu’à leur apparence graphique (contrairement aux idées reçues, le design web est méthodique, et très peu artistique). L’expérience utilisateur va au delà : l’interface utilisateur n’en est qu’une composante.

L’expérience utilisateur (UX), qu’est-ce que c’est ?

Pour définir ce qu’est une bonne expérience utilisateur, il suffit de se remémorer les mauvaises. Qui n’a pas pesté devant un site mal fichu où il est impossible de s’y retrouver dans les catégories ? Combien d’entre nous vont immédiatement voir ailleurs quand un message d’erreur apparaît ? Qui a envie de remplir 5 pages de formulaires pour passer une commande à 20 EUR ? Le UX design vise donc à penser un site web de manière à ce que l’utilisateur se sente bien, en confiance, et puisse trouver les informations qu’il cherche tout en ayant envie d’interagir avec le site.

Parmi les éléments importants de l’expérience utilisateur, on trouve :

L’apparence du site et son ergonomie (cohérence du design, placement des éléments…)

Sa capacité à rassurer l’utilisateur sur sa crédibilité (pas d’erreurs, identification de l’entreprise, témoignages…)

L’efficacité du site : on doit trouver intuitivement et facilement les informations recherchées (moteur de recherche interne, catégorisation des contenus…)

Le référencement, qui doit permettre aux utilisateurs de trouver ou retrouver le site facilement depuis les moteurs de recherche

La facilité d’utilisation : par exemple, un processus de commande fluide pour une boutique en ligne

La capacité à s’adapter aux différents terminaux utilisés par les utilisateurs : mobile, tablette, portable, grands écrans…

Le UX design : un métier à part entière

infographie-expliquant-la-difference-entre-le-design-dinterface-et-dexperience

Si le UX design a longtemps été intégré à la conception des sites web de manière parfois un peu empirique, on trouve désormais des offres d’emploi spécifiques à ce domaine, ce qui montre l’importance croissante de cette “science”.

Il est également à noter que les moteurs de recherche comme Google recommandent depuis toujours de concevoir des sites favorisant une bonne expérience utilisateur. Certains critères SEO sont d’ailleurs issus de cette recommandation (par exemple le fait de ne pas mettre de popup sur les sites).