Entrez vos identifiants

x
OU
Vous avez oublié votre mot de passe ?
Utilisateur wiki : vous n'aviez pas d'email ?

Korben - Site d'actualité geek et tech

Go Top


Testez votre responsive design

Testez votre responsive design

Si vous cherchez à voir ce que rendra votre nouveau site compatible Responsive Design sur des résolutions de téléphones ou de tablettes, vous avez 2 solutions...

  • Le regarder sur un téléphone ou une tablette. Bah oui...
  • Utiliser ce bookmarklet qui une fois ajouté dans vos marques pages, vous permettra de switcher entre plusieurs résolutions afin de mieux voir comment se comportera votre (ou celui d'un autre) responsive design.

test

Un petit bout de code sympa mis au point par Victor Coulon, un développeur Français travaillant actuellement chez Jolicloud.


Facebook Twitter Email Copier Url

25 Responses to “Testez votre responsive design”

  1. Sebc22 dit :

    Approche étrange du responsive design : normalement, le responsive design s’adapte à la place disponible, ce qui signifie qu’il suffit de restreindre celle-ci dans le browser (en redimmensionnant simplement la fenêtre) pour voir le résultat. Pas besoin de bookmarklet, donc… normalement…
    (que l’on s’adapte au capacité du browser en javascript, ne serait-ce que pour la dimension “touch” des smartphone, Ok, mais la disposition de la page.. )

  2. Thomas Normand dit :

    j’utilisais screenqueri.es il y a quelques temps mais il pose des soucis au niveau de la media query (max-device-width/height) car il ne reconnait pas la fenetre comme un “device”.

    A tester donc.

    Sinon il existe également l’Opéra Mobile Emulator mais comme son nom l’indique : il n’utilisera que le moteur opéra ^^

    merci en tout cas

  3. camillebaronnet dit :

    Très bon outil :-) Du coup j’en profite pour caler le mien ^^
    http://tools.camillebaronnet.fr/responsive

  4. tot0che dit :

    Bon outils merci mais je ne vois pas du tout comment entrer une url par contre !? quelqu’un peut m’aider ? je me demande si je suis pas en mode blind ce matin mais je ne vois vraiment pas xD

  5. Sylvain dit :

    Ou sinon un simple Ctrl+Shift+M sur Firefox et on peut tester toutes les résolutions (Ordi+tablettes+smartphones+personnalisée).

  6. Pastek dit :

    Mets le lien donné sur le site http://responsive.victorcoulon.fr/ en favoris, puis tu vas sur le site à tester et tu ouvres le favori dessus.

  7. gabriel_webmaster dit :

    Quel est l’intérêt par rapport à des plugins comme “Web developper” ?

  8. tot0che dit :

    excellent, je ne connaissais pas cette astuce non plus ! bien vu, pour le coup celui que j’ai vu avec le + de résolutions possible c’est http://screenqueri.es
    Mais après je me rend compte que les media queries utilisant les mesures du “device” style max-device-width, device-aspect-ratio, … ne sont pas reconnus par ces systèmes qui se réfère uniquement à la taille de la fenêtre (max-width, max height ….) ce qui rend tout ces systèmes presque inutile étant donné qu’un simple redimensionnement de la fenetre de son navigateur offre les mêmes fonctions.

    Opéra Mobile Emulator reste le must pour tout ça à mon sens, car lui est réellement reconnu comme un “device”

  9. Kal dit :

    Sinon, il y a aussi un outil intégré à Firefox pour faire ça (Outils > Développeur web > Vue adaptative)

    Mais rien ne vaut un test sur un vrai téléphone ou tablette, on constate de nombreuses différences avec les outils de tests.

  10. Ben dit :

    En réduisant la taille de ton navigateur, tu ne sais pas à quel résolution tu es. Donc c’est pas très précis pour savoir comment ça rend sur un autre périphérique.

  11. Ben dit :

    Bien vu. Je ne connaissais pas.

    Merci Korben et Sylvain ;)

  12. camillebaronnet dit :

    L’outil redimensionnement uniquement la page et pas toute la fenêtre c’est plus pratique quand tu as plusieurs onglets et en définitive plus rapide globalement

  13. vince dit :

    Si tu as fait toi même le code, comment pourrais-tu ne pas le savoir, vu que tu codes pour les tailles d’écrans spécifiques ??

    Pour moi, c’est du plus grand au plus petit, du coup, dès que je redimensionne, je sais exactement quelle partie du code est touchée, et quel est la cible.

    ;

  14. Yngvildr dit :

    Ca m’a beaucoup aidé pour un exo à l’école. Pokédex en responsive. Le plus marrant c’était celui de notre camarade Julien. http://www.artisanat-furieux.net/Projets-SupInternet/testpokedex/

  15. 2ShEp dit :

    Je plussoie, c’est comme testé une compatibilité IE6 avec multiplesIE ou IEtester (dans ce cas rien ne vaut un VM XP avec le IE6 natif).

  16. Xell0 dit :

    sinon avec plus d’options et payant (pas super chère)
    il y a
    http://www.emailonacid.com/

    plus orienté email mais fonctionne pour les sites webs !

  17. Xell0 dit :

    sinon avec plus d’options et payant (pas super chère)
    il y a
    http://www.emailonacid.com/

    plus orienté email mais fonctionne pour les sites webs !

  18. Sigri44 dit :

    Ou sinon on resize la fenêtre manuellement :)

  19. Sigri44 dit :

    Ou sinon on resize la fenêtre manuellement :)

  20. fklingler dit :

    Comme pour Firefox où ça a été déjà dit, il est également possible de le faire de base dans Chrome en ouvrant l’inspecteur, en cliquant sur la petite roue “paramètres” en bas à droite de l’inspecteur, et de tout configurer dans “Overrides”.
    Bon c’est clairement moins ergonomique et user-friendly mais voilà ;)

  21. Ben dit :

    Ouais, pas con.

  22. Ricoxor dit :

    Ou sinon “CTRL + MAJ + M” Sur Firefox et ta le même resultat ^^ GL

  23. roselora dit :

    Vraiment
    agréable ce site et en plus il est complet et simple en recherche. Je t’en
    remercie beaucoup pour ces moments de détente.
    voyance par mail

  24. leops dit :

    Sur Chrome : F12 -> Paramètre (en bas a droite) -> Overrides -> Cocher User Agents pour changer la résolution et l’User Agent, ou Device metrics pour changer seulement la résolution.

Dolby Audio Challenge – Coder pour le bonheur des oreilles

Capture du 2016-04-28 18:04:55

Si vous êtes développeur web en agence (par exemple) il vous arrive sûrement d'avoir dans votre Slack ou ailleurs des commandes pour des sites qui intègrent du son.

Pause
Wait, je sais le son en arrière plan d'une page web c'est bad really bad, mais là je parle d'autre chose.
End pause

Je veux parler de ces sites commandés à votre boîte par Warner, Universal, Ubisoft, où même toi dev freelance qui veut te faire un portfolio qui claque sa maman et qui ont besoin d'une bande son en arrière plan pour plonger l'internaute dans l'univers du jeu, trailer vidéo ou whatever.

B'hein en règle générale, c'est une mouise sans nom pour avoir un rendu sonore correct.
Pour pallier au problème Dolby a développé une techno qui est censée régler le problème et pour vous en faire la demo, ils vous invitent à la tester en participant à leur code challenge.

En y participant, vous aurez toutes les ressources nécessaires afin d'intégrer le nouveau son multi-dimensionnel (just marketing mais ça à l'air quand même cool) de Dolby. Accédez au hub où les développeurs Dolby animeront des tutoriels et webinars en one-to-one pour implémenter Dolby Digital Plus sur votre site.

A la clé un money pot de 15,000$.

Pour y participer où voir de plus près la techno pour les plus curieux c'est ici

Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :

Twitter Facebook Google Plus Linkedin email
Rejoignez les 56876 korbenautes
et réveillez le bidouilleur qui est en vous
abonnez-vous en savoir plus
"Vous aimez bidouiller ?" Oui j'adore l'informatique et la technologie
Suivez Korben Un jour ça vous sauvera la vie.. Ou celle d'un(e) ami(e)
  • Rejoignez les 56875 bidouilleurs de la grande famille des Korbenautes
    «Je considère que votre email est aussi important que le mien.»
    Korben
  • Les Derniers Articles du Blog

  • Inscrivez vous aux bon plans

  •  
  • Site hébergé par
    Agarik Sponsor Korben
  • DANS TON CHAT (BASHFR)

    Aïedal : Putain, la peur de ma vie ce matin ! O.O
    Huya : Raconte !
    Aïedal : Bein je sortais de la cuisine, quand j'ai vu du coin de l'oeil quelqu'un chez moi.
    Huya : :o Qui ?
    Aïedal : Je sais pas ! J'ai juste vu une silhouette marcher dans l'appart... Bref, je me précipite aussitôt sur mes katanas en me disant qu'il valait mieux être armé (même si c'est du factice, ça peut impressionner quand même :p)
    Huya : ... T'es un grand malade...
    Aïedal : Je me retourne et je cherche le mec.
    Aïedal : Bein tu aurais voulu que je fasse quoi ? ^^'
    Huya : Et donc ?
    Aïedal : J'y viens. Je cherche le mec et je le trouve pas. Je passe tout l'appart au peigne fin, en finissant par la cuisine.
    Aïedal : C'est là que je revois le mec du coin de l'oeil ! Je hurle, je frappe de toutes mes forces...
    Huya : Heu... Et ?
    Aïedal : J'ai pété mon miroir... U.U

    -- http://danstonchat.com/13935.html
  • Un boitier externe pour booter des ISO à

    gogo sans se prendre la tête

    Il s'agit d'un boitier externe pour disque dur 2,5" fabriqué par la société Zalman, qui a la particularité d'avoir un petit écran de contrôle et qui permet de choisir l'ISO sur laquelle vous souhaitez booter...lire la suite

    Microsoft récupère vos clés de chiffrement.

    Voici comment les en empêcher

    Si vous avez acheté un appareil sous Windows 10 équipé d'une puce qui chiffre par défaut le disque, ne vous pensez pas en sécurité pour autant : La clé de récupération qui vous permet de déchiffrer vos données...lire la suite

    En ce moment dans l'univers "Raspberry Pi"

    Voir tous les articles »