Working with window sizes, the low-tech way

Posted on October 09, 2000

in Visual Design

by Ben Henick (persist1)

Rated 3.83 (Ratings: 4) (Add your rating)

Want more?

More articles in Visual Design
More articles by persist1

Ben Henick

Member info | Full bio

User since: January 23, 2000

Last login: February 05, 2007

Articles written: 9

Background

Every few weeks another article or two crops up, talking about what a pain it is to create layouts that are "friendly" at one screen resolution when your normal operating environment is different, e.g. it's a good idea to target 800x600 window sizes, but you're running your station at 1280x1024.

Eighteen months ago, I came up with a creative workaround for this problem.

Assumptions you can make

One nice thing about display environments is that a pixel will always be a pixel (unless the user is a reasonably savvy Windows user who's changed their ppi equivalency and/or window geometry). A recent article in A List Apart talks about this convenience.

One of things that follows from this is that regardless of resolution—and excepting the situation posed in the previous paragraph—browser chrome will always have the same pixel dimensions.

Therefore, what matters most are the overall dimensions of the browser window.

This brings us to the desktop and—more specifically—the image that you intend to place on it.

Finally, the solution

The following assumes that you have access to Photoshop.

Take an image that you've already sampled and cropped to the size of your display. digitalblasphemy.com has always been my favorite place to look when I've got time to kill.
Use ascending layers, containing successively smaller rectangles, to represent each full-screen window size, and manipulate their opacity, color, or whatever else to achieve a result resembling this. How you arrange the squares is entirely your own affair; it just so happens that I like to center mine on the desktop. The important thing is to provide enough contrast so that you can see each outline without straining.

This done, you can put the new image on your desktop and then when it comes time to ask, "what does this design look like at resolution n?" all you have to do is drag inside the lines. You'll then have a painfully simple way to see how your design renders under various conditions, and not have to do too much guesswork.

14 comments on this article. Log in to add your comment |

Submitted by marlene on October 10, 2000 - 16:44.

While this type of test works well for testing the impact of window size on images within your design, there is a problem with this approach when it comes to other important elements of a web page, specifically text rendering. Font sizes may change depending on the browser and platform of the user (not to mention if the user has changed the default font sizes). Unless the site designer or coder is using CSS and dynamically serving different style sheets according to a browser/platform detect, the impact of screen resolution on the look of the site (flow of text within tables, around images, size of text in navigation, etc.) may not be accurately reproduced just by resizing the browser window. The best way to understand how your site will look on different platforms, browsers and window sizes is to test the site using various combinations thereof.

I would caution the reader against making assumptions about available window size (dimensions) by measuring or eye-balling a window resized to a grid, unless you are strictly talking about an image. The approach suggested may be low-tech, but it may not be accurate.

Submitted by aardvark on October 10, 2000 - 19:13.

This approach has it advantages to get a quick and dirty idea of how pages look at lower resolution. Specifically, how graphics fit and how text may flow (although we all know it's no substitute for actually changing your resolution). But I dumped all my old backgrounds over a year ago when I discovered Bookmarklets. Specifically, the windowing ones that allow you to resize a window with a click. There are sets for both Netscape Navigator and Microsoft Internet Explorer. There are many others available there that are also quite cool.

Submitted by persist1 on October 11, 2000 - 11:35.

I had originally intended to hint at using JavaScript for achieving the same result.

And then I thought, "I'm writing this for the benefit of folks who for whatever reason would probably avoid using JavaScript for this, until they thought of it on their own time."

Submitted by cap'n ahab on October 11, 2000 - 11:45.

It's all about Applescript for those developers on a Mac. Open the Applescript recorder. And record yourself while resizing and positioning a window. Then stop the recorder, and go back and edit the script setting the window size to the desired dimensions. Then copy and edit the script to have multiple dimension resolutions After you spend about fifteen minutes creating those scripts. Its just a double click to view designs at any resolution. Instead of fidgeting to size a window to coordinates laid out onto your background image This is much simpler than Javascript.

Submitted by aardvark on October 11, 2000 - 14:27.

For what it's worth, clicking a button on my browser that says "Resize to 640x480" is much faster than finding the icon on my desktop (perhaps under my window) and double-clicking it. Ok, maybe by only a second, but still, it's faster to me. I have a row of those buttons when I'm developing for a few different resolutions.

Submitted by persist1 on October 11, 2000 - 19:21.

I will be the first to point out that dragging the mouse hither and yon is often a royal pain.

Thus, I am quite grateful for aardvark's mention of Bookmarklets. I figure I'll be downloading them myself before too much longer. They don't help if you have lots of users with disabled or antiquated JavaScript interpreters (as many of us do), which is one of the reasons why I used the phrase "low-tech" in the title. After all, the last time I checked it was necessary to disable JavaScript to reliable see how a design would render under those circumstances.

In reference to Marlene's comment: I agree with her strongly that mere window sizing (regardless of the means by which you test for it) doesn't constitute a full test of a design's presentation... however, it creates the circumstances you need to check for all of the other factors in a given environment. Not only that, but in Windows at least it's a great deal less hassle than changing the display properties outright (which among other things resets Photoshop palettes back to their default states, if Photoshop is open when you change pixel rez). Therefore, if you need to fiddle with the font-size, you can do so to your heart's content. Need to see what it looks like when toolbars are turned off? You're in business. All the while, a pixel is still a pixel (except in the case I mentioned in the article).

Submitted by waltd on October 11, 2000 - 21:19.

I built a tool for our intranet to do this in a browser window. I have an early demo of it at http://64.0.221.74/test/size/ The final version sniffs for many more browsers than just NS and MSIE. There is, of course, little hope of fixing the font size problem, but this gets you in the ballpark with the window size without much rigamarole.

Submitted by persist1 on October 12, 2000 - 12:54.

This whole font-size issue has me thinking about that important human factor: quality of eyesight.

Of course, I've been sensitive to it for the past couple of months, by virtue of the fact that I need to get glasses again but have been broke (so Excedrin's my best friend many days of late).

I've always tried to stick to the principle that the user needs to keep as much control over presentation as you can bear to give them. So yes, I do play with alt-v > x > g|l|m|s|a (and ctrl-]|[) quite a lot when I've started coding a design. Given mastery of the keyboard and a willingness to reload occasionally, it's not hard to do...

Submitted by aardvark on October 12, 2000 - 15:52.

This statement got me thinking. Considering the approach I use in Give the User Control Over Your Fonts (and yes, I just plugged my own article), and given the Bookmarklets I listed above, is it possible to create a bookmarklet to load a stylesheet that kicks fonts up or down in size? Sure, it is, but my JS skills aren't that strong, and we'd need to address coding different style sheets for each site. If you use the same class names from project to project (as I tend to do), then perhaps you could have one global sheet to be used on all your development site. Or am I making no sense...?

Submitted by persist1 on October 12, 2000 - 23:36.

Actually, for IE the code would be easy as dirt:

for (...) {
document.all[i].style.fontSize...
}

At least, that'd be the starting point... from which you'd have to check for special cases.

I'm too tired to think about Netscape and then write about it, though. It's late, and I'm goin' to bed. 'Night, folks.

Submitted by kemie on January 31, 2001 - 10:46.

for windows there is a small app called browsersizer that lets you configure your browser window to preset sizes easily. sorry i don't have the information on who produces or distruibutes it right now...

BAM! bookmarklet to kick fonts up a notch

Submitted by r937 on September 22, 2001 - 15:04.

I happened to be doing a search for bookmarklets on google, and among the search results was this here article on evolt ("no way!" -- "way!!")

So I read through the comments and noticed aardvark's question about a bookmarklet to increase fonts. Having just seen and tried that exact bookmarklet not ten minutes ago, naturally it's still fresh in my mind ("but not for too much longer, eh!")

It was posted on MetaFilter by David Weingart. He says he has tried it on Mac/IE5 and I can report that it also works fine on Win/IE5. Note length is 287 and apparently there are some browsers that don't like bookmarklets longer than 255.

Try it now

why not CSS?

Submitted by yoyowiggity on August 10, 2002 - 15:05.

I know this is an old article, but I found it, so someone else will too, so I figured i'd comment. What's wrong with "em"? In your stylesheet, instead of using "px", define all of your font sizes in "em"s and then the user can resize their fonts on their own, if they wish, without any extra effort from you. just my 2 cents...

Great Minds

Submitted by urlborg on September 5, 2003 - 06:05.

Well, thinking alike as the author above I also use a somewhat different wallpaper to facilitate resizing (downsizing) browser windows to check rendering at various browser window sizes when testing pages. It is simply a black wallpaper with a progressive dark to light blue detented top and left side scale, with markings at the various common screen resulutions that is great on a large (21") monitor at 1600X1200 or somewhat lower resolutions.

You can view this approach here: Resolution Scale Wallpaper . Using the left and top scale markings allows you to quickly downsize your test browser window (smaller only) to various common lower sizes quickly regardless of the current higher resolution you are using, from the upper left corner, rather than at the center of the screen where it would seem to me to be of less functionality.

Naturally, it can also be used to quickly eyeball image scale in graphics apps as well, but is of limited and inferior value in this regard to the apps themselves. It can only be used in the 'tile' mode and can also be layered behind (framed around) any other favorite wallpaper image you prefer to burn into your display phosphors.... It's real value is it's unobtrusiveness...

Start of page header

Other Fine Evolt.org Sites

Navigation Starts

Article Categories

Highest rated articles

Submit

Recent comments

Main Page Content