Archived topic
testing a website
9 replies · Started by Ben on July 29, 2021
I have nearly completed a website, using GeneratePress, GenerateBlocks and a child theme. I will test the website for responsiveness in DevTools. How many different devices should I test the website on? Should I test on the latest version of iOS (safari and firefox) and Android (chrome and firefox), Windows 7 (internet explorer), Windows 10 and the latest version of OSX (safari and firefox)? Or does GeneratePress/GenerateBlocks handle compatibility with different browsers and OS's. I'm thinking that the php and css I have added to the child theme could cause compatibility isssues even if GeneratePress/GenerateBlocks does not. How should I approach testing?
Hi there,
GP and GB uses breakpoints upto 767px for mobile, 1024px for small laptops / larger tablets and anything above is for your desktop view.
So for device testing they should all be pretty similar.
My personal preferences is to check a Moto 4G size first ( thats what Google search console simulates 360px wide ) and the Plus size mobile devices. Then a standard iPad size.
Thanks David,
It sounds like what you're saying is that testing the website at different screen sizes using DevTools is sufficient and that testing on actual devices (or remotely using e.g. browserstack.com) is not necessary. Do I understand you correctly?
I personally still like to check a site on real devices. But 99% of the time the browser developers tools are good enough
Ok, thanks for your help. I've trialled browserstack and I see one of the plugin blocks is not rendering correctly on iOS.
Not really a great fan of those online tools, although browser stack is probably the best one out there.
I am more than happy to check a 'problem' page on iOS if you want ?
Thanks for the offer to test a problem page. I wonder why you are not a fan of the online tools?
Hi Ben,
To add to this:
Online testing tools like BrowserStack are emulations. They're not 100% accurate. Plus, they are really laggy in some cases. I have access to a BrowserStack subscription and to be honest, I barely use it anymore as the User Experience isn't fun.
I personally test things on the FF:
On desktop/laptop:
Chrome - Windows
Firefox - Windows
Microsoft Edge
On mobile:
Samsung J7 Pro - Android - Chrome
Poco X3 NFC & Redmi Note 9S - Android - Chrome
I'd suggest testing on the following devices as well.
iPad
iPad Pro (this is bigger, the viewport size is different from iPad)
all Macbooks (the 13" uses 1366px, the bigger ones use 1920px)
iPhone X
iPhone SE (first ed)
iPhone 11 or 12 Pro.
But mainly, iPad and iPad pro because these 2 have different viewport sizes. iPad Pro uses 1024px while its smaller sibling uses 768px.
Hi Elvin,
thanks for letting me know how you go about device testing.
So if I understand you correctly, you test on Windows only using Firefox, Chrome and Microsoft Edge. You don't test on Mac OSX?
I checked browserstack.com website again and, it seems they are using emulators for Windows and Mac, but they claim to be using real devices for mobiles. Is that accurate?
see: https://www.browserstack.com/question/701
So if I understand you correctly, you test on Windows only using Firefox, Chrome and Microsoft Edge. You don’t test on Mac OSX?
I only test on windows because I don't have physical iOS devices. I could try my luck which Browserstack but it's not really reliable.
But testing w/ iOS is definitely important because there are weird bugs that only occur on Safari.
I checked browserstack.com website again and, it seems they are using emulators for Windows and Mac, but they claim to be using real devices for mobiles. Is that accurate?
see: https://www.browserstack.com/question/701
I'd like to believe that's true but my main beef with the product is how laggy it is when testing large sites. Especially when you're trying to check front-end scripts. The animations can't be refined properly because the FPS drops too much on large pages. :(
