Apple.com passe au Retina

Anthony Nelzin-Santos |

À quelques jours du lancement de l'iPad de troisième génération, Apple a mis à jour une partie de son site pour qu'il s'adapte mieux à l'écran Retina. La page d'accueil et la section iPad du site Apple.com affichent ainsi des éléments différents selon qu'on les visite avec un écran classique ou un écran Retina.

Pour simuler ce comportement, rendez-vous par exemple sur la page d'accueil d'Apple avec Safari, et zoomez plusieurs fois. Sélectionnez ensuite le menu Développement > Afficher l'inspecteur web (si le menu Développement n'est pas activé, faites-le dans les préférences Avancées de Safari). Dans l'inspecteur web enfin, ouvrez la Console : collez y la commande suivante et validez.

AC.ImageReplacer._devicePixelRatio = 2
new AC.ImageReplacer()

Vous devriez remarquer que les images sont alors beaucoup plus fines, ce sont celles qui sont adaptées pour l'écran Retina. Les éléments textuels étant rendus par le navigateur, ils sont toujours adaptés.


Le site normal.


Le site Retina.

De manière générale, la prise en compte de l'écran de l'iPad de troisième génération va être un vrai défi pour les webdesigners : le design responsive simple tel qu'il est pratiqué actuellement ne suffira pas. Il leur faudra déployer des moyens de plus en plus complexes pour servir l'image de la plus grande qualité à l'iPad, une image normale à un ordinateur, et une image légère pour les appareils mobiles. Ce sont paradoxalement les utilisateurs de CMS qui devraient le mieux s'en sortir, plusieurs automatisant d'ores et déjà la procédure.

[Macotakara via AppleInsider]

Tags
#Retina Display
avatar milans | 
Justement les sites Macgeneration/Igeneration vont-ils se mettre au retina ??
avatar hozuki | 
La réponse elle est simple : SVG. En le réservant à Safari.
avatar Lou117 | 
Pour le dégradé... (on me souffle dans l'oreille que HTML5 gère cette propriété)
avatar JGL | 
@rAMA4ever Parce que la police d'apple est Myriad Pro et qu'il y a un effet dessus, ce qui n'est pas (encore) géré par le html
avatar youpla77 | 
@xalio Et au passage le html n'est pas près de gérer des effets visuels -_-'
avatar Lou117 | 
Le site d'apple est juste un enfer à charger, surtout depuis la sortie du nouvel iPad, la vidéo qui se charge toute seule met à genoux tous mes navigateurs sur divers ordi, j'ai même eu un crash de Chrome ! :/
avatar -oldmac- | 
@msk : Semantiqueet SEO ? C'est Apple, il pourrait mettre une page blanche qu'elle serait indexée.
avatar onze | 
@wolf : je me disais la même chose :-)
avatar youpla77 | 
@oomu "les infographistes sont habitués à générer des images pour les textes de mise en page, il leur faut perdre cette pratique." Ouais et a partir de demain on refait toutes les photos avec canva SVP! Non mais, on parle de p****** de titre la! faut faire quoi? Charger toute la helvetica neue pour un simple titre ? Vive les perfs!
avatar hozuki | 
oomu > Je n'ai pas dit qu'SVG était réservé à Safari, j'ai dit que c'était une solution de le réserver à Safari pour l'iPad 3 (pour ne pas pénaliser d'anciens navigateurs qui supportent mal le SVG... ) Et pour les fonts c'est parfaitement possible d'avoir une solution portable avec font-face en incorporant divers format (eot, woff...). Ça marche de IE6 à IE10 et tous les autres navigateurs les plus utilisés également. Donc pas d'excuse. Faire du texte en image pour un site web c'est assez consternant aujourd'hui, Apple devrait avoir avoir honte.
avatar icemanfx | 
CMS c'est quoi ?
avatar Homer Simpson | 
CMS = Content Management System
avatar AppleLov | 
@SolMJ Font-face le problème c'est que ça rend pas forcément pareil pour les différents navigateurs: Exemple: http://f.cl.ly/items/0u1e3u3J1Y1Z1O3B3l32/font-face.png (en haut Safari, en dessous Firefox) "Faire du texte en image pour un site web c'est assez consternant aujourd'hui, Apple devrait avoir avoir honte." Je suppose que vous n'avez jamais travaillé en collaboration avec un graphiste, où tout doit être respecté au pixel près.
avatar hozuki | 
@Kounkountchek > Merci je connais parfaitement mon métier. Si c'est le graphiste qui décide que tout doit être au pixel près c'est qu'il y a un problème de hiérarchie quelque part... Le média web n'est pas figé, le pixel-perfect sur tous les navigateurs est une utopie. Tous les professionnels compétents dans le domaine vous le diront.
avatar AppleLov | 
Ce n'est pas un problème de hierarchie mais de priorité. Et non le pixel perfect n'est pas une utopie. C'est pour ça qu'on utilise des images. Maintenant si vous pensez que vous avez des leçons à donner à Apple en matière de developpement web, envoyez leur votre CV.
avatar hozuki | 
@Kounkountchek : On ne sera pas d'accord... Il y aura toujours des différences d'implementations entre un navigateur. Croire le contraire c'est témoigner d'une méconnaissance fondamentale du média web. Sans parler des problématiques de référencement, d'accessibilité, de performances... Quant au site d'Apple, des failles XSS ont été découvertes à plusieurs reprises, donc je persiste et signe : c'est loin d'être une référence...
avatar duke_fsc | 
@Kounkountchek : Je suis d'accord concevoir ce problème de rendu efficient adéquat comme un problème de, je cite, "hiérarchie" entre un graphiste / d.a., et un webmaster est juste scandaleux. C'est un comportement à la fois so "UMP" et so "1980" que ça ne peut être que le discours de quelqu'un qui a déjà perdu sa guerre... Et je suis d'accord que le "résolutionnaire" du site, a toute sa place au format image, vu la fonction qui lui est dévolue. Je dis cela alors que je suis un gros fan du vecteur. Le grand problème des techniciens est de vouloir faire les choses, "parce ce que c'est possible", ils oublient fondamentalement le rôle qu'est censé jouer un élément dans une composition...
avatar AppleLov | 
Nous parlons bien du texte: "Resolutionnaire, le nouvel iPad" situé au dessus de la photo de l'ipad ? pas de l'ensemble du site ! C'est une affiche, ni plus ni moins, donc une image. "resolutionnaire" vous êtes sur que vous voulez le référencer ? Et ne venez pas me parler de moteur de recherche, on est sur Apple.com !
avatar Lou117 | 
Le Pixel Perfect, à l'époque des sites qui évoluent de plus en plus vers du Responsive design, autrement connu sous le nom de la techno (Media Queries), c'est juste de la branlette de graphistes d'une autre époque.
avatar youpla77 | 
@Lemmings T'es dans la dev de ie9 toi non ?
avatar Lou117 | 
Je ne sais même pas quoi répondre à une telle réponse tellement tu es à côté de la plaque...
avatar agerber | 
les sites ne sont pas prévus pour de telles résolutions , et encore moins les jeux..
avatar Helmer | 
Super la révolution qui apporte les pages webs floues \o/

CONNEXION UTILISATEUR