Auteur
Grafikart

38 Commentaires

7e33de20f16398846ff89dd5f8e1c844?s=200&r=pg&d=mm
Kipsa, 31-10-2013 23:31:01 - Répondre

Je trouve ça génial de faire les deux formats !
Pour certains tutos assez simples, c'est absolument super d'avoir l'info en quelques minutes et de ne pas être obligé de regarder la vidéo :)

B5d9bd5aef71c263b6e2c8dc11da6490?s=200&r=pg&d=mm
aleX-Xela, 01-10-2013 20:13:01 - Répondre

Allo ??? Pas très réactive la communauté ! ^^

B5d9bd5aef71c263b6e2c8dc11da6490?s=200&r=pg&d=mm
aleX-Xela, 24-09-2013 22:36:10 - Répondre

Salut à tous ^^ et un grand bravo pour ce tuto merci bcp ;

J'ai un retina 15" et perso j'ai bcp de difficulté à mi habituer, surtout sur photoshop ! J'ai deux questions sans réponse, elles me font perdre bcp de temps :(

- Le 100% sur un retina est en realité à 200%, y a t-il une solution pour eviter cette étape ?
- Lorsque je fais une capture d'ecran d'un site quelconque (donc normalement qlq chose comme 960 de largeur et XX en auteur) et que le comme dans photoshop j'ai le problème que vous imaginez ^^ il me colle une image 2x plus grande, je suis donc obligé de redimensionner... avez vous une solution à ce problème ?

Merci beaucoup et encore bravo pour votre tuto et pour l'ensemble de votre sute à dire vrais ;)

1
Grafikart, 02-10-2013 14:08:30 - Répondre

Les question c'est sur le forum :)

6b1b5d8ecbb5a9b86c6b347395d9c2d0?s=200&r=pg&d=mm
Myloit, 03-08-2013 13:35:14 - Répondre

Vraiment cool cet écran Retina !
Dommage qu'un Mac coûte 1200€...

96f28a898f1c1ef479f65de5b203a92b?s=200&r=pg&d=mm
Wlad, 03-03-2013 22:18:15 - Répondre

Une piste avec .htaccess et php.. : https://github.com/Retina-Images/Retina-Images

0a85532ae7611715f187a5418a96bd82?s=200&r=pg&d=mm
Gagi33, 19-02-2013 11:02:47 - Répondre

Merci beaucoup

01ca2418a9231acb9f3ef5bec50656ad?s=200&r=pg&d=mm
Bery, 04-11-2012 13:49:30 - Répondre

Salut,

J'ai une ptt question: moi j'utilise le pack d'icon iconsweet2, je veux savoir est-ce que la version Retina des icons 16x16 est la version 32x32 ou il ya d'autre format ?

Merci

9e4ef83a195e8b77e24baf2672399095?s=200&r=pg&d=mm
Julian le Coupanec, 19-10-2012 14:42:19 - Répondre

C'est quoi le nom du plugin que vous utilisez pour avoir internet explorer depuis chrome? ^^

9e4ef83a195e8b77e24baf2672399095?s=200&r=pg&d=mm
Julian le Coupanec, 19-10-2012 14:46:23 - Répondre

Je viens de m'apercevoir que c'était internet explorer en fait...

01ca2418a9231acb9f3ef5bec50656ad?s=200&r=pg&d=mm
Bery, 04-11-2012 13:46:32 - Répondre

Je pense que c'est IE10

C8016f1a9c30c065934423a09240b3ab?s=200&r=pg&d=mm
zebulonbof, 17-10-2012 18:49:09 - Répondre

Pour le rendre compatible il faut remplacer la balise img (via js) comme ceci :

<object data="tiger.svg" style="width:1024px; height:768px;" type="image/svg+xml">
<embed src="tiger.svg" style="width:1024px; height:768px;" pluginspage="http://www.adobe.com/svg/viewer/install/" />
</object>


;)

Eacfb5349dcf8a9a8ef7b4db891bbe6b?s=200&r=pg&d=mm
Axka, 27-09-2012 15:26:22 - Répondre

Euh je m'interroge c'est pas plutôt les dpi qui faut augmenter sur l'image, parce que sur un design fixe, la taille des images ne bougeant pas, c'est juste l'occupation du site sur l'écran qui change en fonction de la taille de l'écran.

Par contre l'écran retina ayant un rendu supérieur à 96 pp (normes des écrans actuels) le rendu est pas net, (cf les nouvelles versions des logiciels Adobe 'Photoshop CS6 High DPI')

Donc ne suffirait-il pas d'augmenter le DPI des images pour avoir le même rendu sur tous les écrans ?
Je pose la question car je ne sais pas et je n'ai pas de mac pour vérifier.

Ed789b44726bba8c6e534d78e09e2d98?s=200&r=pg&d=mm
mquandalle, 25-09-2012 02:21:15 - Répondre

Vidéo très intéressante. Il est vrai que l'on est aujourd'hui obligé de passer par des "astuces" pour couvrir un besoin qui tendà exploser, à savoir que chaque device n'a pas besoin de la même image (dans le sens la même "matrice de pixels"). Les paramètres qui entre en compte pour déterminer la bonne résolution d'image que le serveur doit fournir sont :
- la taille de l'écran
- mais aussi la qualité de la connexion

Ainsi, si je suis sur mon smartphone sur un réseau 2G, même si je possède un écran "rétina" (ou similaire) je préférerai probablement des images avec une résolution plus faible mais plus rapide à charger. Le problème c'est que c'est au navigateur côté client de faire ce travail de choix des requêtes d'images.

Une possibilité peut-être de définir dans le code HTML des "sets" d'images. C'est à dire de définir un groupe de matrices de pixels avec des attributs (densité de pixels, poids de l'image, etc, taille de l'image, etc.) Le navigateur choisira alors automatiquement la bonne image à afficher puis fera la requête HTTP correspondante auprès du serveur.

Une expérimentation qui va dans ce sens : http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
Standard HTML de "sets" d'images (brouillon) : http://www.developpez.com/actu/47104/-Responsive-Images-afficher-des-tailles-d-images-qui-varient-avec-les-ecrans-le-W3C-publie-un-nouveau-projet-de-specification-HTML/

233
alamedagraphik, 12-09-2012 13:49:26 - Répondre

Pour ma part je crois que la solution javascript est la mieux adaptée en complément de celle de l'adaptive image (http://adaptive-images.com/).
Concernant la fonction window.devicePixelRatio, je pense que firefox va l'intégrer prochainement. (IE est encore à la traîne..., et est inutile sur un mac :) )
En attendant merci pour les alternatives ...

3d3c2659346ba191023defb9a01ccc7c?s=200&r=pg&d=mm
Cocopocoloco, 12-09-2012 11:09:17 - Répondre

En fait, si je comprends bien, il n'existe aucune solution acceptable (taille adaptée à l'écran du visiteur) et universelle pour les images dans un tag <IMG/>. Je me trompe ?

1a45e1dbd183e51175bb360184bc496c?s=200&r=pg&d=mm
Nic1101, 09-09-2012 03:31:18 - Répondre

Merci ! Ca s'ajoute dans ma liste de chose a faire pour mon site !

Bc4fb3a875341e2a1d74f627dc4877e5?s=200&r=pg&d=mm
Dawudesignn, 07-09-2012 21:06:22 - Répondre

Merci pour ces tutos

04442c3a8e42213924e4f6b7c30e4c69?s=200&r=pg&d=mm
boardingnow, 06-09-2012 04:44:49 - Répondre

Merci pour ce tuto. Video et tuto ecrit, voila qui encore une fois met ce site un poile pour haut que les autres "step up" commme on dit.

Fbc46651585b5ed7fd874efa46e77321?s=200&r=pg&d=mm
niuxe, 06-09-2012 03:12:26 - Répondre

Pas mal ce tuto :) A noter que le svg est un format Accessible !

F125b1dc91d2d109f54ea48f73aa1d93?s=200&r=pg&d=mm
Roques Steve, 05-09-2012 23:15:05 - Répondre

Sympas le tutos, mais pk ne pas faire une classe jquery ou php qui recreer une image en fonction du navigateur a partir d'une image retina, sa permetrerai aps d'etre compatible avec les ecrans de tous???

D4e0035b55388b9080ab48068d4d5736?s=200&r=pg&d=mm
leknoppix, 06-09-2012 16:38:28 - Répondre

C'est une bonne idée mais cela prendra des ressources sur le serveur, suppose qu'il s'agit d'une galerie photo, et que, par le biais de ton script tu dois généré 30photos, pour l'écran retina, oui, un simple appel de l'image de base ok, mais pour les autres, il faudra générer une photo, donc dans mon exemple, exécuté 30fois la même photo, donc, en gros, si le script génère la photo en 300ms (entre génération et affichage), cela veut dire que pour les 30 photos, il faudra attendre 9000ms soit 9 secondes. C'est un peu long pour le chargement je trouve, même si l'on utilise un dossier cache, mais dans ce cas, cela reviens à l'une des idées de grafikart avec l'image @2x.
Ensuite, supposons que js soit désactivé (ce qui est rare), le script de détection n'est plus bon.
Php, n'est, à ma connaisse incapable de détecter quoi que ce soit sur un pc car c'est un language qui renvoie une structure en html.

Si je fais une erreur, n'hésitez pas à me contredire.

D70a5318d98c712f047f7156382db4e4?s=200&r=pg&d=mm
Pakito, 05-09-2012 11:56:53 - Répondre

Excellente idée que ce tuto, et si pour l'instant les Macbook Retina ne sont pas trop répandus, ça n'est pas le cas des iPhone. Une belle manière de penser la version mobile de son site donc.

Et excellente idée aussi qu'un compte rendu écrit du tuto, pour le lire au boulot comme le dit Gribouille. Et sache Lionel Marmier que quand on bosse dans le web, lire des tutos au boulot n'a rien d'interdit ni d'incohérent.

B6f5a9b1538bd1db1dcd31c8eb8879a9?s=200&r=pg&d=mm
Dunlopilo, 05-09-2012 01:31:18 - Répondre

Sympa le tuto comme toujours. Malheureusement je ne pense pas que développer un site "retina" uniquement pour MAC soit une bonne idée car les ordinateurs "retina" sur windows 8 commencent déjà à être annoncer (voir Samsung Series 9 WQHD).

1be60808049b010c4ca8510730d52086?s=200&r=pg&d=mm
Rtransat, 04-09-2012 21:38:54 - Répondre

Pour le background-size sous IE on s'en fou un peu, non ? Sachant que retina c'est que sur Mac (pour le moment) et que IE n'existe pas sous Mac...

022ca43ef65fbd6d7b317537397354cc?s=200&r=pg&d=mm
Aureroy, 04-09-2012 20:16:41 - Répondre

Je pense qu'il y a une petite erreur, l'utilisateur ne charge pas une image 2 fois plus grande mais 4 fois plus grande
200x200 = 40 000 px
400x400 = 160 000 px
160 000 / 4 = 40 000
L'image est donc 4 fois plus grande ;)

9b68aeb1cf707d6e56f8998e5aefbd2d?s=200&r=pg&d=mm
keskispas, 07-09-2012 13:30:09 - Répondre

Bien vu, ça ne m'avait même pas frôler l'esprit !

Pour le reste, ce tuto est parfait.

28ba4d83f415bc8ae49fea72abb5b177?s=200&r=pg&d=mm
Gribouille, 04-09-2012 19:48:11 - Répondre

@ClementLanot Lorsque tu es au travail et que tu n'as pas la possibilité de regarder la vidéo, il est réellement appréciable d'avoir la version écrite.

Merci pour le tuto !

A5dc23649a291705d2a12fa0f5605fd3?s=200&r=pg&d=mm
Lionel Marmier, 04-09-2012 22:32:18 - Répondre

T'es pas sensé lire des tutoriel au travail :-)

Mais, Bref, pour moi je trouve aussi beaucoup plus pratique la version écrite, car tout le bla-bla qui va avec les vidéo n'est pas utile à tout le monde.

Je pense qu'il faut garder les deux, car il y a beaucoup de personne moins à l'aise sur ce site qui ont réellement besoin d'une explication pas à pas pour comprendre.

Merci pour tout ce que tu fais, continue.

771fac1aa65968b44adc5210a587394b?s=200&r=pg&d=mm
luffysan, 05-09-2012 11:06:50 - Répondre

Mets des écouteurs ^^.

7b86fa0f30bbfc5776b8f525b061e7b3?s=200&r=pg&d=mm
Denokan, 04-09-2012 19:45:02 - Répondre

Salut
il me semble qu'il y a une petite erreur au début de la vidéo : le flash en bas indique "Développer un site : Jour 4" ..

J'en profite pour saluer l'énorme quantité de savoir qui se dispense sur ce site, bravo aux contributeurs !

C6a1ad7fbe32ddc19ac1756aa8ad1e8c?s=200&r=pg&d=mm
koulouf, 04-09-2012 19:44:45 - Répondre

Merci beaucoup, je regarde le tuto tout de suite :)

+1

209980cf26cd05595c957b886839a0f0?s=200&r=pg&d=mm
ClementLanot, 04-09-2012 19:43:09 - Répondre

Sympa :) Mais je comprend pas l'utilité du tutoriel écrit & vidéo, lorsque le contenu est le même ? :(

1
Grafikart, 04-09-2012 19:49:30 - Répondre

Si tu gère bien tu n'a pas envie de te taper la vidéo mais directement voir le code qui te permet de régler le problème (ici gestion du retina)

En revanche pour les personnes moins à l'aise la vidéo permet d'expliquer les différentes étapes et le cheminement plutôt que de balancer le code directement.

Enfin ça a aussi un intérêt au niveau du référencement pour moi :)

7c28e0d0a01b920be1cb667a835847cc?s=200&r=pg&d=mm
mespeche, 04-09-2012 19:51:39 - Répondre

Ainsi qu'au niveau de l'accessibilité pour les personnes mal entendantes par exemple.

209980cf26cd05595c957b886839a0f0?s=200&r=pg&d=mm
ClementLanot, 04-09-2012 19:56:31 - Répondre

C'est vrai , j'avais pas forcément pensé à tous ça :)

D4e0035b55388b9080ab48068d4d5736?s=200&r=pg&d=mm
leknoppix, 06-09-2012 16:42:00 - Répondre

Pour ma part, je trouve que l'accessibilité, il ne faut pas l'oublier. Sinon, même pour la personne sans aucun soucis, c'est un grand avantage car cela permet, notamment pour les codes sources avec jquery ou les media queries, que l'écrit nous permet d'éviter de revissionner l'intégralité de la video pour 40 secondes.

3d26d6c7fbaa8185ae04256ab95374c0?s=200&r=pg&d=mm
jtraulle, 08-09-2012 19:44:23 - Répondre

Je trouve ça génial de faire les deux formats !
Pour certains tutos assez simples, c'est absolument super d'avoir l'info en quelques minutes et de ne pas être obligé de regarder la vidéo :)