Salut a tous,
actuellement je me crée un framework html, scss, js mais surtout full responsive...
La grille est construit sur 16 colonnes qui prennent 100% d'un conteneur ou du navigateur, jusque la tous va bien.
J'utilise Jquery au niveau adaptatif pour 2 raisons, changer les url des fichiers css et des images en fonction de la résolution..
Partant du principe que jquery est charger en dernier je me dis que forcement un petit appareil commence par télécharger les grand format d'image et le mauvais css puis une fois la page entièrement chargé, il est actualisé.

Tous ca pour dire que je cherche des solutions et que je voudrais bien votre avis:

1) Faire l'inverse et charger d'office les informations (url des images et css) pour les plus petit appareils en premier en partant du principe qu'un pc mettras beaucoup moins de temps utiliser les bonnes url...

2) Récupérer juste ce qu'il me faut du fichier jQuery pour créer une petite fonction a cet effet appeler en tout début de page...

3) Utiliser javaScript en début de page

Qu'en pensez vous, avez vous d'autres idées, merci d'avance !!!

Une autre solution:
4) détecter le device et changer les url via php et .htaccess
Je pense que je vais tous tester !!!
Comment faites vous pour obtenir des infos sur le temps de chargement sur un grand nombre d'itérations ?

Pas d'idées ? pas grave, je vous donnes des nouvelles ou cas ou !
J'ai leu quelque part que FaceBook utiliserais une solution ressemblant a la solution 2, fb étant assé long a charger, certains utilisateurs clic avant le complet chargement, pour cette raison, ils ont mis un code prévu a cet effet en debout de page...

si non, la solution 1 marche bien, sur pc et juste le temps de chargement les images sont légèrement flou mais cela reste acceptable...

je passe a la version php !!!

bonjour,

tu peux aussi envisager d'utiliser les médias Queries CSS3 pour spécifier le fichier css en fonction du device détecté

<link rel="stylesheet" media="screen and (max-width: 480px)" href="screen-mobile.css" type="text/css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="screen-web.css" type="text/css" />

Concernant les images à charger tu peux décider de cacher une image en fonction du terminal détecté en utilisant la propriété display( à none) dans le css.

sinon twitter bootstrap 3est plus optimisé pour le Responsive design

Bootstrap, je connais bien mais non, pour trop de raison sans aucune critique loin de la...
Les médias de css3, justement je veux pouvoir ajouter (a l’extrême) beaucoup de résolutions: 6, 7, 8 on ne sais jamais et âpres ca fait beaucoup de requête http au niveau css et pour le moment je n'en fait que 2 avec 5 résolutions...

pour les images, c'est pareil, pas de hidden ou le moins possible, la aussi je cherche une solution autre !

Je teste plusieurs idées pour trouver ce qui sera le plus rapide...