{"id":6018,"date":"2016-12-16T07:00:25","date_gmt":"2016-12-16T06:00:25","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=6018"},"modified":"2016-12-16T07:56:43","modified_gmt":"2016-12-16T06:56:43","slug":"la-semaine-en-pixels-16-decembre-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-16-decembre-2016\/","title":{"rendered":"La semaine en pixels \u2013 16 d\u00e9cembre 2016"},"content":{"rendered":"
Comme chaque semaine, \u00a0un condens\u00e9 de mes lectures et ma veille web design et graphisme, exp\u00e9rience utilisateurs, design d’interface et mobilit\u00e9, mais aussi des outils et ressources pour le web design et de l’inspiration en tout genre : illustrations, photos, sites web, etc.<\/p>\n
Au programme : AMP, Facebook Instant Articles et Apple News, processus de d\u00e9cision,\u00a0designer avec Sketch et Zeplin, typographie responsive, BEM et syntaxe CSS, psychologie et exp\u00e9rience client, performance des font-icons, stockage dans le navigateur et tests utilisateurs. Du c\u00f4t\u00e9 des tutoriels un peu de CSS, progressive web app et d’accessibilit\u00e9 et un r\u00e9pertoire de vid\u00e9os de conf\u00e9rences meetups pour les devs.<\/p>\n
Pour plus de liens chaque matin vous pouvez me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n #Mobile<\/p>\n Your Guide to Mobile Publishing Formats: AMP, Facebook Instant Articles, and Apple News.<\/a> donc en r\u00e9sum\u00e9 on est pass\u00e9 de sites mdot au responsive a des sites responsives trop lourds et trop gros a cause entre autre des possibilit\u00e9s et au lieu de r\u00e9gler ce probl\u00e8me on offre gracieusement nos contenus \u00e0 des plateformes priv\u00e9es pour qu\u2019elles se chargent de l\u2019afficher de mani\u00e8re plus performante que nos sites devenus trop lents et trop lourds. Y a un truc qui tourne pas rond la ou c\u2019est juste moi ?<\/p>\n #D\u00e9cision<\/p>\n Before You Know It: How Feeling Confident Triggers Our Decision-Making<\/a>, une grande partie de nos d\u00e9cisions sont prises avant que l\u2019on en ai conscience, \u00eatre confiant joue \u00e9galement un r\u00f4le dans la prise de ces d\u00e9cisions<\/p>\n #Process<\/p>\n Why it\u2019s Okay to Reinvent the Wheel<\/a>, parfois il est utile et n\u00e9cessaire de r\u00e9inventer la roue<\/p>\n #Process #Design<\/p>\n \u201cHow to Share a Design System in Sketch, Part 1: Cloud Services\u201d<\/a>, ou comment partager ses designs et collaborer en \u00e9quipe sur Sketch<\/p>\n #CSS<\/p>\n BEM and Maintainable CSS<\/a>, une m\u00e9thodologie CSS<\/p>\n #CSS #Typography #Responsive<\/p>\n Get the Balance Right: Responsive Display Text<\/a>. De la typographie responsive avec des viewport units. Int\u00e9ressant mais je me demande si agrandir autant la typographie sur un tr\u00e8s grand \u00e9cran est une bonne id\u00e9e niveau lisibilit\u00e9.<\/p>\n #Process<\/p>\n 10 things to keep in mind working with Sketch & Zeplin. Developers will thank you!<\/a>, 10 astuces tr\u00e8s pratiques pour travailler avec Sketch et Zeplin<\/p>\n #Psychologie #UX<\/p>\n Use this simple psychology rule to improve your customer experience<\/a>, les utilisateurs se souviennent de la fin d\u2019une exp\u00e9rience et de la partie la plus intense.<\/p>\n #CSS<\/p>\n CSS Shorthand Syntax Considered an Anti-Pattern<\/a> par @csswizardry<\/a>, parfois utiliser les propri\u00e9t\u00e9s raccourcies peut engendrer des soucis plus tard dans le code<\/p>\n #Perfomance Font<\/p>\n Saving the internet 2000 terabytes a day: fixing Font Awesome’s fonts<\/a>, gagner de pr\u00e9cieux Mega en r\u00e9duisant le poids de Font Awesome, lisez \u00e9galement les commentaires tr\u00e8s pertinents en bas de l\u2019article<\/p>\n #Usability<\/p>\n Checkout Usability: Auto-Detect ‘City’ and ‘State’ Inputs Based on the User’s Postal Code (60% of Sites Don’t)<\/a> auto-d\u00e9tecter le ville en se basant sur le code postale de l\u2019utilisateur, beaucoup de sites ne le font pas<\/p>\n #Design #Sketch<\/p>\n 5 things to do before starting your next design file in Sketch<\/a>, 5 choses \u00e0 faire avant de se lancer dans votre prochain design sous sketch. Fonctionne aussi pour d\u2019autres logiciels.<\/p>\n #Data<\/p>\n Design words with data<\/a>, des outils et techniques pour optimiser le wording de vos sites et interfaces<\/p>\n #Storage<\/p>\n An Overview of Client-Side Storage<\/a>, article tr\u00e8s bien d\u00e9taill\u00e9 sur le type de stockage que l\u2019on peut utiliser dans le navigateur<\/p>\n #Snapchat #Design<\/p>\n Snapchat\u2019s Design and the Ephemerality of Modern Life \u2014 secret cave<\/a>, un autre article sur le design plut\u00f4t non conventionnel de Snapchat<\/p>\n #Process<\/p>\n You\u2019re a strong, beautiful user and you deserve more<\/a>, du guerilla user testing de l\u2019application IFTTT<\/p>\n #Process<\/p>\n More work, worse outcome<\/a> parce que parfois il ne faut pas travailler plus mais travailler mieux.<\/p>\n #Web History<\/p>\n Jeremy Keith a \u00e9crit un livre intitul\u00e9 \u00a0Resilient Web Design<\/a> qui revient sur diff\u00e9rentes approches du web design \u00e0 travers les ann\u00e9es<\/p>\n #CSS<\/p>\n Seven Ways You Can Place Elements Using CSS Grid Layout<\/a>, utiliser Grid Layout pour placer les \u00e9l\u00e9ments de 7 fa\u00e7ons sur une grille CSS<\/p>\n #Progressive Web Apps<\/p>\n Ou comment cloudfour a \u00e9t\u00e9 transform\u00e9 en Progressive Web App<\/a>, avec du support offline, des notifications, etc.<\/p>\n #JS #A11Y<\/p>\n How tabs should work<\/a>, un petit tutoriel sur le fonctionnement des onglets dans le navigateur<\/p>\n #Talk #Conference<\/p>\ntl;dnr, s’il devait n’en rester qu’un ?<\/h2>\n
<\/p>\nLes articles de la semaine<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\nDe l\u2019inspiration et de jolies id\u00e9es<\/h2>\n
<\/p>\nLes tutoriels de la semaine<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\nDes ressources utiles, outils et plugins pour vous faciliter la vie<\/h2>\n