16099 shaares
35 results
tagged
webdesign
À propos de l'ergonomie de l'icône "hamburger" utilisée pour les menus.
EDIT : http://www.testapic.com/informations-pratiques/actualites/best-practices/menu-hamburger-outil-pratique-icone-inutile/
EDIT : http://www.testapic.com/informations-pratiques/actualites/best-practices/menu-hamburger-outil-pratique-icone-inutile/
« Paletton.com is a designer color tool designed for creating color combinations that work together well. »
Pas testé. /coude
Pas sûr que ce soit compatible avec ma très vieille version de Photoshop, mais je garde de côté, au cas où.
(et un jour, j'arriverai à passer définitivement à Gimp)
(et un jour, j'arriverai à passer définitivement à Gimp)
Un peu l'impression que l'article ne pousse pas assez loin son sujet, mais c'est pas inintéressant. :)
19 mini pages qui posent les bases du CSS. Pas tout regardé en détail, mais ça a l'air sympa pour les débutants.
Extrait : « An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. »
J'ai fait quelques modifs de la partie responsive du thème GReader de Kriss Feed (http://tontof.net/kriss/feed/#screenshots). Rien de bien grandiloquent, remettre le bouton 'read', remettre les boutons de pagination, ajouter un effet quand on presse sur ces mêmes boutons et baisser légèrement la taille de police des titres.
J'aurais aussi voulu remettre le bouton 'mark as read', mais vu sa taille, vu qu'il ne demande aucune validation, je sentais venir l'accident en scrollant. Y aurait la possibilité de changer tous ces gros boutons par des icônes, plus petites et du coup un peu moins sujettes aux "miss clicks", mais ça me demandait de restructurer plus de choses dans le css, j'ai pas eu le courage. :)
C'est possible aussi que la taille des titres ne soit pas très confortable sur tablette, faudrait ajouter un media query intermédiaire. Peut-être plus tard, un jour, si je me retrouve à consulter mes flux sur tablette. En attendant, même si ça mériterait d'être peaufiné, ça fera le job.
Enfin bref, les screens et le fichier pour ceux que ça intéresserait.
Avant : http://files.nekoblog.org/uploads/imgs/krissfeed-modifs-before.png
Après : http://files.nekoblog.org/uploads/imgs/krissfeed-modifs-after.png
http://files.nekoblog.org/uploads/vrac/user.css (à copier dans le dossier 'inc' de votre installation Kriss Feed)
J'aurais aussi voulu remettre le bouton 'mark as read', mais vu sa taille, vu qu'il ne demande aucune validation, je sentais venir l'accident en scrollant. Y aurait la possibilité de changer tous ces gros boutons par des icônes, plus petites et du coup un peu moins sujettes aux "miss clicks", mais ça me demandait de restructurer plus de choses dans le css, j'ai pas eu le courage. :)
C'est possible aussi que la taille des titres ne soit pas très confortable sur tablette, faudrait ajouter un media query intermédiaire. Peut-être plus tard, un jour, si je me retrouve à consulter mes flux sur tablette. En attendant, même si ça mériterait d'être peaufiné, ça fera le job.
Enfin bref, les screens et le fichier pour ceux que ça intéresserait.
Avant : http://files.nekoblog.org/uploads/imgs/krissfeed-modifs-before.png
Après : http://files.nekoblog.org/uploads/imgs/krissfeed-modifs-after.png
http://files.nekoblog.org/uploads/vrac/user.css (à copier dans le dossier 'inc' de votre installation Kriss Feed)
« Design VS User Experience »
Copie de sauvegarde : http://files.nekoblog.org/uploads/imgs/design-user-experience.jpg
Copie de sauvegarde : http://files.nekoblog.org/uploads/imgs/design-user-experience.jpg
J'utilise le thème GReader pour Kriss Feed (http://tontof.net/kriss/feed/#screenshots), et quand un nom trop long ne contenant aucun espace est attribué à un flux, ça déborde pas comme il faut et l'affichage n'est pas très propre. Pour résoudre ça, il suffit d'ajouter la propriété white-space:nowrap; à l'élément dt.item-feed (ligne 138 du fichier user.css). That's all.
Avant : http://files.nekoblog.org/uploads/imgs/kriss-feed-nowrap.png
Après : http://files.nekoblog.org/uploads/imgs/kriss-feed-nowrap2.png
Avant : http://files.nekoblog.org/uploads/imgs/kriss-feed-nowrap.png
Après : http://files.nekoblog.org/uploads/imgs/kriss-feed-nowrap2.png
Ooh, c'est classe ça. :o !
(via http://www.warriordudimanche.net/shaarli/?vsDBSw)
(via http://www.warriordudimanche.net/shaarli/?vsDBSw)
Extrait : « Guide des feuilles de styles CSS, conseils et bonnes pratiques »
Je garde une copie ici : http://files.nekoblog.org/uploads/vrac/css-guidelines
(via http://hub.tomcanac.com/liens/?Pqs4zw)
EDIT : Même genre : http://www.campaignmonitor.com/css/ (vi http://www.dotmana.com/shaarli/?S8UKkg)
EDIT² ! http://adamschwartz.co/magic-of-css/ (via http://www.nous4.ch/shaarli/?IrLQ-A)
Je garde une copie ici : http://files.nekoblog.org/uploads/vrac/css-guidelines
(via http://hub.tomcanac.com/liens/?Pqs4zw)
EDIT : Même genre : http://www.campaignmonitor.com/css/ (vi http://www.dotmana.com/shaarli/?S8UKkg)
EDIT² ! http://adamschwartz.co/magic-of-css/ (via http://www.nous4.ch/shaarli/?IrLQ-A)
Une astuce vraiment pas con pour adapter les tableaux en responsive. Coude.
EDIT : http://codepen.io/geoffyuen/pen/FCBEg (via http://lien.shazen.fr/?ZJpc7w)
EDIT : http://codepen.io/geoffyuen/pen/FCBEg (via http://lien.shazen.fr/?ZJpc7w)
Extrait : « Pourquoi optimiser les images de son site ? Tout simplement, parce que cela a son importance pour le référencement mais aussi et surtout pour l’expérience utilisateur. Après tout, un site web est fait pour être consulté donc autant que l’expérience utilisateur soit la meilleure possible. »