See how your responsive page looks in every size! 🖥 💻 📱
https://everysize.kibalabs.com
We're about to launch everysize which we built as part of a hackathon last weekend and would love to get some feedback on what you like / dislike about it.
The intention is to configure it once and then leave it open on your desktop whilst you develop your reactive site and watch it reload everywhere in real time (if you have hot reloading enabled)! It's browser based so you don't have to download anything, so please check it out and let us know what you think.
Thanks :)
the "loading" sign is so small. and i'm unsure if its working.
This should be fixed now, thanks for the feedback 👍
Ah ye true, will update, thanks!
:)
I also really like it! I would have never thought that I need such a tool, but it makes checking your website for different screen sizes so much easier!
Thanks Marty! We're building a landing page builder so was quite annoying to keep having to un-maximise my window so i could resize it :p
That's great :) I'm glad you immediately feel the benefit!
Whilst you use it more and more, please feel free to share any feedback on how it's working for you. We're building more features and very keen to taken on user feedback for these!
Good job! The masonry-like grid looks fun. Unfortunately like many other online responsive size testers, any decently configured site can't be used in them: x-frame-options headers will block sites from being shown. This is a good thing, you wouldn't want your site to be loaded inside another one!
I'm the solo dev behind an app that solves this issue (and many more) called Polypane. Because it's a native app it can load any website and do a lot more interesting and useful stuff. I can create sizes based on real devices (with full emulation), you can scale them freeform and you can also create viewports from your actual CSS media queries. It has a ton of other tools too, like built-in live reloading so you don't need to have any hot reloading setup to still get the benefits. Check it out at https://polypane.app
Polypane looks awesome! Someone pointed sizzy out to us whilst making this and ye because these are native they can load anything. But i would be unlikely to use these for sites where i have authentication since iframes provide security that the surrounding site cannot see anything inside the pane - without it the native apps can read any / all headers sent thru or private information entered on the page itself (like passwords). Also with iframes you are already authenticated on whatever you are testing (including localhost) so there wouldnt even be a need to enter data. But yes, as you said if the website doesnt allow it there would be nothing you can do on everysize anyway so another app would be more useful.
I can't speak to the security of other apps, but with regards to Polypane, it uses Chromium, so it has as much access to a site as Chrome does (and in Chrome, you'd additionally have extensions with various degrees of access too), only without it sending any usage data back to Google. So it might even be more private, if that's what you're worried about.
Iframes don't provide as much separation as you think, by the way. It all depends on how well your headers are configured. A good place to check your headers is https://securityheaders.com/ It will check your headers and let you know what can be improved.
Hmm seems really cool, but somehow it crashed when i put my website in...
It just won't load, seems like a cool project so will definitely check it out later again.
Ah, i assumed i would find your site on your profile but i didnt :( if you share it with me i can have a look :)
https://daily-dev-tips.com/
It seems to be working now, would you mind checking again 👀
Hey sorry to hear that. it seems to have happened to a few people so will def test and get back to you!
Looks good. I am a user of Sizzy, I use it during development; I notice I can't navigate to e.g. localhost:1234 - that would make it useful for development.
its updated so you dont need to add the scheme yourself now 👍
hey peterj, you should be able to but may need to add http:// in front. il try and get this on my side to make life easier :)
I'll try again; I could get the page to load yesterday (with or without scheme :)).
Pretty cool. I'll bookmark it. Only 4 default sizes though?
Great execution :)
Already shared it with some friends. Keep up the good work!
Thanks a lot @orestes
We'll keep you updated as and when we release more features.
Please feel free to share any feedback that you and/or your friends have :)
Hi, looks promising, nice work. I was wondering if you saw this project before https://sizzy.co/? Don’t know is that is your direct competitor, but just FYI :)
Hi, thank you for your message :) someone did point sizzy out to us and they have a lot of more features but they are a paid product. Ours is more bare bones offering but totally free. Also because we do it in the browser using an iframe it’s a lot more secure because we don’t have access to anything you interact with within the loaded page (sizzy is a native app and it can see into the loaded sites). Are you a user of sizzy?
I see :) Nope, I am not using it, just know about it. Good luck anyway ;)
Nice. As already mentioned Loading is pretty small. Also, I've tried my site and it was loading for quite a long, so I quit it.
If it takes long to prepare everything before showing it, then maybe some general "Please wait" indicator. This way it just heavily stuck (in my case), and if I tried to move those screens, they would respond like after 5 seconds.
Good idea, keep up the good work.
hey brunor thanks for the feedback. I'm just fixing the loading now (it was teeny because of the transform on the whole div). What site were you testing it with? I know a lot of sites prevent iframes but they usually come up with a failure view. Thanks!
OK, it's because of this, I've checked it in console.
Refused to display 'https://www.beeinformed.app/' in a frame because it set 'X-Frame-Options' to 'deny'.
So, it doesn't have anything with your side.
However, this morning when I checked your site, it was again stuck for some period, and my typing was like 1 char per 2 seconds. I've noticed loading of mix-panel scripts and other analytics scripts. After that is finished, everything runs smoothly. Maybe you can check that. I couldn't reproduce it later, deleting cookies, incognito mode, different browser - nothing helped, it worked as a charm.
While testing on different browsers, I see that every browser is handling that x-frame error differently, so Chrome would say something like "www.site.com refuses to connect", Firefox has nice "Blocked by X-Frame-Options Policy", while Safari doesn't render anything at all, which can be really confusing.
Maybe for the user experience you could intercept it and if this is was the case show custom everysize error view, and some link to more documentation why it happens and how to solve it. You could put that docs on the same site
Thanks for your help 🙌
Ah yes great idea, will definitely try and intercept it and show users 👍. I was hoping its still useful for people who disable iframes cos when they are testing locally it can be enabled. And ye im super frustrated with the analytics providers integration with react, just gonna whip up my own small one.
Yeah, in the end it is meant for local development, I was just trying it with the already live website, so that won't be the use-case of your users. Keep up the good work. 👍
Thanks 🙌
We're planning to build out a few more features based on your feedback (before going back to our main project). Let us know what you'd like to see more of 👍
There is a Chrome extension for this.
https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en
The best part is that it is free!
I use it everyday and it works great!
Thank you for sharing this! It isn't one we'd come across as we've found it a bit tricky with search terminology, I'll check it out.
I used to own https://www.viewlike.us, which was one of the first to do this sort of thing. I sold it last year for pennies.
The idea is good but the fact that it opens on an iframe kind of brakes the deal because any decently configured website would not allow it. Also, you can have the same thing with the Developer tools of your browser.
That’s cool :)
The aim with everysize is for devs to use the tool whilst developing the webpage (rather than testing configured webpages).
The key difference to developers tool in browsers is that you can view all sizes on one screen, rather than having to view each size individually.
You're right, it can be useful. Best of luck!
Seem not working, can not loading my site
Hey, if you share your site with me i can find out why
Hi I think it is always cool to be abe to see your website in different sizes of the same time.
one thing. i notice is a grayish overlay on my content. I don't know why?
I do have a drawer that open full screen but only when the menu is pressed. (not sure if that is the case)
Hm thats wierd i'l try and see whats up. What's your site?
This sounds useful! It almost crashed my browser though - it's very heavy, was the heaviest task running in the 100+ tabs I have open in several windows.
hm thats wierd. the site itself is quite light but i think the iframes can have a heavy impact depending on what they are loading. what site did you test it with?
Seems like it's stuck on loading...
what site are you testing it with? a few people have had this problem but i can either see it fail or load when i try like google.com or my own sites
I think maybe google, and I tried some others
The device dropdown has white text on white background (Chrome, Windows 10).
gah, thanks! will fix
What is the benefit of this over developer tools in the browser?
The key benefit is you can view all sizes on one screen, rather than having to view each size individually. With everysize, you can then configure a tailored dashboard which you can use repeatedly.
So it's a tool for opening and resizing multiple iframes on one page?
at its core, yep :) everysize just makes it easy to set up the sizes that matter and then forget until you need to test again and you just have to open it up 👍
This comment was deleted 3 years ago
That's great! Hope you've found it useful, feel free to share any feedback you have :)