Testing Responsiveness with Vivaldi Browser

visioncraft Member Posts: 161 Learner

This weekend I got a chance to check out the Vivaldi browser. I had heard about it, and knew that some Web Developers really like it, but so far had been happy with my combination of using Safari and Firefox for personal browsing and work. But the latest updates on both of these browsers have made it difficult for me to now test websites at really large screen sizes. Both Safari and Firefox used to have a 'Responsive Design' testing mode, that allowed me to select very large screen sizes, and would then render the current website in a 'zoomed out' mode on my little laptop — thus allowing me to check whether there were any Design issues on large screen sizes using my own limited-size screen. But recent updates have deleted these options: now both Safari and Firefox only show me the 'responsiveness' of my websites on tiny mobile screen viewports by default. This left me looking for a good alternative browser that I can use for responsiveness testing, which led me to Vivaldi.

First thing to mention, is that it seems to work very well with Duda:

Duda's Editor seems to like it better than both Firefox and Safari. This might be due to the fact that Vivaldi uses a modified version of the Chromium engine, the same engine used by the Chrome browser - which is what I believe the Duda Devs use themselves. It feels stable and snazzy.

Like most current browsers, it ships already with a long list of built-in device specs to allow us to test responsiveness in a range of mobile device viewports. But most importantly, it allows us to add our own devices to the built-in list:

Several browsers allow you to do that, too, but most have caveats: Safari, for instance, allows you to specify a custom viewport size, but doesn't 'save' it on a reusable list. Firefox allows you to save device details, but doesn't 'zoom out' when displaying large viewport sizes. Vivaldi, on the other hand, works as you'd hope: you can save your device specs by name, recall it when you want to reuse it, and it automagically zooms out to fit the entire viewport inside your screen. This is what it looks like when I preview a website in a viewport the size of an iMac Retina 5k:

Apart from being great for testing responsiveness, Vivaldi has a truckload of features, many of which are focused on personal privacy and high customisation. Indeed, some reviewers call it the 'Emacs' of browsers: you can tweak so much of its interface and functionality, you might end up with a browser that looks and behaves substantially different from mine. Because it uses the Chromium engine, many Chrome extensions are compatible with it, and it even comes with its own built-in RSS reader, full-blown email client, and even a Mastodon app. 

Most of us are creatures of habit, and tend to stick to the browser we use and know. But If you haven't tried a new browser in a while, and are annoyed at the shortcomings of your current browser, or curious to see what is out there, then Vivaldi might be worth a try.