vendredi 15 juin 2012

Kasper : Sculpteur / 2



mercredi 13 juin 2012

Les limites du Responsive design en CSS ?

"La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur, tablette, mobile, télé connectée, ...). Ainsi, les mobinautes pourront avoir une expérience adaptée à leur terminal sans dégradation et sans devoir utiliser les fonctionnalité de zoom (ou un autre type de redimensionnement). Ils pourront consulter la même information, mais organisée différemment selon le type de terminal utilisé."
 ( source :http://fr.wikipedia.org/wiki/Responsive_Web_Designl )

Cette notion de responsive design s’appuie en général  sur la CSS, adaptant des paramètres précis de la CSS suivant la largeur de l'écran sur lequel on navigue ( mesuré en pixels ), de la forme suivante : 
 
@media (max-width: 800px) {}

Ceci marchait bien pour les débuts de la navigation mobile car les résolutions d'écran étaient faible et permettaient de faire une vrai distinction entre un ordinateur, même un notebook / une tablette / un mobile.
Cependant, dernièrement la résolution de ces navigateur mobile s'est "dangereusement accrue" :



"L’iPhone 3GS avait une résolution de 480 par 320 pixels et ‘iPhone 4 a vu cette résolution doubler et passer donc à 960 par 640 pixels grâce à la densité de 326ppp (pixels par pouce) de son Retina Display. Or l’iPad pourrait suivre la même (r)évolution. S’il a une résolution de 1024 par 768 pixels à l’heure actuelle, elle pourrait doubler sur l’iPad 2 et ainsi passer à 2048 par 1536 pixels (ie nombre de pixels multiplié par 4 et pixels par pouce doublés)."  
( source :http://www.gizmodo.fr/2011/01/17/une-resolution-doublee-pour-lipad-2.html )



Nous pourrions nous dire  "tant mieux" mais cela pose un vrais problème car comme vous pouvez le constater ( petit tour sur le site de la FNAC ), un ordinateur portable de bonne qualité comme un MacBookPro 13' a une résolution de 1280 x 800px ... donc si on utilise note ligne de CSS :

( Ici la lageur de l'écran est de width: 1280px;  contre  width: 1536px; pour l'iPad HD !!! )


L'iPad s’immisce donc au milieu des résolutions d'ordinateur portable, on ne pourra plus de dissocier de ceux ci dans un responsive design basé sur la CSS.
On pourrais alors prendre comme paramètre l'OS, cependant c'est le même OS pour l'iPhone et l'iPad, donc on aurais le même design pour les deux ce qui n'est pas une solution !
J'entrevois ici de créer des "filtres croisé"déterminant en plusieurs étapes les paramètre pouvant nous aider à déterminer la nature du couple  navigateur / Machine (OS), mais cela deviens compliqué, car par exemple, ne serais-ce que pour Apple, il faut prendre en compte les OS 4 et antérieur pour iPhone 33s et iPad 1, puis les OS > 4 pour les iPhone 4/4s et iPad 2 et HD et cela aura une répercussion sur les prix incluant le responsive design dont le prix ne pourra qu'augmenter a vu des complication qui se profile.


samedi 9 juin 2012

Kasper : Sculpteur