Blaming others — David Larlet

#17133

How many people are blaming their connection because you made them load a 2 Mb image? How many people are blaming their outdated computer because you think a Single Page App is fancy on your latest Macbook Pro? How many people think they are stupid with your innovative mobile design full of anti-patterns?

Caring is accepting that it is your fault. And acting accordingly. Now.

https://larlet.fr/david/stream/2018/01/11/

Another reason why I love Firefox | nota-bene.org

#16999

Gros +1

Ce comportement de merde dans les pages-web doit être banni et ceux qui écrivent ça devraient servir de combustible pour le chauffage : https://lehollandaisvolant.net/?d=2012/03/22/21/48/48-css3-un-truc-a-eviter

Après, Firefox n’est pas le premier à outre-passer l’impossibilité de zoomer. Safari-Mobile le fait depuis un moment : https://mobile.twitter.com/thomasfuchs/status/742531231007559680

https://nota-bene.org/Another-reason-why-I-love-Firefox

Mobile Interface Myths You Should Throw Out The Window – Smashing Magazine

#16991

En gros, non, les utilisateurs mobiles ne veulent pas une version light de votre site (juste un truc adapté au tactile, mais pas forcément vide).

Et un truc pour les guidelines : les suivre à la lettre, c’est pas une bonne chose. Déjà parce que demain les guidelines auront changés, mais aussi parce le créateur de ces règles ne couvrira jamais tous les cas de figures possibles, à la fois pour une app et son dév, que pour l’usager (en gros : allume ton cerveau !).

https://www.smashingmagazine.com/2017/11/mobile-interface-myths/

image - 1110x781px

#16942

J’aurais pu ajouter ça à mon dernier article, dans les formulaires "chiants".

Celui de Mastodon : je sais pas vous, mais moi j’ai déjà un compte. Alors pourquoi le bouton « se connecter » n’est-il pas au moins aussi gros que le formulaire d’inscription ?

Le but c’est rameuter du monde ou bien de permet aux gens qui sont déjà là de pouvoir revenir ?

Je connais un seul site qui fait les choses très bien de ce point de vue, c’est Tumblr.

Le formulaire d’inscription fait les deux. Si on tape notre email + mot de passe dans le champ d’inscription alors qu’on a déjà un compte, alors il nous connecte. C’est pas beau ça ?

Et ça c’est loin d’être spécifique à Mastodon : Paypal aussi fait ça. Le bouton "login" ne ressort pas du tout dans l’interface tout flat.

Là encore, Tumblr fait bien : une page vide, avec juste deux boutons : un pour se connecter, un autre pour créer un compte. C’est si complique que ça ?

https://lehollandaisvolant.net/img/60/mastodon-bad-design.png

Bref, j’ai fait le tour des startups du Gouvernement – Graphisme & interactivité

#16480

Oh, je ne suis plus le seul à me taper la tête contre les murs à cause de ça !

Un seul exemple : le site de la Caf, caf.fr. Ah oui, pardon : c’est www.caf.fr, parce que les redirections .htaccess s’il manque le www, ils ne connaissent pas.
Bref, www.caf.fr, il est où le bouton pour se connecter ? Typiquement, vous avez 5 secondes pour trouver avant de vous énerver. Ici le bouton est à gauche, au milieu, en petit, sans couleur distinctive, sans forme remarquable, bref, perdu dans un océan de bruit.
Ah par contre, le site des impôts est bien plus clair.

J’en avais déjà parlé là : https://lehollandaisvolant.net/?d=2014/03/04/14/09/35-pourquoi-les-sites-des-services-publics-sont-ils-tous-aussi-pourris

(On notera que le site Voyage-SNCF s’est très largement amélioré depuis… que Captain-Train (devenu Trainline) est arrivé avec une interface utilisable)

https://graphism.fr/bref-jai-fait-le-tour-des-startups-du-gouvernement/

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

#16407

Éditer des polices (ajouter, modifier, supprimer des caractères).

C’est utile quand on fait des webfonts avec des icônes.
Il suffit d’importer les PNG ou SVG, de choisir celles qu’on veut dans notre fichier de police et il va pondre les fichiers de polices : Woff, Woff2, SVG, etc.

De façon générale, quand vous faites une webfont, je conseille de n’inclure que les icônes dont vous avez besoin.

Par exemple pour les icônes du material design de Google, il y en a des milliers. Tous les inclure ferait une police bien trop lourde à charger.

(ah et l’avantage des polices web sur les PNG par exemple, c’est la gestion des couleurs et des tailles : on peut afficher une icône et lui ajouter couleur, taille, ombre… en CSS comme on ferait avec du texte normal. C’est donc très maléable, et aujourd’hui c’est aussi bien largement supporté dans les navigateurs)

“Nudges”: How intelligent design persuades lazy users to do the right thing

#16320

When designing, make it easier for users to make the right choice, whatever you define right choice to be.

Gros +1

Certains l'ont très bien compris. Google par exemple. Comment ont-ils réussis à imposer un navigateur comme Chrome, alors que celui-ci n'a aucun point fort par rapport aux autres ? En forçant l'installation en même temps que d'autres programmes. L'installation s'y fait en opt-out, donc elle est faite par défaut. Résultat, en 5 ans, Chrome domine le marché.

https://blog.prototypr.io/nudges-how-intelligent-design-persuades-lazy-users-to-do-the-right-thing-67ce46b6a0e0#.buigr2ian

Do responsive sites have to be so tall on mobile? | Viget

#16269

Je suis d’accord : un truc que le responsive design fait, c’est qu’il réorganise à la vertical les éléments d’une page, faisant en sorte que la page est super longue, y compris simplement un article (juste par le fait des éléments qu’il contient).

Pour modifier ça, et mettre comme il propose, certains élements spéficique en ligne et d’autres en dessous en colonne, il faut utiliser du JS (pour déplacer physiquement les éléments au sein du HTML).

Une autre solution peut être le CSS avec Flex et Grid.
Le premier est largement supporté, mais le déplacement des éléments reste (selon moi) une fonctionnalité relativement secondaire des Flexbox (qui permet avant tout de faire des boîtes flexibles). Grid commence tout juste à pointer le bout de son nez, il n’est pas encore bien implémenté partout.

https://www.viget.com/articles/do-responsive-sites-have-to-be-so-tall-on-mobile

Material Design and the Mystery Meat Navigation Problem

#16212

Une petite critique du Material Design, et de certains de ses problèmes récurrents.

Concernant le « mystery button » y a un truc qu’il faut pas oublier, c’est qu’une même icône a une signification basée sur le contexte, de l’application. Et ça, ce n’est pas un bug, c’est bien une feature !

https://medium.freecodecamp.com/material-design-and-the-mystery-meat-navigation-problem-65425fb5b52e