Lundi 29 juin
Webdesign - 29 juin 2009 :: 07:18 :: Par Eric
ViewLike.us pour tester un site sur plusieurs résolutions d’écran
Bien sûr il existe des plugins pour Firefox, et notamment l’indispensable Web Developper, mais pour ceux qui veulent avoir une idée de l’aspect d’une page web selon différentes résolutions d’écrans sans rien installer, voici ViewLike.us.
Ce service web développé en Ajax permet de basculer entre différentes résolutions d’écran, de celle d’un iPhone à celle d’une Wii, puis de 800×600 à 1920×1200.
Utile pour visualiser un site dans une petite résolution, ou en tout cas dans une résolution inférieure à celle de son propre moniteur, ce service ne fonctionnera pas en sens inverse car il ne redimensionne pas l’image de rendu : si vous avez une résolution de 1024×780 et que vous voulez voir à quoi ressemblerait un site en 1400×900, ViewLike.us ne vous sera pas d’un grand secours.
A propos de l'auteur : Eric 
Je suis blogueur, éditeur de contenus numériques et je conseille et accompagne quelques entreprises dans leur développement sur internet.
Voir tous les articles de Eric
Tags: outils, résolutions écran
Articles similaires
Ajouter un commentaire
Du bon usage des commentaires et des discussions sur Presse-citron :
- Vous n'avez pas besoin d'être inscrit pour commenter, mais l'anonymat n'est pas incompatible avec la courtoisie et le respect de chacun.
- Les messages injurieux, agressifs, inutilement grossiers, les critiques gratuites et non argumentées et les attaques personnelles seront supprimés sans préavis et leurs auteurs bloqués.
- Bien sûr, tout commentaire publicitaire ou spam sera sauvagement piétiné et son auteur tricard jusqu'à la quinzième génération.
- Pour signaler une faute de frappe ou de syntaxe, contactez-nous exclusivement via cette page.
C'est à vous maintenant !
Sont forts en comm faut leur reconnaitre ça....
29 commentaires pour "ViewLike.us pour tester un site sur plusieurs résolutions d’écran"
1
Pyksel le 29 juin 2009 à 07:26
Merci !!!!
Je connaissais un plug pour ie qui faisait ca mais impossible de remettre la main dessus
2
jcfrog le 29 juin 2009 à 08:48
oui pas mal, d’autant qu’après vérification ça fonctionne sur localhost, c’est là que c’est le plus utile pour le développeur
3
Rockweb le 29 juin 2009 à 09:08
Dans le même style il y a http://browsershots.org qui permet de visualiser un site web sur plusieurs navigateurs et OS différent sous forme de screenshot !
4
coreight le 29 juin 2009 à 09:21
pas de valeur ajoutée par rapport à Web developper, que tu cites, qui permet de plus de redimensionner à la taille exacte que l’on souhaite… inutile pour moi, contrairement à d’autres services qui permettent en plus de tester le rendu en simulant différents navigateurs et/ou systèmes d’exploitation.
5
Aurélien le 29 juin 2009 à 09:27
Bonne idée d’accéder au service pour visualiser un site en localhost !
6
William le 29 juin 2009 à 09:46
A l’instar de coreight je ne vois pas la valeur ajoutée de ce service par rapport à Web Developper sous Firefox ??
7
Eric le 29 juin 2009 à 09:53
@William : comme je le précise dans mon article, pas grand chose si ce n’est un accès rapide sans avoir à installer quoique ce soit
8
jcfrog le 29 juin 2009 à 09:57
et puis c’est marrant cet éternel « rien de nouveau ». C’est bien la diversité, c’est toujours différent. Un détail suffit parfois à préférer un service à un autre, même si les 2 se ressemble sur le fond.
Plus y’en a mieux c’est
9
Nicolas Laustriat le 29 juin 2009 à 10:04
Pas top, ce que je reproche à tout ces outils c’est que ce n’est « juste » qu’un recadrage en pixel d’une taille d’écran. Mais pour certain site réalisé on peut être amené (comme moi) à revoir son style d’affichage (CSS) en fonction du browser (user agent) et de la taille d’affichage de l’utilisateur. Est ce quelqu’un connait un vrai simulateur/émulateur générique? blackberry en propose un sur son site et microsoft aussi pour les pocket pc…en fait ViewLike.us devrait recharger la page en simulant un agent et ce serait plus objectif.
10
Galdon le 29 juin 2009 à 11:11
Avant de cliquer sur le lien j’étais sceptique sur ce genre de service, mais je dois avouer que c’est bien foutu :
Rapide grâce à l’ajax, avec des transitions et tout et tout, et c’est très simple aussi, l’interface est dépouillée, sobre.
11
Daniel le 29 juin 2009 à 11:32
Hey,
Sorry I don’t know any French! But this site DOES allow you to view what a site looks like in larger windows than the browser, thans to scrollbars, UNLIKE the firefox webmaster toolbar.
Thanks,
Daniel.
12
Nomogo le 29 juin 2009 à 11:44
Rien de nouveau par rapport à Web Developper, certes peut-être, mais perso :
1/ j’ignorais la fonctionnalité dans Web Developper
2/ Presse-citron présente un site dont c’est la fonctionnalité principale, et très efficace pour le coup.
Franchement, des fois, il y a juste à dire: « Merci, ça fait zizir
« .
Donc je le dis: merci, ça fait zizir.
13
Alias+Docteur+House le 29 juin 2009 à 14:01
d’où l’interet de créer une interface qui puisse s’adapter partout.
on peut utiliser des gabarits élastiques. on peut aussi faire comme moi :
en haute résolution (à partir de 1600×1200)la page d’accueil du site donne toute sa splendeur
en dessous de cette résolution et jusqu’à 1024×768 même si l’affichage du bas est tronqué, ça reste agréable à regarder.
et même si vous passez en 800×600, on peut se passer de la sidebar extérieure qui est rétractable.
j’ai mis l’accent sur l’ergonomie de façon à ce que le visiteur puisse avoir accès aux infos principales (featured content en flash + les 4 derniers articles) et ce, sans trop de superflu.
Oui je sais, je suis un génie de l’ergonomie.
prosternez vous devant sa grandeur Messieurs les noobs !
ps : oui je sais le flash caylemal !
14
Pyksel le 29 juin 2009 à 14:06
@Alias+Docteur+House : Par contre temps de chargement… Lamentable, du coup je ne me prosterne pas ^^ (humour humour)
Sinon : Trés joli
Seul hic, la barre de menu latéral qui est inavigable… Si on passe la souris et qu’on remonte c’est un autre menu qui se déploie…
15
Alias+Docteur+House le 29 juin 2009 à 14:23
@pyksel : ah oui tu as déjà essayé de faire fonctionner WP avec 60 plugin activés toi ? ^^’
par contre j’ai pas mis de super cache, pas de compression à la volée, juste une optimisation des codes JS, PHP et CSS mais ça ne suffit pas.
16
Pyksel le 29 juin 2009 à 14:30
@Alias+Docteur+House : pour 700€ H.T. je te le transforme en avion de chasse supersonique qui va plus vite que superman et bob l’éponge réunis ! ^^
Et en prime je t’offre un porte-clef de snoopy
17
fred le 29 juin 2009 à 16:46
Pas mal ça peut servir pour voir très rapidement le resize des éléments de page, mais vite limité quand même à bookmarker.
18
Alias+Docteur+House le 29 juin 2009 à 16:59
@Pyksel : je te signale que ton blog n’est pas super rapide non plus de chez moi (connection en 56K lol) alors je crois que je vais investir mes 700 Euros sur autre chose ^^’
ps : euh t’as pas plutôt un porte-clef playboy ?
19
Mpok le 29 juin 2009 à 17:14
@Alias : les gabarits élastiques sont « en théorie » la meilleure solution.
Malheureusement, « dans la pratique », cela s’avère difficile à mettre en place..
Tout dépend en fait du degré de contrôle que tu as sur le site en question : s’il s’agit d’un site « fixe » (genre site institutionnel ou vitrine), alors OK, tu peux pondre un css élastique qui va bien. Mais dès qu’il peut y avoir des interactions avec les utilisateurs (genre forum), c’est la merde, et franchement tu as tout intérêt à fixer la largeur dès le départ, sinon tu te retrouves à devoir gérer plein de cas particuliers, c’est vite l’enfer…
20
Pyksel le 29 juin 2009 à 17:36
@Alias+Docteur+House : Normal, qu’il soit lent
Y a 8 sites qui tournent sur ce serveur là 
Et en plus mon blog est under construction ^^ (oui je sais ca se voit 
)
Un porte-clef play boy ? heu… Il m’en reste un… Mais il est collector…
Plus serieusement. Je ne pretends pas faire tourner un blog vite au jour d’aujourd’hui. Mais j’ai pu optimiser magento de 15% en plus des 60% de gain qu’a proposé Varien…Là je m’atele au code wordpress pour une optimisation du cache… Donc pas encore gagné (vu que je débute en code wordpress – j’ai aps touché un blog de ma vie. J’étais dans Typo3 avant celà…). En fait je pense que le theme est la cause de tout. Cette architecture melangeant php/hmtl est pas des plus conviviale… Mais y a de quoi faire…
21
Durable le 29 juin 2009 à 18:36
Je viens de tester le lien, le site semble indisponible (trop de trafic ?)
22
Alias+Docteur+House le 29 juin 2009 à 19:09
@Pyksel : je crois que dans mon cas, l’utilisation abusive d’ajax (qui plus est, pas forcément visible dans le frontend) nuit au temps de chargement du site : n’étant pas spécialement développeur-codeur JS (malgré un passage éclair en sup-info, EPITA, mes notions de programmation sont vieilles de 20 ans…) j’utilise pêle mêle des plugins pas forcément compatibles les uns des autres et utilisant chacun ou presque des librairies différentes bien que j’ai pu en allèger quelques uns en les interprétant moi même.
mon prochain défi sera de règler ce petit problème.
23
Denis le 29 juin 2009 à 21:30
Dans quelques temps, les inventeurs d’extensions Firefox vont trouver du pétrole… ainsi que ceux qui éditent Et commentent ce genre d’informations ! ;+)
24
Smackitta le 30 juin 2009 à 00:57
depuis le temps que je cherchais un tel service ! merci beaucoup pour la trouvaille !
25
Patdebigorre le 30 juillet 2009 à 12:11
merci pour cette info bien pratique !
26
JOE le 1 août 2009 à 02:18
Merci ERIC, c’est vraiment utile surtout pour un designer débutant comme moi !
27
gridin le 1 décembre 2009 à 14:01
Hey, tu te trompes, ou alors le site a changé depuis ton article : contrairement à Web Developper pour FF (que j’utilise), ViewLike.us permet de voir le rendu d’un site dans une résolution supérieure à la sienne.
Et tant mieux, ça va m’être bien utile, merci !
28
kartoch le 27 octobre 2010 à 10:53
Vous savez si il est possible de combiner sur le même site woredpress une grande partie en statique et créer une petite partie blog ?
29
Eric le 27 octobre 2010 à 11:29
@kartoch : oui bien sûr, tu as un menu « Pages » pour ça