Votre avis sur les framework CSS/JS : Bootstrap, Foundation, skeleton..

WRInaute accro
Bonjour

Pour mes futurs projets j'aimerais partir sur des bases scènes css3 et html5 et sur des sites responsives.

Des framework tel que foundation et bootstrap semble approprié et permettraient également d’accélérer la mise en place de mes projets (sachnat que le temps me manque)

Bootstrap semble bénéficier d'une grande communauté mais il semblerait qu'il utilise encore les px au lieu des em (pour du responsive c'est pas terrible terrible), de plus il semblerait qu'il soit beaucoup plus délicat pour réaliser un site au design réellement personnel et qui ne soit pas un clone.

Fundation semble être plus modulable mais propose bien moins de UI

utilisez vous des framework CSS/JS?
Quel est votre avis sur le sujet.
 
WRInaute passionné
noren a dit:
j'aimerais partir sur des bases scènes
Bon courage, ce n'est pas donné à tout le monde de pouvoir monter sur les planches !

Au sujet de Bootstrap je regardais justement cela ce matin : http://expo.getbootstrap.com . Ca illustre bien que tu peux réaliser l'interface que tu veux. Et comme pour tout cadriciel, si tu es bloqué à un moment tu peux toujours bidouiller quelque chose de cochon sans respecter les recommandations, personne ne te jettera de pierre :)
 
WRInaute accro
:mrgreen: effectivement ça serait mieux sur des bases saines

D'après ce que j'ai pu lire le responsive de boostrap est loin d'être parfait notamment du fait qu'il utilise les px et pas les em
Qu'en penses tu?
Avec bootstrap faut-il faire du mobile first ou on fait comme on veut?
 
WRInaute passionné
Euh ... Pixels ou em, je ne m'en soucie même plus vu que Bootstrap gère tout ça. Et à vrai dire je ne me suis même pas posé la question vu que ça s'affiche correctement. Ca fonctionne, c'est propre et c'est tout ce qui m'importe :)
 
WRInaute occasionnel
Je ne connais que vaguement le bootstrap, mais utiliser les px sur le container me semble normal (les autres largeurs de divs étant des pourcentages).
Les em c'est autre chose, ça permet de redimensionner le texte en fonction des préférences du navigateur de l'internaute.

En fait je vois deux types de sites qui s'adaptent à la fenêtre navigateur :
-Les sites vraiment "extensibles", de plus en plus rares et souvent moches. On finit toujours par avoir un problème de lisibilité, par exemple quand un paragraphe s'affiche sur 100% de la largeur d'un widescreen de 2000px.

-Les sites qui proposent 3 ou 4 mises en page en fonction de la définition des écrans en utilisant les Media Queries en css 3 (widescreen, deskop, tablet, mobile).
Le container est souvent fixé en px, les autres div étant relatives au container.

Je pense que c'est bien de donner au moins une mesure en pixel pour maîtriser sa mise en page.
Exemple, on veut un site de 940px pour les écrans bureau :
Code:
.container {
width:940px;
}
.sidebar{
width: 15.957446808510638297872340425532%; /* 150/940 colonne ayant la proportion de 150px quand le container fait 940px */
}
.content{
width: 84.042553191489361702127659574468%; /* 790/940 contenu ayant la proportion de 790px quand le container fait 940px */
}
 
WRInaute accro
noren a dit:
D'après ce que j'ai pu lire le responsive de boostrap est loin d'être parfait notamment du fait qu'il utilise les px et pas les em
Qu'en penses tu?
Avec bootstrap faut-il faire du mobile first ou on fait comme on veut?
Hein ?
Le grid du bootstrap 3 est full fluide. Et l'approche est "mobile first".
 
WRInaute accro
J'ai quand même l'impression d'après mes recherches, que faire un design réellement personnalisé avec Bootstrap ne soit pas chose aisée (même avec LESS, ou surtout avec LESS tout dépend comment on se place)
Si on veut faire un mini sites rapides, esthétiquement agréable mais ressemblant à tous ceux utilisant cette plateforme, Bootstrap semble parfait, mais dès qu'on veut sortir un peu de la charte graphique par défaut proposé par bootstrap ça semble déjà bien plus galère. LESS ne semble pas des plus pratiques
Et à chaque mise a jour de Bootstrap on peut vite faire sauter toute notre mise en forme

Un avis la dessus?
 
WRInaute passionné
Je ne comprends pas ce qui te gêne. Bootstrap et sans doute aussi Foundation te mettent à disposition un cadre de travail et des outils. Tu peux très bien adapter une interface graphique aux bonnes pratiques qu'ils recommandent. Et si ça ne te convient pas, tu peux aussi sortir de ce cadre pour quelques exceptions tout en conservant les avantages du cadriciel par ailleurs.
Il ne faut pas confondre ces outils qui concernent davantage le code avec la partie graphique.
Sur cette page http://expo.getbootstrap.com/ je vois des interfaces qui n'ont rien de visiblement commun avec celle par défaut de Bootstrap ... qui n'a d'ailleurs pas d'interface complète par défaut.
(oui, cadriciel est le français de framework :) )
 
WRInaute occasionnel
Le bootstrap c'est juste une feuille css et un fichier .js qui prémâchent le travail. Une structure et ensemble de classes css a adopter et intégrer dans son code (une barre de navigation s'appelle .navbar et pas .navigbar). Le style graphique proposé par le bootstrap est entièrement modifiable (si tu héberges la feuille css et le fichier js).
 
WRInaute accro
Perso, quand le responsive est arrivé, j'avais commencé à rechercher aussi (logiquement) une solution adaptée à n'importe quel de mes projets.

Et bien, maintenant, je ne regrette pas mon choix d'en utiliser aucun.
On est jamais mieux servi par soi-même que de s'en remettre toujours à quelqu'un d'autre !

Le temps que tu vas mettre à chercher ce qui te conviendra puis apprendre à l'utiliser... c'est autant de temps perdu que tu aurais pu mettre à profit pour coder proprement en HTML5/CSS3 responsive.

Il m'a fallu en gros 2 jours pour m'adapter et entreprendre la remasteurisation de mes sites actuels en "valide" HTML5 responsive.

Le plugin "web developer" est une sacré aide en autre pour vérifier son site en responsive.
 
WRInaute accro
@Axiso et @Doubrovski : utilisez vous bootstrap pour de gros projets? pour des money sites?

@passion : généralement j'aime également tout contrôler mais le manque de temps et mes lacunes et mon problèmes d'organisation (en terme de développement) me poussent à regarder du côté de ces framework ( cadriciels :) ) pour espérer un obtenir un code CSS, HTML.. plus clean et opérationnel .
Mais je veux être certain comme tu le dis de ne pas regretter mon choix
 
WRInaute passionné
Les intégrateurs du dernier site de vente pour lequel j'ai travaillé migraient peu à peu vers Foundation. Avec plusieurs centaines de ventes par jour et des interfaces très graphiques.

Si j'y suis venu aussi, avec Bootstrap, c'est parce que j'ai intégré un module basé là-dessus. Aussi parce que ça donne de bonnes habitudes et de bonnes idées. Et surtout parce que ça fait très longtemps que je codais tout moi-même et qu'à un moment on se lasse :)

Tente de créer un premier site ou de mettre à jour un de ceux que tu édites déjà avec Bootstrap ou Foundation ou ce que tu veux d'autre, tu verras si tu es bloqué à un moment ou si ça te plait.
 
WRInaute accro
Oui je crois que c'est ce que je vais devoir faire. J'ai 2 projets, un gros et un petit, je ferais un essai sur le petit.
J’espère juste ne pas y passer trop de temps pour rien

je vais aussi regardé un peu du côté de foundation, même si je pense que le plus judicieux serait de passer par bootstrap qui semble plus complet surtout depuis la v3.

merci pour vos avis :wink:

je reste évidemment toujours ouvert à d'autres remarques et avis sur le sujet
 
WRInaute occasionnel
ça fait très longtemps que je codais tout moi-même et qu'à un moment on se lasse
Idem, maintenant je ne code que ce qui est agréable à coder, et je gagne un temps fou :)

noren-> Pour l'instant je n'ai utilisé le bootstrap que pour mettre en forme des scripts en local (pour économiser le temps habituellement passé sur le css). Ça ne change rien de particulier, si ce n'est le nom des classes.

Pour placer des pubs sur un responsive, tu auras les mêmes problèmes avec ou sans bootstrap : Adsense n'est pas encore très adapté...
 
WRInaute accro
Doubrovski a dit:
Pour placer des pubs sur un responsive, tu auras les mêmes problèmes avec ou sans bootstrap : Adsense n'est pas encore très adapté...
Hormis lors du resize du browser (problème connu chez eux) ça fonctionne très bien les "responsive ad units".
 
WRInaute accro
vous utilisez donc également des framework MVC : cakephp, symphonie etc?

j'ai l'impression que je vais regretter de passer par mon propre backoffice qui n'utilise pas le modele MVC et codé en procédural (et pas forcément le plus proprement).
mais fais ch*er j'ai déjà passé bcp trop de temps dessus pour maintenant changer et comprendre ces frameworks (et surtout acquérir de l'expérience en programmation objet) :/
saleté de google pingouin ils me met une pression qui m’empêche de réfléchir sereinement et de mettre en place mes projets sans précipitation :?

D'ailleurs petite question : est-il possible de passer son site en objet (et progressivement?) ?
Pour gagner du temps j'aimerais donc finir en procédural et ensuite prendre le temps une fois le site en ligne pour me familiariser avec la programmation objet pour ensuite updater en objet mon backoffice et mon site.
 
WRInaute passionné
SymFonY ! Pas Symphonie.

Tu peux très bien migrer vers Symfony ou ce que tu veux d'autre peu à peu, module après module.
 
WRInaute occasionnel
Symfony c'est génial mais ça nécessite un apprentissage assez long (c'est un framework PHP donc il faut coder l'ensemble du site même si c'est plus rapide en MVC). J'ai pas approfondi, mais j'ai refais un de mes sites sur un framework MVC perso plus simple, pour comprendre la prog objet en PHP. Finalement je n'ai pas publié le site pour tout refaire sur un CMS. Quitte à faire un MVC autant profiter des bundles et de la communauté symfony.

Aujourd'hui j'utilise principalement des CMS fortement customisés (je gagne du temps :)). Je pense que pour un site petit ou moyen, un CMS est très bien. Et pour une usine à gaz Symfony peut être une bonne solution.

EDIT:
spout-> tu as des bons résultats avec le bloc responsive ?
 
WRInaute accro
@Doubrovski : tu utilises quel CMS?

PS : oui désolé "Symphony" :mrgreen:

Je suis en train d'essayer Bootstrap et même la je galères. je sais pas dans quoi je m'embarque mais je commence sérieusement à constater mes nombreuses lacunes. Voilà ce que c'est de plus coder pendant des années :?
 
WRInaute accro
noren a dit:
D'ailleurs petite question : est-il possible de passer son site en objet (et progressivement?) ?
Pour gagner du temps j'aimerais donc finir en procédural et ensuite prendre le temps une fois le site en ligne pour me familiariser avec la programmation objet pour ensuite updater en objet mon backoffice et mon site.
Faire du full objet pour un projet purement web c'est un peu inadapté (avis perso).

Si l'objet s'avère pratique pour tout ce qui touche au métier lié au site (la fonctionalité demandée par le client) dans certains cas les besoins sont a peser en terme de perf car l'objet c'est propre et facile mais c'est lourd niveau mémoire si mal pensé ... hors un serveur web la mémoire c'est pas son fort.

Pour la partie web (tous ce qui touche a la gestion de vues et de contenu en http) un mix / procedural objet me semble l'idéal (de ma propre exp.)
 
WRInaute accro
En frameworks web j'ai utilisé:
- CakePHP (pendant 7 ans)
- Zend Framework 1 (pendant 10 mois)
- Django (depuis 1 an)
- Symfony 2 (depuis début de ce mois)
 
WRInaute accro
@zeb : faire un mix procédural / object nécessite également une très bonne organisation. Quoi qu'il en soit j'ai pris la décision de continuer ce que je suis en train de faire en procédural et sans utiliser de framework MVC plus le temps pour ça malheureusement. mais à côté de ça je vais me familiariser avec ces framework et surtout me mettre un peu plus à utiliser la programmation objet. Au moins dans l'éventualité où je dois me mettre à nouveau à chercher du boulot :?

@spout : je voix que tu as utilisé tous les plus gros framework ;) j'imagine qu'une fois essayé et maitrisé on peut difficilement s'en passer. D'ailleurs avec un framework comme cakePHP peut-on faire absolument réaliser toutes les applications web que l'on souhaite? ou peut-on facilement se retrouver bloqué?

Concernant bootstrap je commence un peu depuis hier à comprendre, mais je persiste à dire que lorsqu'on veut personnaliser le truc ca devient vite plus compliqué ou alors on est obligé d’intégrer des couches CSS pas forcément très jolies jolies tout en étant très prudent.

Je n'arrive pas encore non plus à comprendre le mobile first sur Bootstrap. je comprend le concept mais je ne vois pas bien comment il est optimisé.
J'aimerais entre autre pouvoir faire en sorte que des images ne soient pas du tout chargées sur la version mobile et je n'ai pas encore trouvé comment faire.
c'est comme pour le carrousel, même si on ne souhaite pas l'afficher sur le mobile il semble de toute façon que les images se chargent quand même
Quoi qu'il en soit sur bootstrap en tout cas j'ai pas l’impression que sa soit disant approche mobile first soit optimisée (après il est fort possible que c'est uniquement parce que je ne n'ai pas encore bien compris)

Pour les images il faudrait pourvoir faire un truc dans le genre j'imagine (c'est un exemple)

Code:
.imagelogo
{
 background-color: #ffffff;
}

@media (min-width: 768px) {
.imagelogo
{
background-image:url(logo.jpg);
background-repeat: no-repeat;
} 
}

ensuite :
Code:
<div class="imagelogo"></div>

donc normalement si on est bien en mobile first il charge sur mobile uniquement la class imagelogo avec background-color, exact?

mais comment faire pour qu'il affiche l'image sur la tablette et le pc bureau alors que le div est vide? même si je défini une taille fixe, si le div est vide rien ne s'affiche. même ne definissant un width et height ca ne chnage rien (ou même un background-size). Dois-je inclure cette image dans une autre balise que div?
 
WRInaute accro
noren a dit:
D'ailleurs avec un framework comme cakePHP peut-on faire absolument réaliser toutes les applications web que l'on souhaite? ou peut-on facilement se retrouver bloqué?
En général on px faire bien plus que ce que l'on aurait imaginé au départ.
 
WRInaute accro
Tu sais t'a en fait deux options sur les 4/5 ans qui viennent.

Soit tu te fixe sur un code closed source a toi qui évoluera au fil de l'eau
Soit tu passe d'un framework a un autre (ou même tu reste fixé sur un produit).

Dans les deux cas tu finira avec un genre de framework ... le tiens ou celui d'une communauté.
Dans les deux cas tu maitrisera a fond la mise en ligne d'un site rapidement.

Essaie de te projeter en avant avec une solution open ou closed qui te permet tout (ta solution aboutie ou une solution maintenue) et compare a ce stade car c'est là que les vrais différences se font importantes et que TES priorités sont importantes.

(dépendance ou indépendance, maintenance, connaissance approfondie du code, facilité de modification, évolutivité, ...)

------------------

Perso je suis parti sur du closed car le code ne me rebute pas (c'est peut être mon seul vrai point fort d'ailleurs)
Le code est aussi une chose qui, vue le temps qui passe, s'apprend le plus facilement au fur et a mesure.

Je ne peux donc illustrer que mon choix (closed) mais je sais que j'installe ce que je veux en une journée, je n'ai pas besoins de plugin pour quoi que ce soit (tout a été intégré dans le core au fil du temps) c'est modulaire comme tous les CMS que j'ai croisé et qui m'ont inspiré. Je connais le code comme si je l'avais fait (tu m'étonne), la maintenance c'est quasi 0 mis a part un passage php 4 a 5 qui m'a demandé une semaine de cogitum. Un code qui ne souffre pas de failles connues (ce qui n'implique pas qu'il n'en ai pas mais ce qui limite 90% des attaques que je vois passer en rigolant). Une empreinte web unique (c'est du zeb pas du WP ou autre). Aucune ligne de code qui me soit inconnue (je fais des changements profonds en un clin d'oeil) etc ...

Certes j'ai réinventé la roue sur qques années et je suis passé d'un béta a une V4 mais c'est 0 souci depuis pas mal de temps. Sur les WP que j'ai je suis toujours en train de passer pour voir si il faut pas cliquer sur "mettre a jour" en serrant les fesses pour que ça plante pas en route ... L'Open ça a du bon (qque soit la techno en partant du framework de base ou en partant d'un CMS aboutie clé en main) mais les soucis sont au mieux "réguliers" ou "grandissant", en comparaison le closed source est plus régressif dans la gestion des problèmes (avis perso).

Truc tout con qui est arrivé il y a qques semaines je suis passé a une version X+1 de truc qui est open source et là patatrac tous mes repères changés pour ue simple question de design backoffice a la con ... la dessus comme d'hab core mis a jour les plugins qui suivent sur la quinzaine suivante ... Sincèrement j'(ai autre chose a faire pour faire vivre mes sites que faire de la maintenance ça me gonfle terriblement. A côté de ça faut surtout pas lever le capot pour modifier une ligne de core afin de mettre en œuvre un truc génial a toi car t'est bon pour recommencer 3 mois après ...

Il est certains que je suis léger sur les solutions open source car c'est pas ma grosse part de pratique mais jamais je ferais le chemin inverse surtout si c'est pour des projets a moi.

Je comprend en tous cas que ton choix soit difficile :D
 
WRInaute accro
je partage ton point de vue, mais si encore j'avais un excellent niveau en programmation et que j'étais quelqu'un d'organisé, le problème se poserait pas. :mrgreen:

Malheureusement j'ai de grosses lacunes, je me rend compte que mon backoffice n’est pas forcément des plus pratiques (pas MVC, de templates etc.) et j'ai continué pendant des années sur de mauvaises fondations en rajoutant des couches puis encore des couches.

je me mord les doigts de pas avoir écouté ma femme qui n'arrêtait pas de me répéter de me mettre à jour en informatique pour ne pas me retrouver à la ramasse :mrgreen:.
J'ai fait juste de la communication et de la rédaction (à 2 balle en plus) pendant des années, j'ai pas essayé d'évoluer et m'adapter, résultat je me retrouve à devoir tout comprendre (voir réapprendre) et maitriser, sur une durée bien trop courte. D'autant plus que sur ce laps de temps je peux uniquement me faire la main sur des sites qui seront mon gagne pain. Je n'aurais même pas eu le temps de me faire la main sur des sites de test.

Quoi qu''il en soit je n'ai jamais aimé être trop cependant d'api, framework, CMS etc. pour des raisons que tu as cité (entre autre) . même si mon appli est développé avec les pieds je la connais et elle répond "quasiment à tous mes besoins (surtout depuis que je travail dessus ces 2-3 derniers mois).

Donc pour le moment la seul framework que je vais devoir accepter c'est Bootstrap. Même si j'ai du mal à faire tout ce que je veux avec je me rends compte que ça va me faire gagner normalement beaucoup de temps au moins pour la mise en forme et le responsive. Et les mises à jour de Bootstrap seront beaucoup plus simples et plus facilement modifiables en cas de soucis (enfin je pense)

Eh puis je sais pas pourquoi mais un framework réalisé par tweeter m'inspire confiance sur le long terme :)
 
WRInaute occasionnel
@Doubrovski : tu utilises quel CMS?
Désolé je réponds avec un peu de retard...
J'utilise surtout wordpress. Les inconvénients des CMS dont parle Zeb sont vrais... il faut souvent faire des mises à jour. Mais en principe si le code personnel est bien séparé du code de base (child theme) il suffit de cliquer sur un bouton. M'enfin ça ne m’empêche pas de "serrer les fesses" pendant les mises à jour comme l'indique Zeb.
Par ailleurs, Worpress est flexible et peut être utilisé comme un framework.

Je suis plutôt pour m'affranchir des développements génériques avec des frameworks ou des librairies. Par exemple en javascript, la librairie jquery simplifie énormément le code comparé à du JS pur, ou AngularJS, un framework qui permet d'utiliser du JS en intervenant directement sur les balises et attributs html. Et puis les frameworks permettent généralement d'avoir un code esthétique et très lisible.

Bref, de mon point de vue c'est à chaque fois un projet à long terme (maîtriser un framework ou créer le sien).
Je suis plutôt pour faire un petit MVC pour comprendre le concept, pour ensuite passer sur un vrai framework qu'on ne pourra de toute façon pas égaler. Pour des projets simples je prends souvent des CMS.
 
WRInaute passionné
Doubrovski a dit:
si le code personnel est bien séparé du code de base (child theme) il suffit de cliquer sur un bouton
Et rien n'empêche de ne pas tout mettre à jour. On peut prendre le risque d'estimer qu'un code n'aura pas de nouvelles failles après quelques années.
Et de la même façon on peut ne pas mettre à jour la dernière version du cadriciel et rester sur sa version actuelle en se contentant des mises à jour mineures. Par contre il faut que l'éditeur du code propose un genre de LTS de temps en temps.

Doubrovski a dit:
J'ai oublié, si tu veux comparer plusieurs framework, j'étais tombé sur ce projet :
J'ai téléchargé l'archive des projets, pour voir celui qui représente le moins de volume de code. Je sais que ça ne correspond à aucune vérité absolue mais, pour un même résultat, il y a quand même des chances que le code le plus léger est celui qui nécessite le moins d'interventions.
CakePHP : 445ko
Symfony2 : 693ko.
Les autres dépassent le méga-octet.
 
WRInaute accro
J'viens de télécharger le blogmvc:

CakePHP: 321 Ko
Django (il y a 3 versions): alternate (CBV design): 294 Ko
SF2: 505 Ko
ZF2: 1.76 Mo (#FAIL)
 
WRInaute passionné
En effet pour Django, je n'avais pas ouvert tous les répertoires.
Par contre je n'obtiens jamais les mêmes volumes que toi. Ah oui, je suis en MiB ...
 
WRInaute occasionnel
Je sais pas si le poids des fichiers est vraiment représentatif de la concision du code.
Si l'un a charge la version classique du bootstrap, l'autre la version minifiée, ou si le codeur commente énormément :)

Le code que je comprends le mieux est celui de cakePHP. Sans doute car les tutos qui m'ont aidé à faire des MVC étaient calqués sur cakePHP...
 
WRInaute passionné
Perso j'aime bien bootstrap qui est facile à customiser
Dernièrement j'ai fais mon site de photos avec http://www.landolia.fr et le .com pour la version en.

Bon c'est peut être pas la meilleur intégration mais on peut faire ce qu'on veut avec.
 
WRInaute passionné
Car l'année dernière il n'y avait pas la 3 ;)
Mais je pourrais upgrader quand j'aurais le temps pas de problème
 
WRInaute accro
As tu déjà eu l'occasion d'utiliser le carousel bootstrap? si oui saurais tu comment faire en sorte qu'il n'apparaisse pas sur mobile, et surtout que les images de ce carousel ne se charge pas non plus sur mobile. Le display none, ne semble pas être une bonne solution.
 
WRInaute accro
oui mais le hidden-phone fait juste un display:none :/
Ce qui n’est pas très bon pour les mobiles étant donné que les images se chargeront quand même, j'aimerais éviter de bousiller le forfait de leur 3g ;)
 
WRInaute passionné
Tu ne charges le carousel que au dessus d'une certaine résolution alors.
Genre
si res>480px alors include ('carousel.php');
 
WRInaute accro
C'est justement ce point que je ne maitrise pas. Pour faire ce test c'est en javascript côté client que ça se passe, donc comment lui dire de charger une page php côté client :/

J'imagine que l'ajax peut être la solution. j'y verrais peut être plus clair quand je serais plus à l'aise avec l'Ajax.
 
WRInaute accro
La détection par user-agent c'est également franchement pas jojo, tester des tonnes de user-agent, d'autant plus qu'il peut toujours y en avoir des nouveaux. Et ca me semble lourd.

Il y a bien une solution qui me vient à l'esprit, c'est celle d'avoir les images du carousel directement dans une class du css exmeple:

Code:
.carouselimg1
{
 image-background : url(img1.jpg)
 ...
}

.carouselimg2
{
 image-background : url(img2.jpg)
 ...
}

on fait x classes correspondant aux nombre d'images maxi qu'on a dans le carousel (généralement entre 3 et 5), ensuite
les images devront toujours garder toujours les mêmes noms (img1.jpg, img2.jpg, img3.jpg -<--- si on a 3 images dans le carousel). Dès qu'on ajoute une nouvelle image elle devient img1, img1 devra être renommée en img2 et img2 devient img3

De cette façon c'est au niveau du backoffice au moment de l'ajout d'une nouvelle image qu'on effectue le plus gros du travail (renommage des images)

ensuite avec les media queries combinés avec le display;none on devrait éviter ce chargement d'images sur mobile.

Mais la mise en place en amont est un peu plus chiant mais au moins on évite de travailler avec du javascript ou de tester les user agents.

Qu'est ce que vous en pensez?
 
WRInaute accro
oui et si tu regardes bien c'est exactement la technique que j'ai indiqué d'ailleurs :wink:
images du carousel intégrés dans le css et utilisation ensuite des media queries pour éviter qu'elles se chargent sur le navigateur si on est sur mobile.

La seule chose qu'ils n'expliquent pas sur ce site c'est comment faire lorsque ton carousel sert à mettre les dernières actus sous la forme d'images. Les images du carousel doivent changer régulièrement, mais si tu les indiques dans ton css, soit tu fais un css dynamique (je ne vois pas comment faire) soit tu es obligé (comme la solution que j'indique plus haut) de définir x class avec des background-image toujours identiques et tu es obligé de travailler dans ton back office sur ces noms d'images pour conserver toujours les mêmes (un peu comme une liste chainée).

je sais pas si je suis assez clair :?

remplacer les images sur mobile ok, c'est effectivement une solution si on souhaite conserver le carousel mais tu seras confronté exactement au même probleme : "comment éviter de charger également les grosses images" :wink:

la solution idéale serait que les navigateurs utilisent mieux le display:none et ne chargent pas les images, malheureusement ce n'est pas le cas de la plupart (je ne sais pas pourquoi d'ailleurs c'est dommage) comme on peut le voir sur le site que tu indiques
 
WRInaute occasionnel
Ah oui j'avais pas vu que la solution utilisait forcément background-image... c'est pas pratique.
Sinon tu peux utiliser javascript/AJAX, avec bilbiothèque ou framework JS :
-Modernizr permet peut-être de charger des scripts de façon asynchrone et tester les media queries.
-Ou AngularJS qui permet sans doute de charger un slider
-Peut-être simplement avec jquery :
http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image

Certes, des personnes désactivent le JS mais j'imagine que le carousel est en JS, et ce langage est adapté pour éviter de charger des éléments, un peu comme "l'infinite scrolling" utilisé par google et facebook.
 
WRInaute accro
oui il faudrait que je regarde de ce côté là également, mais ca me semble également bien lourd au niveau code pour un simple carousel :/

Et je n'ai pas encore trouvé d’exemple concret facile à comprendre avec cette méthode sur le net (j'ai surement mal cherché et pas assez)
 
WRInaute occasionnel
J'ai jamais trop exploré ce domaine non plus... A mon avis c'est faisable sans Ajax. Peut-être qu'un truc comme ça en jquery pourrait fonctionner :
Code:
<!DOCTYPE <html>
<head>
    <title></title>
</head>
<body>
    <div class="carousel"></div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(function() {
            var lg = $(window).width();
            if (lg > 728) {
                $('.carousel').append('<img src="http://placehold.it/500x500">'); // trucs pour grands écrans
            } else {
                $('.carousel').append('<img src="http://placehold.it/200x200">'); //trucs pour petits écrans ou rien
            }
        });
    </script>
</body>
</html>
(mais il faut probablement améliorer la détection mobile. Et les robots ne lisent probablement pas ces images).
Sinon j'ai trouvé http://adaptive-images.com/ mais j'ai pas compris comment ça marchait.
 
WRInaute accro
Bon bin normalement c'est bon j'ai mis en place la méthode avec le css uniquement, j'ai donc juste a écraser l’image que je souhaite modifier dans mon carousel et à définir les images dans le css (img1, img2, img3)

Dans mon backoffice me restera plus qu'à définir quelle image sera l'image active lorsqu'on arrive sur la page et l'url de l'article associé. Et normalement c'est bon les images ne se chargent pas sur mobile combiné avec le "display:none" et les media queries. Donc plus besoin de passer par les user-agent ou autres subterfuges :wink:

Je suis allé voir sur le site que tu as indiqué : http://adaptive-images.com/ c'est intéressant et même si j'aime bien l'idée du "adaptatives images" le problème c'est que la solution qu'ils proposent et toutes les solutions existantes actuellement en générales sont lourdes a mettre en place et aucune norme n’est encore encore en place.
Je suis plutôt partisan pour limiter le code "non indispensable" et j'attends de voir comment ça va évoluer

PS : j'ai également précommander un bouquin sur Bootstrap, j’espère y apprendre des trucs sympas
 
WRInaute accro
Je verrais bien j’espère que sur les 500 pages qui composent le bouquin j'apprendrais des petits trucs sympas.

J'ai toujours eu une préférence pour les bouquins :wink:
 
WRInaute accro
le bon gros spam comme on l'aime :roll: -http://www.commentcamarche.net/forum/affich-31048994-bootstrap-ou-pas-bootstrap message du bas ...
 
Discussions similaires
Haut