How do you test responsive web designs across devices and browsers?
I have been struggling to find a workflow that allows me to efficiently test my website(nosebuttr.com) across different browsers, devices, and screen sizes. Any recommendations for (preferably free) software to assist with this?
Trending on Indie Hackers
I always test with the Google Chrome Dev Tools Device Emulator.
But there is also sizzy.co or responsively.app (last one is free) which I actually want to try.
I do it the same way but sometimes it behaves a little bit differently on the real device than I expected.
The responsively.app looks interesting. I will give it a try.
Yea I do the same. That's the problem I run into. I was recently with someone who opened it up on their 4k xl monitor and it looked terrible hahaha
Isn't it ironic 🎵
btw this is Safari on MacOS Catalina
To answer your question, I’m using browser stack for device testing (it’s free if you advertise it on an open source project) and I mostly use chrome for debugging.
Ive been eyeballing Polypane but waiting for when I’m rebuilding the Doka Image Editor product site.
Hey Jaen! I think I have the perfect solution for you: Polypane, it's an app I'm building to solve exactly this issue.
It shows your page in multiple viewports where everything is synced between them (clicks, scrolling, typing and even hovers). the viewports can be devices, you can freeform size them or you can let Polypane detect the CSS breakpoints your site already uses and create viewports from that.
Here's a screenshot of your site, which has 17 CSS breakpoints (that's a little much, maybe you can combine some to make your CSS easier to reason about?)
Alongside showing multiple viewports it also has custom element inspector that lets you edit element in all viewports at the same time, built-in live reloading, accessibility tools, all sorts of color blindness simulators and it can emulate all sorts of different scenarios (touch, dark mode, multiple languages, slow network, people with night mode one, bright sunlight...the list goes on 😅).
From case studies I've done, you can expect to be between 3 and 5 times as productive using it. Check it out!
very cool. I'll check it out
https://www.browserstack.com/ is definitely worth checking out, especially if you plan to automate any testing or need screen grabs.
Thanks, I'll check it out
Here is a free version of the app - https://responsively.app/
Some already said Responsively, but I'd like to add that if you want to automate testing, you might want to use Cypress.
If you want a quick test for your website in different screen sizes and if you are on macOS, Safari has Responsive Design Mode built-in for testing.
I manually resize the browser window to smaller width, it's easy to see exact break points and how text/images/sidebar etc are reordering their positions.
There is always http://mobiletest.me which I created. You can make a list of favourite devices and speed up responsive testing with keyboard shortcuts. I'd love to know what you think of it.
I use Sizzy by @kitze
I have an automated test flow that I run through BrowserStack
For mobile testing, I use two iPhones (11 and 6). If I see bugs, I connect them to my Mac and use Safari Web Debugger, as you can seein this video: https://twitter.com/aminozuur/status/1294700650081787906
This comment was deleted 5 months ago.