What is Size Puppy?

Size Puppy started off as an internal web development tool we use to preview how our web pages would fit on screens of different sizes. We have look around and have tried many options but we have found none that really kick-it for us. Naturally, we wrote our own tool to help us do the job. After a while, we find that this tool is invaluable to our web development activities. In fact it works so well that we have decided to open it up for anyone to use. Size Puppy was born (okay, okay, we also feel that it is more convenient for us to have access to Size Puppy over the Internet that's why we have opened it up and putting a password over something so small is more trouble then necessary).

Okay, fine. It's a web development tool but what really is Size Puppy?

Simply put, Size Puppy is an online preview tool to verify how well a given web page would fit into a given screen resolution. Mainly use for web developers (especially those lucky ones with really large screen) who want to make sure that the page they are developing will fit comfortably in smaller screens and do not look too empty or too stretch on larger screens.

Typically Size Puppy is use to launch web sites in different browser windows with different dimension that is roughly the full screen size (explanation here) of various screen size. Those various windows will be a representation of roughly how it will look in that given screen size.

Why does making sure web pages fit into small screen so important?

Internally, our motto is "Size Does Matters!" We understand it is annoying enough to be stuck with a small screen; it is more annoying to view web sites that are at least twice the size of your screen. So naturally, we would make sure web pages we developed will fit nicely in screen of various sizes. That is where Size Puppy comes in.

Why use Size Puppy?

You mean besides the fact that it is free?!? Okay, well… There are quite a few tools out there on the Internet that does the same job. So first let's talk about the alternatives.

There are a few plug-in are freely available on the Internet for web browser like FireFox that supports plug-ins and usually they work great. The benefit of plug-ins is that they have more access to the browser functionality and with that, could provide more features than something like Size Puppy. However, the draw back is those plug-ins only works on the target web browser. So for web development where validation of web pages on various popular web browsers is typically required, it would mean finding and installing plug-ins for every browser used. Not to mention web browsers that do not support plug-ins would not have this as an option. Often, these plug-in, when ever supported, take up toolbar space which reduces the screen area available to displaying web pages and obstructs the view. The result is less accurate screen preview.

Another option is to go for utilities that run on the OS level to resize the web browser window using system level facilities. These are even more feature-full than plug-ins. Because these utilities run in their own window space or in the system tray (Windows speak), they don't obstruct the web browser display area. Besides that, these utilities work very well on all the web browsers for the given OS they run on. Unfortunately, that is also its draw back. They do not work across platforms (well, at least not with a little bit more work than desirable or requires a little black magic).

Beside Size Puppy, there are a number of websites that have a setup very similar to Size Puppy for the same purpose. We did try quite a few of them before we've decided to build one ourselves. The reason; we have not found one that satisfy our needs. Generally we have found them too simplistic to be of any use to us.

Apart from using a tool, online or not, many web developers insist that a simple bookmark to a Javascript is good enough; which is great. They really do work fine once you have bookmarked them. We just did not like the workflow because it takes more steps to launch a few web browsers window of the same site in different sizes. Besides, bookmark of Javascripts means it would have the same limitation as Size Puppy.

In contras, Size Puppy is non-obstructive to the web browser's display area, works across web browsers (well, almost), cross platform, supports a better workflow. However, in our attempt to over come some of the limitations we have found in other window resize tools; we have introduced a few limitations of our own. As much as we like Size Puppy, there are some things that it cannot do. For one, it does not work in Opera as we would expect. There is also the issue with IE where the Current window size is not available unless we apply a little hack which we really hate.

In the end, we still have not answer the question why use Size Puppy. Mainly because we feel that different people will have different needs. What makes our clock tick may not even interest others. So, the decision is yours to make.

How accurate is Size Puppy able to preview web sites on a given screen size?

That is very subjective and Size Puppy is by no means 100% accurate. One of the assumptions we make building this tool is that the full screen will cover the entire screen. This means that Size Puppy is accurate to that of web browsers on users computer will take up all the space on the screen including those area where OS elements like taskbar (on Windows machine) or Application Menu (on OS X) will be covered. Fortunately, Size Puppy is designed to be able to resize web browsers window to any user-input size, as long as the OS supports it. Just key in the numbers and launch or resize if you find that a certain size is a better represents the user screen. If you feel strongly about the size, please give us your feedback. We would definitely consider adding it into one of the preset sizes.

The other aspect we have no control over is the third-party toolbars and/or plug-ins users have installed on their web browsers and how much space are those add-ons going to take up. On the other hand, this aspect of web development should be a given if you need to use a tool like Size Puppy.

We will say one thing though, Size Puppy is a preview tool and it is good enough for most cases.

IE doesn't show current the window size.

If you ask us, we think that Microsoft has lost their marbles. Unlike earlier versions, Internet Explorer 6 will allow Javascript to resize the window to any size (within the constraints of the OS, of course) but there is no known way to get Internet Explorer to report the current window size. The only way to get the current window size is to perform a hack that requires some auto resizing of the window which we really hate doing. While we have that feature turned on when we were using Size Puppy internally, we feel that it is rude and have decided to turn it off.

Help! How do I to turn on Javascript on my web browser?

Oh! Common! Do you really need help on this one?!

Size Puppy does not work with Opera.

The problem with Opera is their idea of tabs and windows which seems to be very different from the other web browsers. The Opera development team seems to view Tabbed Document Interface (TDI) as Multiple Document Interface (MDI) with tabs. In another words, every tab in Opera is a child window (the area where the web page content, navigation buttons and address bar resides) maximized to the parent window (the main window that contains the menu and tab interface) with an addition tab interface to navigate between the open web pages (right click on any tab in Opera and select "Restore" to see what we mean).

So what has that got to do with Size Puppy? Well, for Opera's version of the Javascript, it means that any window operations are targeted at the child window instead of the parent window. That effectively means that any control over the parent window is off-limit to Javascripts. Therefore, when Size Puppy is maximized to the parent window, clicking on the "Resize this window" will have no effect at all. You could "Restore" the child window and resize the child window but that is really not what you are looking for, isn't it.

Similarly, launching a new window with Size Puppy will produce another child window within Opera's parent window that is in the "Restore" state as long as the size specified in Size Puppy is not larger then the parent window. Than again, it is also not what you are looking for.

Interestingly, Opera have the feature to show you the window size on the title bar if you enabled it. Unfortunately again for web developers, the size Opera shows you is inner size of the browser plus the address bar and navigation bar. It is not just bizarre; it is really not much use if you are trying to see if your web page can fit in a screen of a certain size. This is one such situation where using a resize application that runs on the OS level will comes in handy.

Note: If enough people complain to Opera, may be they will change. At the very least, be able to show both the inner and outer window size on the title bar.

I still have question. What do I do?

Please send questions, or comments to