13-06-2014, 03:36 PM
En fait c'est clairement pas une solution à appliquer tout le temps. Mais quand on prend certains exemples ça devient plus clair.
Exemple 1 : Un portfolio graphique. L'utilisateur pc et tablette va pouvoir profiter des créations graphiques dans une taille importante avec du texte en plus, du détail, des plugins jquery peut être pour la beauté du truc.
L'utilisateur cellulaire va devoir charger ces mêmes images énormes (adaptées par exemple à l'écran 23 pouces ou plus), ces même plugins lourds sur sa connexion 3g. Je me suis mal exprimé je ne parlais pas seulement de stylesheet différente mais également de redirection html comme on vous propose parfois "voulez vous accéder à la version mobile de ce site ?". Ce genre de message est très ringard en ce moment si on écoute la plupart des gens. Mais dans le cadre d'un portfolio on va vouloir charger des images plus petites puisque srcset n'est pas implémenté. Si on travaille en HTML / CSS natif sans utiliser de plugins on ne peut pas empêcher le chargement de données et même avec les solutions exotiques c'est un casse tête pas propre et pas ergonomique. Là il parait logique d'avoir une page différente bien qu'il soit tout à fait envisageable de faire le tout en responsive.
En webdesign comme dans tout c'est au cas par cas je trouve, je préfère bien évidemment le full responsive mais tant que des solutions comme srcset ne seront pas accessibles il faudra trouver des fallbacks pour privilégier l'expérience utilisateur plutôt qu'un "conscience rigoureuse de la pratique web" dans certains cas.
Cet exemple ne se marquait pas par la quantité de lignes mais plutôt par la nécessité de charger des fichiers différents.
Exemple 2 :
Un site qui à énormément recours à javascript et qui est en onepage avec parallax avec une grosse proportion d'éléments graphiques. Je l'ai rencontré irl et c'était très douloureux.
Hors de question de redimensionner en utilisant js, trop d'éléments, déjà trop de js sur la page, temps de chargement horrible. Une seule page contient toutes les données, c'est la requete du client, le tout défile en parallax donc chaque "page" doit faire 100% de largeur et 100% de hauteur, on voit déjà le problème se profiler, ce sont des images pas des textures, on DOIT les scale proportionnellement. Une image vaut mieux qu'un long discours :
![[Image: 409078example.jpg]](http://img4.hostingpics.net/pics/409078example.jpg)
Les images ne se scalent pas en fonction des résolutions, dans ce cas j'avais 16 pages différentes utilisant toutes au moins 15 images différentes qui devaient se repositionner. Dans ce cas là l'erreur de mon client à été de vouloir du responsive. J'ai fait ce qu'il m'a demandé mais je pense que c'est une erreur. Je m'explique :
1 - Page très lourde, mêmes images sur téléphone que sur grand écran.
2 - Code css très long et dégueulasse pour ne pas avoir trop de whitespace entre les images sur les dizaines de résolutions possibles
3 - Quel intérêt pour un utilisateur de mobile d'avoir autant d'images en tout petit ?
4 - Si jamais vous embauchez un designer demandez lui de créer le design mobile en même temps que le design full scale, là le client avait embauché un graphiste pour le design, une agence web pour le code (leur résultat mettait plus de 2 minutes à charger) et ensuite moi pour refaire le code et faire une version mobile
L'idée c'est que le contenu doit servir l'utilisateur et non pas "demeurer le même de manière figée". Mon client voulait le même rendu sur téléphone et tablette que sur PC. Quand je dis le même, je veux pas dire semblable mais il voulait exactement la même chose. Et ça c'est une erreur que beaucoup de gens ont en pensant au responsive.
Sur un autre site le point central est un champs de recherche. C'est le centre d'intérêt, sur la version mobile on à donc que ce champs de texte et un menu responsive plutôt que de retranscrire toutes les photos, décorations, images, commentaires... de la version pc. En gros ce que je disais ce n'est pas que c'est une bonne pratique de faire des versions différentes plutôt qu'une seule responsive mais seulement qu'il y à des cas de figures ou faire un fichier simplifié pour certaines résolutions est la bonne solution.
Ma conclusion : Responsive != retranscription exacte dans toutes les résolutions
et parfois il vaut mieux faire deux design qu'un seul responsive.
Exemple 1 : Un portfolio graphique. L'utilisateur pc et tablette va pouvoir profiter des créations graphiques dans une taille importante avec du texte en plus, du détail, des plugins jquery peut être pour la beauté du truc.
L'utilisateur cellulaire va devoir charger ces mêmes images énormes (adaptées par exemple à l'écran 23 pouces ou plus), ces même plugins lourds sur sa connexion 3g. Je me suis mal exprimé je ne parlais pas seulement de stylesheet différente mais également de redirection html comme on vous propose parfois "voulez vous accéder à la version mobile de ce site ?". Ce genre de message est très ringard en ce moment si on écoute la plupart des gens. Mais dans le cadre d'un portfolio on va vouloir charger des images plus petites puisque srcset n'est pas implémenté. Si on travaille en HTML / CSS natif sans utiliser de plugins on ne peut pas empêcher le chargement de données et même avec les solutions exotiques c'est un casse tête pas propre et pas ergonomique. Là il parait logique d'avoir une page différente bien qu'il soit tout à fait envisageable de faire le tout en responsive.
En webdesign comme dans tout c'est au cas par cas je trouve, je préfère bien évidemment le full responsive mais tant que des solutions comme srcset ne seront pas accessibles il faudra trouver des fallbacks pour privilégier l'expérience utilisateur plutôt qu'un "conscience rigoureuse de la pratique web" dans certains cas.
Cet exemple ne se marquait pas par la quantité de lignes mais plutôt par la nécessité de charger des fichiers différents.
Exemple 2 :
Un site qui à énormément recours à javascript et qui est en onepage avec parallax avec une grosse proportion d'éléments graphiques. Je l'ai rencontré irl et c'était très douloureux.
Hors de question de redimensionner en utilisant js, trop d'éléments, déjà trop de js sur la page, temps de chargement horrible. Une seule page contient toutes les données, c'est la requete du client, le tout défile en parallax donc chaque "page" doit faire 100% de largeur et 100% de hauteur, on voit déjà le problème se profiler, ce sont des images pas des textures, on DOIT les scale proportionnellement. Une image vaut mieux qu'un long discours :
Les images ne se scalent pas en fonction des résolutions, dans ce cas j'avais 16 pages différentes utilisant toutes au moins 15 images différentes qui devaient se repositionner. Dans ce cas là l'erreur de mon client à été de vouloir du responsive. J'ai fait ce qu'il m'a demandé mais je pense que c'est une erreur. Je m'explique :
1 - Page très lourde, mêmes images sur téléphone que sur grand écran.
2 - Code css très long et dégueulasse pour ne pas avoir trop de whitespace entre les images sur les dizaines de résolutions possibles
3 - Quel intérêt pour un utilisateur de mobile d'avoir autant d'images en tout petit ?
4 - Si jamais vous embauchez un designer demandez lui de créer le design mobile en même temps que le design full scale, là le client avait embauché un graphiste pour le design, une agence web pour le code (leur résultat mettait plus de 2 minutes à charger) et ensuite moi pour refaire le code et faire une version mobile
L'idée c'est que le contenu doit servir l'utilisateur et non pas "demeurer le même de manière figée". Mon client voulait le même rendu sur téléphone et tablette que sur PC. Quand je dis le même, je veux pas dire semblable mais il voulait exactement la même chose. Et ça c'est une erreur que beaucoup de gens ont en pensant au responsive.
Sur un autre site le point central est un champs de recherche. C'est le centre d'intérêt, sur la version mobile on à donc que ce champs de texte et un menu responsive plutôt que de retranscrire toutes les photos, décorations, images, commentaires... de la version pc. En gros ce que je disais ce n'est pas que c'est une bonne pratique de faire des versions différentes plutôt qu'une seule responsive mais seulement qu'il y à des cas de figures ou faire un fichier simplifié pour certaines résolutions est la bonne solution.
Ma conclusion : Responsive != retranscription exacte dans toutes les résolutions
et parfois il vaut mieux faire deux design qu'un seul responsive.