Maintenant que tu as attisé ma curiosité : quid du support navigateur ? Ça marche jusqu'à quel IE ? (avec le display:inline-block sur le li, les vieux IE vont peut-être gueuler ?) ]]> text/html https://www.nicolas-hoffmann.net/source/1604-Retour-experience-refonte-Prezenz-CSS-responsive-mobile-first.html#comment158485 Nico Sun, 29 Dec 2013 23:01:25 +0100

Petite remarque pour "colonne à deux, puis trois colonnes… impossible de faire cela autrement !"

Plutôt que de longs discours j'ai fait une démo avec inline-block basée sur la grille de suitcss (grille que j'utilise et qui permet de gérer les colonnes très simplement), ça te sera peut-être utile plus tard ; )

Pas besoin d'un item vide.

http://codepen.io/eQRoeil/pen/zaulD

La grille de suit https://github.com/suitcss/grid et les "grid-layouts" https://github.com/suitcss/grid-layouts permettent de gérer les colonnes de la grille au niveau du conteneur .Grid avec variation .v2-Grid--2col (etc.) les v2- v3- correspondant aux MQ , bref, mobile-first, très souple jette un oeil à la démo http://suitcss.github.io/grid-layouts/

Pascal ]]> text/html https://www.nicolas-hoffmann.net/source/1604-Retour-experience-refonte-Prezenz-CSS-responsive-mobile-first.html#comment158484 Pascal (eQRoeil) Sun, 29 Dec 2013 22:45:57 +0100

Beaucoup de choses à décortiquer et s’approprier, c’est toujours un succès ;) ]]> text/html https://www.nicolas-hoffmann.net/source/1604-Retour-experience-refonte-Prezenz-CSS-responsive-mobile-first.html#comment158483 Gaël Poupard Sun, 29 Dec 2013 12:06:53 +0100

Loïck : je vais jeter un œil ;)

Florian : effectivement, l'un des intérêts des micro-datas est le SEO.

Pour les CSS gzippées, cela se fait au niveau serveur, la solution la plus passe-partout est via un fichier htaccess sur un serveur Apache :
AddOutputFilterByType DEFLATE text/css

Si ces sujets ne te disent rien, il faut aller lire sur le sujet http://openweb.eu.org/articles/le-fichier-htaccess ;) ]]> text/html https://www.nicolas-hoffmann.net/source/1604-Retour-experience-refonte-Prezenz-CSS-responsive-mobile-first.html#comment158480 Nico Sat, 28 Dec 2013 08:42:50 +0100

Je n'ai pas compris l'intérêt des micros-datas, c'est pour le SEO ?

Je me demandais aussi, quel est le procédé utilisé pour servir du GZIP de ces CSS au serveur ? Ca fonctionne de quelle manière ? ]]> text/html https://www.nicolas-hoffmann.net/source/1604-Retour-experience-refonte-Prezenz-CSS-responsive-mobile-first.html#comment158479 Florian Fri, 27 Dec 2013 21:40:23 +0100

J'pense m'inspirer de ton article pour quelques modifs sur mon site du coup.

Sinon, pour la problématique du carré, je l'ai eu aussi sur la home de mon site (http://loickpiera.com). J'ai utilisé des li avec une width de 33.3333% (3 li par ligne), une height de 0 et un padding horizontal de 16.6667%. Je profite du fait que le pourcentage d'un padding est relatif au width de l'élément (je ne sais plus où j'avais trouvé l'astuce). Si ça jamais ça peut servir a quelqu'un... ;) ]]> text/html https://www.nicolas-hoffmann.net/source/1604-Retour-experience-refonte-Prezenz-CSS-responsive-mobile-first.html#comment158478 loick Fri, 27 Dec 2013 20:50:37 +0100

Retour d'expérience très intéressant et très riche, merci :)
Une question sur la problématique des icônes : pourquoi ne pas avoir fait le choix des webfonts ?
Cela aurait résolu ta problématique de retina et de variante par couleur des différentes icônes.
Au niveau poids je ne sais pas ce que ça pourrait donner mais on voit que la version actuelle à base de PNG consomme 220ko sur le first hit (http://www.webpagetest.org/result/131227_E0_NX9/1/details/) ce que je trouve énorme pour des icônes.

Qu'en penses-tu ?

Eric ]]> text/html https://www.nicolas-hoffmann.net/source/1604-Retour-experience-refonte-Prezenz-CSS-responsive-mobile-first.html#comment158477 Eric Lemoine Fri, 27 Dec 2013 20:39:05 +0100