Framework CSS Responsive

[Stéphane]

Salut à tous,

J'aurais besoin d'un conseil. Avant tout, je sis intégrateur Web dans une agence Web et j'ai débuter ce métier il y a 1an et demi (j'ai 35 ans !!). C'est une reconversion et je n'avais fais aucune étude dans ce domaine. Mais c'est une passion et on m'a donné ma chance et je l'ai saisi. Donc tout ça pour vous dire que si ma question est basique, je m'en excuse par avance ;)

Bref voilà notre agence propose du Responsive Design. Nous somme entrain de refaire notre site dans ce sens justement. Mais je n'ai utilisé aucun Framework et il faut dire que parfois, c'était folklo ^^.

La question que je me pose, c'est est-ce que l'utilisation d'un Framework CSS Responsive serait mieux ou pas ? J'ai trouvé Foundation de Zurb qui me semble vraiment sympa. D'ailleurs si quelqu'un l'a déjà utilisé en prod et peut me faire un retour ce serait cool :)

Ce que je me dis après, c'est si un Framework CSS peut facilement être utilisé sur un Magento, eZPublish ou Wordpress. Pour ce dernier je pense que oui mais les 2 autres je ne sais pas.

En tout cas, merci par avance pour vos réponses ;)

CSSement,

Stef

[Stéphane]

oups désolé pour les fautes je viens de m'en apercevoir... :P

[GoOz]

Salut,

Je ne vais pas être la meilleure personne pour répondre objectivement. Je suis pas anti-framework CSS... mais presque.

Si je suis sceptique sur les frameworks CSS de base, je le suis encore plus sur ceux orientés responsive webdesign (je dis bien responsive, pas fluid) et je t'explique pourquoi :
Pour moi, le bon RWD c'est un design avec des breakpoints fixés par le contenu (selon le choix du designer en fait) et non les résolutions ou devices ou que sais-je encore; de ce fait j'ai extrêmement de mal à concevoir qu'un framework CSS puisse prévoir toutes les possibilités selon toutes les mises en pages possibles sans avoir pléthore de déclarations qui... ne serviront jamais à rien.

Et puis, comme tu es apparemment débutant, j'ai plus envie de te pousser à y aller à la main pour bien maîtriser le concept. Quand quelqu'un recrute un intégrateur, il demande des compétences en CSS, pas en framework CSS. Le plus t'apprends avec les mains dedans, le mieux ce sera pour toi parce que tu vas apprendre et pour le projet parce que ce sera TON code et que tu le connaîtras.

Ça se sent non que j'ai certaines réticences, non ?  :P

Bon ce n'est que mon point de vue et ce n'est certainement pas parole d'évangile, je laisse quelqu'un plutôt pro-Framework dire ce qu'il en pense.

JC "GoOz" Pagnon

2012/12/5 Stéphane <stephan...@gmail.com>

oups désolé pour les fautes je viens de m'en apercevoir... :P

--
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes Professionnels francophones du développement web.

Cette discussion peut être lue sur le Web à l'adresse https://groups.google.com/d/msg/webdevfr/-/fh6Np0qa6jAJ.

Pour envoyer un message à ce groupe, adressez un e-mail à webd...@googlegroups.com.
Pour vous désabonner de ce groupe, envoyez un e-mail à l'adresse webdevfr+u...@googlegroups.com.
Pour plus d'options, consultez la page de ce groupe : http://groups.google.com/group/webdevfr?hl=fr

[Thomas ZILLIOX]

Salut Stéphane !

J'ai pas assez d'expérience avec les différents framework CSS pour te faire un retour d'expérience complet.
Néanmoins si tu veux les comparer il y a des gens qui l'ont déjà fait, notamment ici : http://responsive.vermilion.com/compare.php

Les frameworks CSS ont eu du mal à s'imposer, mais désormais je pense qu'ils sont bien vu par la plupart des intégrateurs.
Ça permet de donner un cadre, d'avoir un nommage cohérent entre les projets et donc du pouvoir, par exemple, revenir sur un ancien projet plus facilement.

Les différents framework CSS, dont Foundation sont utilisable sur la plupart des solutions back.
Je l'ai utilisé sur eZ Publish et je ne vois pas de raison pour ne pas pouvoir l'utiliser sur du WordPress :)

A bientôt,
Thomas.

[Thomas ZILLIOX]

Ah oui…
Mon mail c'est croisé avec celui de GoOz.

Il est vrai que pour gérer le côté responsive d'un site, je ne me repose pas non-plus sur un framework.
Je pense comme lui, que le responsive est encore quelque chose à faire à la main :)

Pour le reste de ses réserves sur les framework CSS, il est vrai que c'est bien de connaître le CSS avant d'utiliser un framework. Et en même temps, il est dommage de ne pas utiliser les outils qui sont utilisés pour la plupart des sites modernes.

Bonne après-midi,

Thomas.

[Yvain Liechti]

Bonjour,

Ce qui est marrant c'est que j'ai eu la démarche inverse de JC. J'attendais que quelqu'un de plus éclairé sur les frameworks y réponde, moi-même n'en utilisant pas.

Les frameworks css ne répondent souvent pas aux besoins.

Ils ne permettent pas de comprendre tout les méandres du css (donc pas bon pour ta monté en compétence).

En responsive, si ils se basent sur des résolutions définis c'est une mauvaise utilisation des breakpoints.

Et je rajouterai qu'il n'existe pas "Le framework de la mort qui tue qui sait tous faire vite et bien" et qu'il y a beaucoup de chance que ceux-ci changent ou ne répondent pas aux besoins sur le prochain projet. Se former à tous ces frameworks te ferait perdre plus de temps qu'il t'en aurait fallu pour faire le job à la mano.

Sachant que les specs de css évoluent vite, les framework devront suivre et ils ne le pourrons pas tous.

Donc à moins d'être sûr de son coup, je déconseille les frameworks css.

Cordialement,

Yvain LIECHTI (Ryuran)
http://ryuran.info/

[Véronique Lapierre]

Bonjour Stéphane,

Personnellement, je pense que les frameworks css sont de bons outils , quand il vous font gagner du temps , mais que sans eux  on s'en sortirai quand même, parce qu'on sait faire ;-) 
Tu peux te servir de Zurb par exemple pour une base de travail. (organisation des css, nomage etc.) mais rien d'indispensable.
Si tu veux, tu peux aussi jeter un oeil du coté de http://www.knacss.com, avec son knacss garni et gabarits css beaucoup plus léger, malléable et éducatif que les poids lourds du genre. 

Perso, toutes les fois ou j'ai essayé de me servir d'un framework css type twitter boostrap / zurb etc. j'ai perdu plus de temps que je n'en ai gagné ... 
à force, on se fait son framework perso on le complète au fur et à mesure.
L'indispensable pour moi maintenant c'est sass et compass, mais là aussi, il faut bien maitriser ce qu'on fait avant de s'en servir et c'est un autre sujet.

Bonne journée à tous et bonne fin d'année ...

PS: Si ça peut te rassurer, j'ai attaqué assez tard aussi (+ de 35 ans oops ! ) ce n'est pas grave :-)

Véronique  Lapierre
par mail : v...@vlapierre.fr
--------------------------------------------------------
"Content precedes design. Design in the absence of content is not design, it's decoration." Jeffrey Zeldman

[Stéphane]

Hello à tous !

Merci pour vos réponses.

Alors déjà je tiens à dire que j'ai quand même des bases solides (enfin j'espère !!) en CSS ;) Je suis certe débutant depuis 1an et demi en agence mais je travaillais le CSS chez moi à mes heures perdues depuis plusieurs années :) Donc en arrivant en agence, j'avais déjà des acquis avec les qualités et les défauts que ça comporte quand on est auto-didacte ;)

Bref voilà je tenais juste à le préciser !

Sinon pour les FW, pou être très honnête avec vous, je suis assez réticent sur leur utilisation. Mais j'en entends tellement parlé qu'à un moment, j'en arrive à me poser la question si je bosserai pas plus vite avec que sans. 

Mais ayant fait mon premier site en responsive, je me suis aperçu (et je rejoint GoOz sur ce point) que de faire une un site Responsive en 1 seule fois, c'est juste assez difficile, tant les contenus et parfois la présentation pour chaque page sont différentes. Et puis, pour la plupart d'entre vous, vous devez savoir qu'entre une maquette et l'utilisation que va en faire le client, c'est vraiment autre chose !!

Alors je me suis demandé si c'est moi qui est mal fait mon responsive et si un FW me sera utile, ou si c'est vraiment le cas et ce que dit GoOz me rassure, c'est difficile d'avoir un responsive top pour chaque page sans retoucher.

Bref en tout cas, vos avis m'ont bien éclairé ! J'en viens donc sur le fait que je testerai pour moi une intégration chez moi tranquillement et voir combien de temps je vais mettre avec un FW mais j'ai déjà un peu peur de la réponse :P

P.S : Merci Veronique, je me sens moins seul ^^

P.S2 : Thomas, c'est pas souvent que quelqu'un connaisse et utilise eZ Publish :) Donc tu fais des "Attribute View Gui" à fond ;)

[GoOz]

Loin de moi l'idée de complexifier ton choix, mais se faire un avis sur le potentiel bénéfice d'un FW après une seule utilisation, c'est malheureusement un peu rapide.

Je ne suis pas pro-FW mais je sais reconnaître leurs qualités : une fois maitrisé et approprié, on développe beaucoup plus vite les bases d'un site et on peut passer plus de temps sur les détails, ce qui est une bonne chose dans beaucoup d'agences web françaises qui, disons-le, ne sont pas toujours très regardant sur la qualité et n'hésitent pas à revoir les estimations de développement à la baisse (grand bien t'en fasse si ce n'est pas ton cas).
Le truc c'est que la première utilisation tu vas forcément mettre plus de temps à développer ton site qu'en from scratch mais avec le temps, tu iras à l'inverse (c'est le but quand même) plus vite. Passe donc plus de temps à observer comment le FW fonctionnne, le poids, évaluer la maintenabilité qu'à chronométrer.
De là, prends les mesures qu'il te siera.

:)

JC "GoOz" Pagnon

2012/12/5 Stéphane <stephan...@gmail.com>

Hello à tous !

--

Vous recevez ce message, car vous êtes abonné au groupe Google Groupes Professionnels francophones du développement web.

Cette discussion peut être lue sur le Web à l'adresse https://groups.google.com/d/msg/webdevfr/-/VINgBh59kcIJ.

[Véronique Lapierre]

Juste un petit truc pour préciser ma pensée, avec les FW prendre tout le package, n'est pas forcément la solution . 

On a rarement besoin de tout, comme pour Jquery ui ou quelque autre Boilerplate , on fait sa cuisine ( et c'est ça qui est sympa )... 

C'est en ce sens que je disais qu'à force on se faisait son FW modifiable en fonction du projet.

J'aime bien l'idée du truc qu'on fait à la main aussi, artisan toujours, ça n'empêche pas d'avoir de bon outils retaillés sur mesure. ;-)

Bonne soirée.

--

Vous recevez ce message, car vous êtes abonné au groupe Google Groupes Professionnels francophones du développement web.

[Adrien Leygues]

Hello,

personne ne parle des préprocesseurs LESS et SASS ? Il me semble que le gain de temps se fait essentiellement à ce niveau.

Adrien

2012/12/6 Véronique Lapierre <webetc...@gmail.com>

--
[ Adrien Leygues ]
http://www.paris-web.fr
http://www.bootleygues.net

[Julien Wajsberg]

pourquoi ?

il me semble que sur ce sujet, les préprocesseurs te permettent surtout de grouper à un endroit toutes les propriétés qui correspondent à un sélecteur, il se chargera de dispatcher ensuite les propriétés pour les différentes media queries au bon endroit. Ça fait sans doute gagner du temps sur la maintenabilité, mais pas sur la création initiale, à mon sens...

2012/12/6 Adrien Leygues <aley...@gmail.com>

[GoOz]

Bah je rejoins Julien. Les préprocesseurs servent surtout à écrire moins de code et donc développer plus vite. Un peu trop loin du sujet initial à mon sens : le RWD facile.
Rien n'empêche de faire du RWD avec du préprocesseurs mais ça ne facilitera pas la réflexion "responsive"... à mon sens aussi :)

JC "GoOz" Pagnon

2012/12/6 Julien Wajsberg <fel...@gmail.com>

[Adrien Leygues]

Ce que je retiens de la conversation :
- Comme il n'y a pas de valeurs cibles définies en RWD mais plutôt des break points, il est inutile d'utiliser un FW "RWD" puisque chaque design a ses break points
- C'est sympa de faire du maison pour apprendre mais tu as quand même des FW CSS éprouvés comme KNACSS qui réponde à l'objectif principal gagner du temps, sous entendu sur son temps perso. et sur le temps global du travail en équipe

C'est pour que je pense que le temps à gagner se fait plutôt sur l'utilisation d'un préprocesseur que d'un FW RWD.

Adri

2012/12/6 Julien Wajsberg <fel...@gmail.com>

[Julien Wajsberg]

Si je reformule, tu veux dire que comme notre temps n'est pas infini il faut choisir sur quoi passer du temps, et donc plutôt le passer sur l'apprentissage des préprocesseurs CSS que des frameworks RWD.

c'est bien le sens de ton discours ?

[Adrien Leygues]

Je dis qu'il n'y a pas de Framework RWD efficace et qu'on gagne effectivement plus de temps à investir dans un préprocesseur.

[Stéphane]

Pour ma part, j'utilise déjà scss pour mes intégrations et effectivement c'est vraiment excellent et un gain de temps.

Pour ce qui est des FW, j'ai lu justement un article sur le blog "La tête dans le Flux" très intéressant (comme souvent) et Raphaël (l'auteur) parle de knacss. Par contre, il semblerait qu'il faille faire attention à son utilisation car il peut devenir assez complexe sur certains point (ndlr : "KNACSSn'est pas forcément destiné aux débutants complets et certaines subtilités peuvent avoir de grosses conséquences." .

Mais n'ayant encore jamais utilisé un FW CSS, et qui plus est RWD, je pense que je vais étudier ça quand même.

A+
Stéphane
Site : http://www.tefdesign.fr (tutoriels, dessins, etc.)
Email : stephan...@gmail.com

[Thomas ZILLIOX]

Pour la question du Framework CSS je rejoint l'idée qu'il faut investir du temps sur 1 pour le maîtriser.
Ce qui te permet de gagner du temps sur le long terme.

Pour la question de faire son propre framework, ou feuille de style initial, c'est vrai que c'est bien, mais…
Si tu veux travailler un jour à plusieurs, les framework CSS connus permettent d'avoir une notation documentée et connus par tous.
Même s'ils évoluent, tu trouveras toujours un bout de documentation sur la version 1, ce qui ne sera souvent pas le cas sur ton outil perso.

Thomas.

PS : "Attribute_view_gui" mais bien-sûr ! Où comme dis le dicton, quelque soit la question, la réponse se trouve dans la classe eZContentObjectTreeNode :)

[Frank Taillandier]

Toi t'as jamais utilisé Compass ;)

Frank

[aurelien masfrand]

Tout ceux qui ont testé une fois la génération de sprite sur compass savent à quel point un préprocesseur peut-être utile.

Aurélien Masfrand

2012/12/6 Frank Taillandier <frank.ta...@gmail.com>

[Stéphane]

Une génération de sprite sur Compass ?? Ha c'est intéressant ça je ne savais pas :)

A+
Stéphane
Site : http://www.tefdesign.fr (tutoriels, dessins, etc.)
Email : stephan...@gmail.com

[Frank Taillandier]

Outre les sprites (http://compass-style.org/reference/compass/helpers/sprites/) Compass fait bien de chouettes trucs.

En plus des mixins officiels, @Moox en propose d'autres sur http://compass-recipes.moox.fr

L'objectif est d'abstraire tout ça en composants UI, vous pouvez participer au projet via Github : https://github.com/MoOx/compass-recipes

2012/12/7 Stéphane <stephan...@gmail.com>

--

Frank Taillandier

[Stéphane]

J'utilise scss couplé avec Livereload qui le gère très bien en natif (et compass aussi il me semble).

Mais j'ai déjà pas mal entendu de compass et je me tâtais pour le tester :)

A+
Stéphane
Site : http://www.tefdesign.fr (tutoriels, dessins, etc.)
Email : stephan...@gmail.com

[Nicolas Hoizey]

2012/12/6 Adrien Leygues <aley...@gmail.com>

Ce que je retiens de la conversation :
- Comme il n'y a pas de valeurs cibles définies en RWD mais plutôt des break points, il est inutile d'utiliser un FW "RWD" puisque chaque design a ses break points
- C'est sympa de faire du maison pour apprendre mais tu as quand même des FW CSS éprouvés comme KNACSS qui réponde à l'objectif principal gagner du temps, sous entendu sur son temps perso. et sur le temps global du travail en équipe

C'est pour que je pense que le temps à gagner se fait plutôt sur l'utilisation d'un préprocesseur que d'un FW RWD.

Pour bien exploiter Sass/Compass, notamment dans un contexte RWD, Vincent Valentin a développé petit à petit (en LESS initialement) un joli framework qui est maintenant utilisé sur quasi toutes nos intégrations.

Ce n'est pas encore suffisamment documenté, mais plus il y aura d'utilisateurs plus cela motivera Vincent… :-D

https://github.com/htmlzengarden/outline


 

--
Nicolas HOIZEY
http://gasteroprod.com/