5 ms·
Simple Responsive Design Test Page - bookmarklet
- ramdaffe 15y agoWhat a coincidence, just drafting my first design with Skeleton. Definitely saves a lot of hassle. It's a pity that currently most broken thing on mobile browsers are touch-based frameworks and custom font rendering.
- ntkachov 15y agoMy god this is amazing. I try to make all my sites responsive so this is fantastic.
- trhaynes 15y agoSome responsive sites to test it with: http://hicksdesign.co.uk http://hicksdesign.co.uk, http://happycog.com http://happycog.com
- drostie 15y agoHappy Cog for me is nonfunctional -- it seems that the site has some code to break out of iframes, or some such.
- cleverjake 15y agoboth work fine for me. what browser are you using?
- drostie 15y agoFirefox 9.0.1. (Just to clarify, the site works perfectly fine for me; and the bookmarklet does appear on upon the site; but when the iframes start loading HappyCog, they refresh the page, which sends it back to its original state.)
- sirclueless 15y agoTry adding void(0) to the end of the bookmarklet.
- drostie 15y agoDoesn't help. I'm surprised that I'm the only one who seems to have this problem, but I have found at least one possible cause: there is a linked script file /j/functions.js?2011030 which contains, among other things: if (top != self) { top.location.replace(self.location.href); } So it really does seem to have a break-out-of-iframes script, unless I am misreading what this code is meant to do.
- drostie 15y agoVery pretty.
- loceng 15y agoWow. Perfect.
- camwest 15y agoOur new website hasn't launched yet but you can check the responsiveness out using the bookmarklet: http://bigbangtechnology.herokuapp.com/ http://bigbangtechnology.herokuapp.com/
- justindocanto 15y agoAmazing. Plan on using this often. Thank you
- badclient 15y agoHow accurate is it though? I ask because it shows HN on iPhone render differently than how it actually renders.
- cleverjake 15y agothis isn't a way to render sites on various platforms, its a way to quickly test media queries based on device width, ala http://mediaqueri.es/ http://mediaqueri.es/
- seancron 15y agoIt seems the website is having trouble loading, so here's the bookmarklet for those who can't load the page: https://gist.github.com/1701741 https://gist.github.com/1701741
- ajhit406 15y agoThere's a good chrome extension I use called "Resolution Test" that does something similar: http://www.benbeckford.com/wordpress/2009/11/29/chrome-extension-resolution-test/ http://www.benbeckford.com/wordpress/2009/11/29/chrome-exten...
- emehrkay 15y agoI made the script open new windows https://github.com/emehrkay/Responsamania https://github.com/emehrkay/Responsamania
- spung 15y agoVery cool, we'll definitely be using this when we work on making our site responsive.
- v33ra 15y agoApart from tons of other features, Web developer toolbar[1] has this functionality built-in. It allows us to save our own dimensions too. Of course, if one wants just the 're-sizing' capability, then this bookmarklet will sure help. [1] - https://addons.mozilla.org/en-US/firefox/addon/web-developer/?src=search https://addons.mozilla.org/en-US/firefox/addon/web-developer...
- omgmog 15y agoSeems like a useful tool, but it looks like JavaScript on the site being tested is disabled? Means it's not useful for testing sites that depend on mobile js frameworks such as jquerymobile