Polypane versus Sizzy

Chris Salmon — Sun, 07 Jul 2019 17:05:25 +0000

NOTE: No review versions were provided. I bought licenses for both apps. This review was written in mid-2019 and pertains to Sizzy 0.1.2 and Polypane 1 (Chromium 73). I expect the feature sets of both apps will grow over time. I'll update as needed. "But why no Blisk?" you may be asking. Good question. In certain respects, Blisk is a much more robust solution than either Polypane or Sizzy and deserves its own dedicated review. It feels a bit out of place here as it does not allow for displaying multiple viewport panes at once, which is, to my mind, the main draw of the apps under review here.

Under the hood

Polypane

Polypane is an Electron app with the Chromium browser built in. Yeah, that's right: Electron. I realize that comes along with some baggage and may be a deal breaker for you, but it's not for me. Electron has opened up new vistas for Windows (and Linux!) users. Apps that we probably never would have seen (because the design/development community skews heavily toward Mac OS) are also being released for Windows. I can't help but see this as a good thing, even while I will always prefer native implementations (when available). With Chromium as its foundation, you'll have Chrome's dev tools available for inspection and debugging needs. Invoke the dev tools window with the dedicated toolbar button or use the familiarCtrl/Cmd+Shift+I keyboard shortcut. Because it renders your pages with Blink, you'll be viewing your web pages exclusively in a Chrome-like browser. That may be suit your needs just fine, but it does preclude Polypane from really being used for cross-browser debugging. You're still going to need to fire up Firefox, Safari, (shudder) IE, etc. to test your code against various browsers. And that's fine. Cross-browser testing just isn't Polypane's (or Sizzy's) purpose.

Sizzy

Sizzy, too, is built on Electron (with React) and ships with with Chrome dev tools built in, so it's on par with Polypane in that regard. Like Polypane, Sizzy makes exclusive use of Chromium's Blink rendering engine. Per the app's product site: "Sizzy cannot simulate different browser rendering engines, so there's a chance that there might be some minor differences when testing on a real device." The caveat regarding cross-browser testing applies here as well.

Fair warning: playing around with the dev tools coincided with Sizzy's becoming unresponsive for me (I had to close and reopen the app), but I don't know if there's any relevant correlation there. It appeared to be an isolated incident.

UI

Polypane

Polypane strikes one as a Chromium-based browser with most of the chrome stripped out. Bare bones. It gets the job done, but with somewhat less panache than its competitor. There are no menus and no settings/preferences to tweak. Just toolbar buttons and pane-specific controls. You'll need to explore the interface to get a handle on its available functionality. Undoubtedly, some readers will want a dark mode, but Polypane doesn't (yet) provide one. I keep most of my apps light-themed and Polypane's color scheme works well for me. Just something to be aware of.

Sizzy

Sizzy has the more polished UI. It looks … well ... more like a dedicated development app, rather than a modded development browser. The interface feels pretty intuitive and frictionless. A dedicated tool panel provides access to device filters (by OS or by type), view mode (default, horizontal, and focus), and some basic "settings" (including the ability to screenshot all panes at once—a nice feature to have if it weren't so buggy, but definitely not a "setting," per se).

In-app tools

My only problem with Sizzy's Windows implementation (other than the obvious fact that it doesn't look like a native Windows 10 app) is the same one I had with another recent Electron app I came across, Twizzy. The Electron toolkit is flexible and robust, yet Sizzy on Windows comes with the stock white title bar, menu bar, and menu. And this despite the fact that Sizzy only ships with dark themes. These very bright UI components are distracting and stick out like a sore thumb. (To be fair, the Mac version also appears to sport a default Mac-OS-specific title bar, but it doesn't look out of place there.) Compare this with an Electron app like Eagle or Github Desktop which both get this portion of the UI right. I hope the developer sorts this nagging issue in a future release.

Winner: Probably Sizzy for me, but not by much (and your tastes may differ)

Workspace management

By workspace management, I mean tasks like rearranging and toggling view modes for your visible panes as well as customizing the app's main window. One significant drawback to Sizzy, at least for me, as you'll read below, is its comparatively cumbersome workspace management.

Rearranging panes/viewports

Polypane

An easy task in Polypane. There are dedicated buttons above each viewport to shuffle your viewports left and right in the default view. As discussed below, the same task in Sizzy requires a lot more work.

Polypane's dedicated viewport "shufflers"

Sizzy

Yes, you can rearrange panes to your liking, but you'll have to access the Organize Devices modal dialog, manually rearrange the devices list order, and then save your changes. This feels as tedious it sounds. Maybe you'll get your devices organized just the way you want them and won't need to access this dialog that much. But I tend to rearrange the panes to match my particular focus at any given time—or, at least I would, if Sizzy made it easier to do so.

View modes

Polypane

Polypane has only two modes: the default (pane mode), which lays the viewports out horizontally and focus mode (behind the toggle mode button) that displays a single viewport. Let me start with that second mode first. I don't find it particularly useful, mainly because it doesn't map to any extant viewport visible in the default view. It's completely it's own thing. You'll need to manually size and resize this single-view pane according to your needs at any given time. I don't find it worth the trouble for my workflow, but I also don't find that I need it with Polypane.

As for the default? It works for me better than Sizzy's comparable view (i.e., horizontal) for reasons I discuss immediately below.

Sizzy

Sizzy ships with three view modes (and what I'll call a "submode"): default (which stacks the viewport panes vertically as needed), horizontal (which, as may be obvious, displays them horizontally in a single row), focus mode (which toggles a view of your individual viewports), and a new submode just released in the 0.2.1 update: zen, which hides the app chrome to provide a less cluttered experience.

The default stacking view feels unnatural to me and I couldn't get used to it. It's natural enough to scroll vertically through a web page, but I don't like scrolling vertically to bring additional, discrete viewports into view. It feels like comparative visual context is lost. I much prefer viewing the panes laid out alongside one another—horizontal mode. Unfortunately, the only way to horizontally scroll through your visible panes in horizontal mode is to use Shift+Mousewheel. I realize that's pretty much exactly how you scroll horizontally on a page that's wider than the viewport, but again, it feels cumbersome here. There's no horizontal scrollbar. Polypane has the better solution in this regard (noted above).

Focus mode is where Sizzy's workspace management really shines. Once you toggle it on, you can easily navigate between your visible panes with the arrow keys or use the tabs near the top of the interface. Sizzy's focus mode implementation is far more refined than the comparable feature in Polypane.

Sizzy focus tab toggles

The zen submode is accessible from any of the other modes by pressing the z key.

Zooming the workspace for high-level comparison

Polypane

Yep. Easily done with Polypane. For my workflow, this is a standout feature (one that Sizzy shares). I often find myself needing (or, at least, wanting) to see how all viewport contents compare with one another at a high-level. Scrubby zoom to the rescue.

Polypane's scrubby canvas zoom

I would also note a deceptively useful feature in Polypane. Grab an empty area of the canvas/workspace with Spacebar+LeftClick and you can drag the canvas horizontally—left and right. This is so much more intuitive to me than Sizzy's comparable Shift+Mousewheel to scroll the canvas horizontally.

Sizzy

Yes, in the default (i.e., stacking) view mode, but not in horizontal.

As a sidenote, when you resize the app window, the viewport panes in the workspace shrink to fit the available space, at least in the horizontal view mode. This feels counterintuitive to me. I want the viewport panes to remain at their intrinsic dimensions whether I resize the overarching app window or not.

Sizzy's scrubby canvas zoom

Winner: Unless you need focus mode a lot where Sizzy shines and Polypane doesn't, Polypane has the edge here

Individual viewport management

Adding a viewport to the workspace

Polypane

Adding baked-in viewports to your workspace with Polypane couldn't be much simpler. You just double click an empty area of the main workspace and an overlaid list appears with all available device profiles. I can't tell you how much more I like this approach as compared to wrestling with Sizzy's buried menu to accomplish the same sort of thing. (There, you'll need to access a toolbar menu to display a modal overlay to toggle viewport profiles on and off and then save your changes.) When I'm using Polypane, I use this feature a lot. It's fast and frictionless. From a user experience perspective, it's just hands-down better than Sizzy in this regard.

Adding a viewport to Polypane {.figcaption .mb-8}

Sizzy

With Sizzy, you have to visit a dedicated (and somewhat out of the way) menu to add even a baked-in device profile. And it always adds the new device viewport to the right. If you want to shuffle it left of your prior viewport, as noted above, you'll have to visit the same menu a second time.

Adding a viewport to Sizzy

Reconfiguring an existing viewport

Polypane

To swap out one of your viewports for another, you just click on the device type label above the viewport and the same overlaid list as mentioned above appears. Choosing a different profile reconfigures the current viewport to the new dimensions. Easy-peasy. And fast.

Sizzy

The same task is not as fast and easy in Sizzy. You'll need to activate the overflow menu above the pane, select edit to bring up a modal dialog, manually type in your adjustments, and save your changes.

Reconfiguring a viewport in Sizzy

But, wait! There's more! You didn't merely adjust the viewport there. You actually also edited the built-in device profile, and it's gonna stay that way (until you manually reverse your edits or clear the app cache). You probably didn't want to do that. I know I sure didn't when I came across first this feature. If you really want to go down this path, you'd want to clone the viewport first and then make your modifications. But the underlying point here is that Sizzy doesn't provide an easy way to quickly reconfigure a given pane. It's an all-or-nothing sort of thing—if you change it, you're changing the underlying device definition quasi-permanently.

Removing an existing viewport from the workspace

Polypane

There's an "x" above each viewport. Click it and the pane goes away. It's really as simple as that. And bringing it back is as simple as double-clicking an empty area of the workspace.

Sizzy

With Sizzy, things are a bit more ... complicated. Yes, you can delete a viewport by accessing the overflow menu and choosing delete. A modal will pop up asking you if you're sure you really want to do that. The first time I encountered this, I thought, "C'mon. The stakes aren't that high. Why are you making me click again?" Actually, the stakes are that high. You're not just removing the viewport from the workspace. You're also removing the device profile from the app completely. If you want it back, you'll need to manually recreate it (or just reset the app cache—I found myself doing that a lot). Sizzy makes it easier to delete a device completely than it does to merely hide it. That feels backwards.

The proper way to merely hide a viewport form the workspace is to access the Organize Devices menu, click the eyeball icon next to the unneeded device, and save out your change. Cumbersome.

Winner: Polypane, and at least for my workflow, this is a huge win

Scroll to anchor on refresh

Polypane

Nope.

Sizzy

Yes. This is an interesting feature. Chromium is pretty good about retaining your vertical scroll position on soft reload out of the box, so I didn't find myself using this very much. But it's there and you may find a suitable use case that makes it a standout feature for your workflow.

Winner: Sizzy

Baked-in device profiles

Polypane

Polypane ships with quite a few more baked-in device profiles as compared with Sizzy (21 vs. 13).

Sizzy

There aren't as many stock profiles to choose from (13)—all Apple and Android devices, except for two generic laptop profiles.

Winner: Just going by the numbers, Polypane wins this round, but given the fact that both apps are extensible in this regard (see next section), it's tough to view Polypane's higher count as a strong selling point

Custom device profiles

Polypane

Can you add custom device profiles to Polypane? Yes, but you'll have to work just a bit harder for it than you do with Sizzy. Via the UI, you can customize the dimensions of any existing viewport in the workspace via pane-specific controls. But you can't save your tweaks for later use. Sure, they'll remain available across sessions. But custom device dimensions are impermanent one-offs—that is, and I stress, within the UI itself. However, you can modify this configuration file and save it to the appropriate OS-specific location for your device. Those changes will propagate to the built-in device list for future use. Here's where to save the modified file.

Windows: %APPDATA%/Polypane/
macOS: ~/Library/Application Support/Polypane/
Linux: ~/.config/Polypane/

Personally, I'd rather customize Polypane's config file than manually create custom device profiles via Sizzy's UI (which I find cumbersome), but your mileage may vary depending on your preferences/constraints.

Sizzy

While Sizzy ships with fewer baked-in device profiles, this is more than offset by the fact that you can add your own. I don't know what the upper limit is for custom devices profiles, but I didn't find it. To add a new, custom viewport in Sizzy you need to click the plus button in the top-right toolbar and complete the device profile form. You're able to specify a device name, a user agent string, and the the device's dimensions. Once you create a custom device profile, it shows up in your list of available devices (and stays there unless and until you clear the app cache). You can always get back to it.

Winner: Feels like a tie to me, though if you're particularly averse to customizing a config file (you're probably not), Sizzy may have the edge for you

Filtering by device types/OS

Polypane

Nope.

Sizzy

Yes. I can see this being very useful for developers who target both Android and iOS, but would like to focus on one or the other sets of devices at a time. You can also, of course, filter out mobile devices and just look at larger screens. This functionality is nicely implemented and works well.

Sizzy's filter controls

Winner: Sizzy

Derive viewports from your CSS

Polypane

Want to automagically see what your site looks like across your own breakpoints rather than those from a canned device profiles list? Polypane absolutely lets you do that. Just click the Create panes button in the toolbar and the workspace loads all your media queries as panes in the workspace. This is a standout feature. And if it strikes you as one you'll need ... well ... Polypane is the only game in town right now.

Sizzy

Nope. Not automatically, at any rate. You'd need to manually create them, one by one, and then toggle their visibility on individually.

Winner: Polypane

Screenshots

Polypane

Polypane currently only allows you to screenshot the entire set of visible panes. There is no option to screenshot individual viewports. Screenshotting consistently worked as expected, though. I would note that Polypane does not hide the viewport UI (device type, pixel dimensions, etc.), so they will appear in your generated screenshots. I can't decide whether this is a good thing or not.

Sizzy

With Sizzy, you can screenshot individual panes as well as the complete set. Screenshotting the complete set of viewports, however, is currently an experimental feature. Screenshotting individual panes via the on-canvas viewport UI worked like a charm, however. Moreover, Sizzy has the ability to screenshot the viewport or the entire scrolled page—also an experimental feature right now, though thankfully one that appears to work as intended. That's a nice, thoughtful touch.

I found screenshotting all panes with Sizzy to be very hit and miss. I can see why it's currently behind an experimental toggle. In my testing, I saw screens spliced together incorrectly into a single image when I was in default view mode as well as horizontal view mode.

Feels like I personally would use the side-by-side screenshots that Polypane provides much more often than I'd need Sizzy's individual screenshots. Your mileage may vary according to your use case.

Winner: Looks sort of like a tie, but somehow in different categories 🤷

Keyboard shortcuts

If you're a so-called power user—if the first thing you do with a new app is to learn the keyboard shortcuts—both Polypane and Sizzy have you covered.

Polypane

View the list of available keyboard shortcuts here.

Sizzy

You can find Sizzy's shortcuts under the Settings > Shortcuts tab. There's a note at the top of this tab promising that shortcuts will soon be customizable!

Winner: Whichever one allows user-configurable shortcuts first!

Baked-in Microsoft device profiles

Mac users: feel free to eye roll and skip to the next section now.

Polypane

Nope. Not a Surface device in sight. (But at least you can add them to the pane config if you're so inclined)

Sizzy

See above. But, again, you can add your own profiles.

That's pretty much all there is to say about that. 👎

Winner: Neither

Try before you buy?

Polypane

Yes. (Seven-day trial.)

Sizzy

No. But contact the developer. He may grant you a quasi-trial period within which you can get a full refund of the purchase price. Even if not, it may not be too financially onerous to shell out $7 for a one-month subscription. At least you'll know whether the tool grabs you enough to commit to the yearly package.

Winner: Polypane

Documentation

Polypane

Yes: here

Sizzy

Doesn't appear so. But there is a changelog.

Winner: Polypane

Update cadence

Too soon to tell. I will say that Sizzy updated from 0.0.21 to 0.1.2 while I was writing this review and Polypane 1.1 is scheduled to drop tomorrow.

Winner: not enough comparative info yet

Odds and ends

Toggling device orientation

In Sizzy, to change a pane's orientation from portrait to landscape, you click the associated device icon (at the upper left of the pane); in Polypane, you click on one of the pixel dimension readouts at the upper right. Neither is particularly discoverable at first blush. Sizzy, however, does provide a hover effect for the device icon, which certainly aids discoverability. Clicking the icon not only toggles the pane to landscape or portrait orientation, it also rotates the device icon itself to the appropriate orientation as well. That's a nice little touch and representative of Sizzy's more polished UI.

Sizzy's ghost scroll

Sometimes when I was using Sizzy and also had another Chromium browser open as well, the web page I was viewing would begin to slowly scroll upwards in both browsers and there was no way to stop it, except by closing one or the other of them.

Polypane's scroll sync issue

If your dev environment makes use of Browsersync (and particularly its scroll sync functionality), be warned that this doesn't play nicely with Polypane. You'll need to either (a) configure Browsersync to not sync scroll across devices, or (b) toggle off Polypane's built-in scroll syncing (via the enable/disable scroll sync toggle in Polypane's toolbar) and let Browsersync do its thing (which is my preference). You'll need to do one or the other. Otherwise, things will get weird.

Cost

Okay. That brings us to the penultimate question. How much will these tools cost you?

Polypane

Polypane runs $12/month ($144 billed yearly) or you can subscribe monthly for $15. I initially thought this seemed a bit pricey given Polypane's feature set, which is generally comparable to Sizzy's (at less than half the apparent cost). But Polypane's license allows you to install the app on three separate devices. This is well worth noting for purposes of price comparison. Yes, the cost is higher on the face of it, but per install it works out to be as little as $4/device (if you require multiple device seats, as I do).

Sizzy

Sizzy will set you back only $5/month ($60 billed yearly). It, too, has a month-by-month option for $7. At less than half the cost per month and with a very similar feature set where it counts, Sizzy is the winner here in terms of a price-to-value comparison—that is, if you only need one seat. Note: Sizzy's license allows you to install the app on one single device. To add additional devices, you'll need to purchase additional licenses (at $5/seat). If cost is a deciding factor for you, and you don't need multiple seats, you'll probably want Sizzy (that is, unless, for your workflow, the significantly better tool management UX of Polypane justifies its higher cost. As noted above, Polylpane has a free trial to help you make that determination).

Winner: Going strictly by the numbers for a single license, Sizzy wins (but the story is different if you need/want multiple seats)

Do you actually need one of these tools?

And, finally, the most important question—one that's probably been on your mind throughout the entire review above: do you actually need one of these tools?

I'll be honest here. If you're budget is currently tight (as mine has been at various points in my life), the short answer feels like: No. Not really. These are nice tools. Good tools. Convenient tools. Helpful tools. I like them both for different reasons. I wish that together they would make a baby that embodied the best of both, name is "Polysizer," and release it to the world. I'd subscribe to that in a heartbeat.

Do they speed up your workflow? Quite possibly, but not exponentially so. They certainly do reduce the friction of developing a responsive website in real time that looks great across various device types.

But they both currently feel like something of a luxury to me. Very nice to have—and worth the investment—but not yet indispensable. That said, if the cost is workable for your budget, I highly recommend giving one or both of them a try.

Winner: You! ✊

Summary comparison

	Polypane	Sizzy
Under the hood	Electron (with Chromium)	Electron (with Chromium)
Linux support	✓	✓
Rearrange viewports	✓ quick and easy	✓ comparatively cumbersome
Reconfigure viewports on the fly	✓ quick and easy	✕ Not really
Remove viewports	✓ quick and easy	✓comparatively cumbersome
Zoomable workspace	✓	✓
Scroll to anchor on refresh	✕	✓
Baked-in devices	21	13
Custom device profiles	✓ via a modified config	✕
Filter by device type	✕	✕
Filter by device OS	✕	✕
Screenshot individual viewport	✕	✓
Screenshot all viewports	✓	✕ Still experimental
Derive breakpoints from CSS	✓	✕
Microsoft device profiles	✕	✕
Free trial	✓	✕
Documentation	✓	✕
Seats/devices per license	3	1
Cost	$12/month (on up to 3 devices)	$5/month (on a single device)

Summary

I like both of these apps, albeit for different reasons. Polypane has better tool management; Sizzy has a more polished UI and some unique functionality (filter by device/OS, for example). This space is still evolving (pioneered by Blisk, I think—more on that in another review) and I expect great things from both Polypane and Sizzy (and others?) in the future. May their tribe increase.

This article was originally published on windowswebdev.

DEV Community: Chris Salmon

Polypane versus Sizzy

Under the hood

Polypane

Sizzy

UI

Polypane

Sizzy

Workspace management

Rearranging panes/viewports

Polypane

Sizzy

View modes

Polypane

Sizzy

Zooming the workspace for high-level comparison

Polypane

Sizzy

Individual viewport management

Adding a viewport to the workspace

Polypane

Sizzy

Reconfiguring an existing viewport

Polypane

Sizzy

Removing an existing viewport from the workspace

Polypane

Sizzy

Scroll to anchor on refresh

Polypane

Sizzy

Baked-in device profiles

Polypane

Sizzy

Custom device profiles

Polypane

Sizzy

Filtering by device types/OS

Polypane

Sizzy

Derive viewports from your CSS

Polypane

Sizzy

Screenshots

Polypane

Sizzy

Keyboard shortcuts

Polypane

Sizzy

Baked-in Microsoft device profiles

Polypane

Sizzy

Try before you buy?

Polypane

Sizzy

Documentation

Polypane

Sizzy

Update cadence

Odds and ends

Toggling device orientation

Sizzy's ghost scroll

Polypane's scroll sync issue

Cost

Polypane

Sizzy

Do you actually need one of these tools?

Summary comparison

Summary