CROSS BROWSER & DEVICE TESTING


S06 | E07 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  2 min read

Web School Series 6 Episode 2

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


CROSS BROWSER & DEVICE TESTING

Today there are many devices screen sizes spanning from large desktop screens to tiny mobile devices. On top of this, there are many browsers that perform regular updates and users don't often keep their browsers up to date. This can cause issues for website designers as there are hundreds of combinations of browsers and devices.

Website Design Agencies will undoubtedly subscribe to paid services such as https://www.browserstack.com/ that let you test a website across these combinations quickly to target and errors for modification. We do recommend such services especially if you have a large website and are updating content frequently.

Tools such as Cross Browser testing, at the time of writing, offer a seven-day free trial that can be useful to try when you are going live, then consider if you wish to use the service ongoing. To download the extension go to the following link:


However, if you only have one small website you might not wish to pay for such tools. Thankfully browsers have inbuilt tools that allow you to test each page manually. Let's take a look.


SAFARI
Safari Responsive Design Mode

Fond Responsive Design Mode in Safari

Safari Responsive Design Mode iPhone 8

Safari Responsive Design Mode for Safari iOS 11.0 on an iPhone 8

CHROME
Chrome Developer Tools

Right mouse click and select "Inspect Element" to open Chrome Developer Tools

Chrome Developer Tools Galaxy S5

Toggle on Device Mode to simulate devices, as seen here for Galaxy S5.