We explain what Sizzy is and how you can take advantage of this web design-oriented browser, which allows you to increase productivity in responsive development.
In this article we are going to address a tool that can be very useful for responsive design. It is about , software that allows you to view a website in different screen resolutions at the same time, which also offers a series of tools for developers that increase the native possibilities of browsers.
Many browsers in one
We can understand Sizzy as a web browser for developers and site builders, which allows us to see the aspect of the page that we are developing with multiple devices and screen sizes at the same time.
By having several screens at the same time, we can see how a website behaves in different dimensions without having to open it on several devices or having to resize the browser window by any manual means. Therefore, when developing, it allows you to concentrate on the code and less on the browser, being able to better visualize the changes that are being made and how they affect different screen models.
Of course, the different screens used in the visualization depend entirely on your preferences and are perfectly configurable. You can adapt them to the dimensions of the most common devices, such as the smallest iPhone model, the most modern, the normal and pro models iPad tablets and the screen of a desktop computer. Or just tell it to use sizes with pixel dimensions: 320, 480, 750, 1024, 1200.
The selection of the devices in the visualization can be done through the “Device drawer” section. Everything is quite easy to find with the icons at the top and at the end of the text you can see a video where we take a complete tour of Sizzy’s options, so you can learn how to use it.
At all times you will be able to see the images how they look, being able to concentrate more windows in a reduced space, since it allows us to zoom in and see the devices at real or reduced size.
Also, it has a tab system to select the devices that are most relevant to you, or critical for any reason, so you can quickly activate them with a single click.
Sizzy’s Plugins
Another of the most useful parts of Sizzy is its plugins section, which allow us to do different things and with more or less utility depending on the case. There are a series of already integrated plugins that you can use, these being the most interesting in my opinion:
-
Navigate to a selector: This allows the browser to always show you the section of the page in which a certain element is seen. Imagine that you are editing the footer of the page. With each refresh you want the browser to scroll to see just the footer. Then you put the selector of the layer or element that has the footer (something like “.footer” or whatever in your case) and you get it to always show you that element.
- Edition mode: Allows you to change the text of an area of the page, directly with Sizzy and thus see how other text would look, without having to edit the HTML.
- Show with other Google sources: This tool is not used much after all, but it is quite successful. Allows you to change the font of the page, trying any other font available in Google Fonts.
- Cache clearing: easy and fast, with one button you eliminate all the typical problems of asset caching.
Screenshots responsive
Another thing that I find very useful is the issue of screenshots, which adds a lot of value compared to traditional alternatives to save the screen image. From Sizzy you can take screenshots with several devices at the same time, so that in a single image you can see how the page would look on any number of devices.
This is great for when you want to show the page to your client and of course you want them to appreciate the differences between devices, highlighting all the work you have done for adaptability to any device and screen size.
You also have the option of recording a video with the use you make of the page, in which you can see how it looks on all the devices you want. With the use of the page itself you can demonstrate how it would be in its entirety, scrolling, clicking on the links, etc.
Advanced development tools
Also relevant is the developer tools section that Sizzy offers. These tools are basically the same as the Chrome developer tools, which allow you to inspect elements, view the console, network, performance, etc. along with various bonus panels that Sizzy offers you.
Within the DevTools it allows you to select the browser you want to inspect by means of a drop-down field. Within “Headers” you can assign custom headers to the request, to see how the site behaves when it receives them. Within Cookes you can see which ones are managed on the site and what values they have. You can also see the storage in LocalStorage and the HTML code that has been received from the server.
Among these panels, the “Social” part that allows us to debug the social tags of our website seems very novel to me, so that it shows you how it would look on social networks when sharing that content.
In “CSS Overrides” allows you to write custom CSS code to override the site’s CSS and see the changes live within Sizzy.
payment tool
The perhaps least attractive part for many is that it is a paid tool. You can download and try it for free, but if you want to use it beyond the trial time you would have to pay a license.
The payment is monthly, or if you prefer annually, which always offers you a discount. The fee is not that great if you take into account the time you can save. Either way, if you don’t want to pay you can always just use the browser’s developer tools, as we’ve been doing traditionally for responsive development.
Another alternative that may also fit you is , which is very similar in concept. Although it does not have all the functionalities, it can come in handy if your goal is simply to view the web on all target screen definitions at the same time.
Sizzy’s Video Tutorial
We end the article with a video in which you can see how to work with Sizzy in a graphic way. You will be able to see the most outstanding functionalities and how to manage devices, how to take screenshots and access advanced development tools.
Facebook Comments
Disqus