(via https://twitter.com/WalterStephanie/status/575421691578482688)

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)

Un peu l'impression que l'article ne pousse pas assez loin son sujet, mais c'est pas inintéressant. :)

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'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

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)

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. »

Extrait : « Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It's time to expect more from a web design tool. »

Un éditeur html qui pourrait être intéressant à tester.
(via http://www.warriordudimanche.net/shaarli/?W2tFCQ)

EDIT : Grrr -> « We have no plans to bring Macaw to Linux at this time. Once the Mac and Windows versions are released we will look into Linux. »

Pas trop fouillé, je garde sous le coude.

Quelques astuces pour centrer des éléments en CSS.
(via http://sebsauvage.net/links/?XzYNxw)

Extrait : « Si vous cherchez à voir ce que rendra votre nouveau site compatible Responsive Design sur des résolutions de téléphones ou de tablettes, vous avez 2 solutions... »

EDIT : Ah ouais, sinon, ya ctrl+shift+m sur Firefox pour enclencher la vue adaptative. C'est plus mieux. :)

Le responsive design, ce sera ma prochaine étape, faut que je m'y mette.
Voir aussi : http://lehollandaisvolant.net/index.php?mode=links&id=20130410131503
Voir aussi (bis) : http://lehollandaisvolant.net/index.php?mode=links&id=20130403153754

Ça peut-être utile pour tester un skin mobile.
(via http://cyrille-borne.com/forum/showthread.php?tid=1775)

#responsive_design