Malgré toute les qualités que l’on peut apprécier avec un outil de production tel que Bootstrap, il existe néanmoins certains désagréments inhérents a ce framework, notamment la gestion des marges interne (padding).
Un point de rappel pour ceux qui connaissent ce problème lié à la mécanique sur laquelle s’appuie la CSS Bootstrap : L’intégration en cascade des classes bootstrap a pour conséquence de voir se cumuler les padding créant un effet d’escalier disgracieux. (suite…)

CSS depuis ses origines a toujours eu pour philosophie d’être un langage descriptif et déclaratif et non programmatif, bien que certaines fonctions comme calc() soit apparu dans les spécifications ces dernières années, son code est restée assez pure de tous langages algorithmiques.
C’est d’ailleurs bien en dépit de cette volonté qu’on vu le jour des meta langages comme SASS ou LESS afin de combler les faiblesses de son code et les redondances inhérentes à CSS. En fait grâce à son mode purement descriptif, il est resté et reste encore très lisible et accessible à tous : du webmaster, webdesigner au développeur front-end et son apprentissage est relativement aisé au regard d’un langage de programmation. C’est dans la simplicité que réside sa principale force, en revanche, le manque d’implémentation de variables est difficile à gérer sur de gros projets avec du muti-site, la création de thèmes enfants ou le moindre changement devient une tannée… (suite…)

Un petit article, pour ceux qui tardent à se mettre à Flexbox (Flexible Box) en production, et si il fallait commencer par un argument massif pour convaincre les retardataires, il suffit de regarder du côté de Bootstrap 4 qui embarque désormais cette spécification au sein de son framework. Même si on aime pas changer ses habitudes, c’est un petit effort pour bien des avantages, notamment, la prédictibilité de la mise en page face aux différents écrans, on est plus à la merci d’un float mal luné ou tout autre positionnement récalcitrant. Dans de nombreux cas, le modèle Flexbox offre une amélioration du modèle de boîte. Fini les problèmes de fusion de marge et les éléments auxquels il faut apporter le contexte BFC (Block formatting Context) pour gérer les flottants à qui on en demandait beaucoup face à se contexte des mobiles pour lesquelles ils n’avaient pas été pensé. (suite…)

En ce début 2018, l’arrivée d’InVision Studio nous invite a nous pencher sur ce phénomème que sont les outils de prototypage qui explosent depuis quelques temps, notamment depuis l’arrivée des contextes mobiles, on voit fleurir de nouveaux services connexes aux outils de webdesign historique tels que Photoshop ou Illustrator.

Pour qui ?

Même si les termes de concepteurs UI et UX peuvent faire penser aux webdesigner et graphistes web que ces outils ne sont pas pour eux, il n’en ai rien bien au contraire. Ces nouveaux logiciels sont partis du constat simple, que les outils de PAO n’était plus adaptés au flux de travail et à la création web. Notamment par le fait qu’ils sont limités à présenter des mockups statiques sans possibilité de mise en contexte ou d’intéragir avec elles ou même encore de laisser des commentaires en live. Côté intégrateur, il y a peu de passerelle entre les maquettes produites avec Photoshop et le code HTML, même si le logiciel de retouche d’image a fait des efforts pour exporter et extraire des informations pouvant servir aux codes CSS.
(suite…)

En cette fin d’année 2017, je peux faire un premier retour d’expérience sur l’année que je viens de passer à faire ma VAE (Validation des Acquis de l’Expérience) avec au bout l’obtention d’une licence pro webdesigner. Peut-être avez-vous déjà entendu ce terme de VAE ? sans savoir vraiment de quoi il retournait à travers cet acronyme très universitaire.

Qu’est-ce qu’une VAE ?

La VAE vous donne la chance et la possibilité d’obtenir un diplôme ou une certification correspondant à votre expérience professionnelle. Vous pouvez ainsi valoriser les compétences acquises et l’expérience accumulée au fil des années au même titre que si vous les aviez acquises par une formation équivalente. Cette notion est fondamentale, car il faut bien comprendre qu’il n’est jamais trop tard pour passer un diplôme. Le temps des études n’est pas un lieu du passé clos ou on ne peut se retourner qu’avec regret. De nombreuses formules existent pour se remettre en selle et continuer à progresser si on est motivé.
Tout comme le CPF (Compte personnel de Formation) la VAE est un droit individuel inscrit à la fois dans le Code du travail et dans le Code de l’éducation
(suite…)

Un site peut avoir plusieurs vies, plusieurs évolutions à la fois fonctionnelles et graphiques pour de multiples raisons, et souvent objectives, car on récolte tout un tas de renseignements au fil du temps, par exemple qui sont vos utilisateurs et comment ils réagissent face au site. C’est pourquoi on peut avoir beaucoup d’envies au départ d’un projet et parfois il faut se laisser le temps et le budget pour les implémenter au fil des saisons en regardant les tendances et en écoutant battre le coeur du site. Un bon moyen de mesurer le comportement du visiteur et d’augmenter le CTA, c’est évidemment l’A/B testing pour les sites e-commerces, un concept qu’Amazon n’a cesser d’explorer au fil du temps faisant de sa plateforme un objet de R&D constant et avec quel succès !. Toute chose étant égal, on peut aussi a son échelle vérifier les règles d’un bon uX. Notamment que les sliders maintes fois utilisés sur les sites e-commerce, ne sont pas toujours vos meilleurs amis. Si ils représentent de bons outils de communication, ils convertissent peu en réalité.
C’est pour cette raison qu’ont pourra leur préférer des mises en avant plus visibles et plus directes.
Notre client YPLFL en a profité pour faire évoluer quelque peu sa page d’accueil avec de nouvelles mises en avant et un nouveau coloris.

Des activités commerciales l’enseigne Carrefour n’en manque pas et parmi celles-ci figure une activité destinée aux comités d’entreprise et aux salariés afin de leur permettre d’acheter des cartes cadeaux. Cette activité est géré par le service Carrefour Pro qui nous a demandé de concevoir un nouveau modèle de site permettant l’achat de cartes cadeaux physiques et dématérialisées. Ces cartes sont également personnalisables par le truchement d’un module conçu à cet effet.
Pour ma part, ma mission a été de travailler sur l’interface graphique de cette plateforme et de réfléchir aux contingences UX. Afin d’inscrire le site dans la logique de l’identité de la marque, je me suis appuyé sur les guidelines existant pour concevoir ce nouveau service.

Comment faire aujourd’hui pour ce passer de tels outils lorsqu’on prétend travailler de façon professionnel dans le domaine du web. Je parle des task runner et en particulier de “Gulp”, mais je ne suis pas sectaire peut-être certains préféreront “Grunt”, c’est la même philosophie.

Mais c’est quoi un task runner ?

Les sites web répondent aux mêmes exigences que n’importe quel produit, celui d’être fabriqué selon un process de qualité itératif et complexe (minifier les CSS et JS, optimiser les images…) bref une multitude d’opérations ennuyeuses et chronophages. Vous l’aurez compris Gulp représente un gain de temps vous évitant de vous balader sur plusieurs sites pour par exemple minifier vos CSS… C’est en cela que les Task Runner sont devenus très importants dans un projet web. Il faudra pour cela se familiariser avec la console ou le terminal pour lancer les lignes de commande, mais c’est un apprentissage qui sera payant in fine. (suite…)