Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Small Screen - Width guides for web page designs Pick of the Week
Artis Small Screen The macosxhints Rating:
9 of 10
[Score: 9 out of 10]
Late again, I know. No good excuses this time, just been busy with a lot of stuff. Some of that stuff involves designing the next major upgrade to macosxhints, which means I've been spending a lot of time looking at various layouts, trying to make sure they work for as many viewers as possible. One of my goals is to make sure that macosxhints will fit in an 800 pixel wide browser window, which is about as narrow as it can possibly get. To test the design's look at this small size, I've been using ARTIS Software's Small Screen program, which is part of their Screen Tools package.

Small Screen creates a thin black border that 'floats' over all other windows. You choose the size you'd like to see -- 800x600, 1024x768, 1280x1024, or a custom size, and the outlines then appear on the screen. You can then resize various browser windows to fit the outlines, giving you an instant look at your site on a smaller screen. A simple tool, and it does its job well.

My only wish is for some sort of 'global shortcut' for switching screen sizes. As it works now, if you want to switch between the various window sizes, you first have to switch to Small Screen, then invoke a hotkey for the desired size, and then switch back to the browser window. I'm not sure exactly how it would work, but I'd love to be able to make a global hotkey for it that would work in any app, so I can save the first switch.

For your $9.95, you actually get the full Screen Tools package, which also includes a screen ruler, a "loupe" to magnify a portion of the screen and capture the pixel color to the clipboard, and (very useful) screen guides, which allow you to add alignment guides to programs that don't support them natively. Quite a bargain, and you can try all four of them before you decide to fork over your $9.95.
    •    
  • Currently 1.88 / 5
  You rated: 5 / 5 (8 votes cast)
 
[14,329 views]  

Small Screen - Width guides for web page designs | 19 comments | Create New Account
Click here to return to the 'Small Screen - Width guides for web page designs' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Small Screen - Width guides for web page designs
Authored by: leenoble_uk on Sep 24, '04 11:27:36AM

With all the chrome found on certain browsers and OSs it's fairly commonplace to set the maximum size of an unstretched page to 740pixels.
I've used SSX in the past but nowadays I just set up my graphics document to 740px and make sure I build in somewhere that the page can stretch for larger windows. Set it out at 800 and you have clients complaining that they have to scroll horizontally.

---
So, I said ... well, I can't actually remember exactly what I said. But it was one of the most enormously cruel and frighteningly witty put downs ever.



[ Reply to This | # ]
xScope
Authored by: ChiefTypist on Sep 24, '04 11:34:48AM
While SmallScreen is a great application, it's been superseded by xScope. In fact, our collaboration with ARTIS began because we were a big fan of this application (full disclosure: I'm Craig Hockenberry and a developer at the Iconfactory.)

xScope Home Page

xScope addresses some of the issues that Rob has in his review (hot keys, simpler window resizing, for example.) It also introduces a lot of new features (like menubar icons for enabling/disabling the tools.) The major focus of our redesign was to increase usability.

We've also combined several of the ARTIS tools into one application -- I find that the Loupe also comes in very handy when doing web design. It allows you to pick out colors in HTML format and to look for pixel alignment problems (particularly useful with IE/Win.)

So, if you like SmallScreen, we think you'll like xScope even more. We do :-)

-ch

[ Reply to This | # ]
Small Screen - Width guides for web page designs
Authored by: comodin on Sep 24, '04 11:53:10AM
i use bookmarks in the browser bookmarks-toolbar to do the same,
switching the size of the browserwindow.

the bookmark for 800x600px looks like this:

javascript:self.moveTo(0,0);self.resizeTo(800,600);
and the bookmark for 800x endless:

javascript:self.moveTo(0,0);self.resizeTo(800,screen.availHeight);
i have bookmarks for all resolutions i need, ...
and it is working on all browsers i check sites for free :)

greeting from berlin/ger -- andreas

[ Reply to This | # ]
Small Screen - Width guides for web page designs
Authored by: comodin on Sep 24, '04 12:03:44PM
btw .. u can place a link at ur develop-page too:

800x600
800x*
1024x768
1024x*

try clicking the URLs below and u will see how it works with ur site :)

[ Reply to This | # ]
Small Screen - Width guides for web page designs
Authored by: rkleim on Sep 27, '04 05:11:06PM

Or try this format for a browser link - just create a bookmark and alter the address to the following:
javascript:function%20rsz(s,i,w,h,m)%7Bif(i.screenX0%7C%7Ci.outerWidth%3Ew%7C%7Ci.outerHeight%3Eh)%7Bs.moveTo(0,0);s.resizeTo(w,h)%7D;if(m)%7Bs.moveTo(m==1?0:screen.availWidth-w,0);%7D;s.resizeTo(w,h);%7D;rsz(self,window,800,600,1);



[ Reply to This | # ]
Small Screen - Width guides for web page designs
Authored by: CkB_Cowboy on Sep 24, '04 02:18:57PM
I have a pretty comprehensive browser resizing bookmarklet generator on my site:

http://cowboyscripts.org/?page=bookmarklets

- Cowboy

---
My ill-matic homepage:
http://rj3.net/cowboy/

[ Reply to This | # ]

Hotkeys
Authored by: Echidna on Sep 24, '04 04:19:02PM

You wanted hotkeys? Use this bookmarklet generator, and put it in your bookmarks bar. Then you can use command-1 or whatever to resize your window. Of course it's not global, but it'll work in Safari and some other browsers, too.



[ Reply to This | # ]
JavaScript to change browser window size
Authored by: alys on Sep 25, '04 04:03:10AM

That's really cool!

To use size-adjusting bookmarks or JavaScript links, remember that your browser has to be configured to allow JavaScript to change the browser window size - this is something that many browsers allow you to turn off. You'll need to turn it on again - this is something that took me a couple of minutes to remember. :)



[ Reply to This | # ]
Web Developer Extension for Firefox
Authored by: ghoppe on Sep 24, '04 02:44:27PM
If you're testing with Firefox, install the Web Developer extension. There's a menu item on the toolbar which resizes the window to 800x600 or whatever custom size you want for testing. It's chock full of other goodies too, like editing stylesheets on the fly, displaying image information, table cells, html validation, cookie info, etc.

[ Reply to This | # ]
SmallScreenX is good too.
Authored by: adrinux on Sep 24, '04 10:03:06PM

I use smallscreenX, it's free though by the sounds of it not as full featured as some of the other offerings. It does the floating window sizer thing well though:
http://lorenb.com/software/smallscreenx/



[ Reply to This | # ]
Low-Tech Alternative: Desktop Pictures
Authored by: Ray_Toler on Sep 26, '04 01:44:56AM

I'm sure the products mentioned in the comments as well as the pick of the week are fine and work well, but they seem to be complex solutions to a pretty simple problem.

For years, I've been using a desktop picture I created with the various standard browser sizes drawn in nested squares. Back in the dark ages before decent machine-written code, I even had some HTML cheat-sheet text on there as well.

Kind of a low-tech solution, but it's worked for me for a long time - I was fortunate to have a big monitor before they became plentiful and cheap, and actually seeing the size of the other screens on my desktop really helped. (Which is, of course, the whole point of apps like this pick of the week.)

I also never have to worry about it breaking with the next OS update. ;)

I do like those javascript resizes, though... I'll have to add them to my bookmarks.



[ Reply to This | # ]
Why 800?
Authored by: pxlated on Sep 26, '04 11:20:15AM

I use both xScope and the Javascript resizing methods...both work well.
Out of curiosity, why the 800 screen width? For my site, that size is going the way of the dinosaur and represents only 3% of current visitors and falling. Redesigning for 800 sounds like a lot of work for very little gain. Redesigning so it can work at any size (including mobile devices) makes sense though.



[ Reply to This | # ]
Why 800?
Authored by: jweill on Sep 26, '04 04:05:32PM

Some users don't maximize their web browsers. I like to have other windows visible too, so I usually have Safari set to 800x600 or so. I appreciate it when sites scale appropriately.



[ Reply to This | # ]
Why 800?
Authored by: pxlated on Sep 26, '04 05:59:13PM

I do the same so my site is usable at 800 but a little tight. I find most of my Windows using friends rarely surf like us, it's full viewport all the time.But, of course you're focused on us multitasking Mac users. :-)



[ Reply to This | # ]
Why 800?
Authored by: timcrawf on Sep 27, '04 09:24:12AM

Do your logs tell you what size the browser window is set at? My screen is set at 1152 x 870 but my browser window is only 700 x 590
Why so small? As others would tell you, I like multiple widows, even with tabs I might have 3 to 10 windows open. Also it makes many sights easier to read. At this resolution the main hints column on macosxhints.com is just the right size so that my eyes do not have to move to read a line of text, this is why newspapers have narrow columns. It also blocks many ads on the right side. (it used to work perfectly for MacCentral until their last reformat)



[ Reply to This | # ]
Why 800?
Authored by: RTMac on Sep 27, '04 01:46:50PM

3% ?!! What stats are you looking at? The stats for my sites are closer to 35%.

Here's a more useful resource:

http://www.thecounter.com/stats/2004/August/res.php



[ Reply to This | # ]
upsdell.com stats
Authored by: machard on Sep 27, '04 04:39:34PM

Although the stats show that most users are on or above the 1024 mark, I still design for the lowest (reasonable) common denominator. At this stage in the game that's 800x600 with 34% of the market. I say reasonable because I'm not going to waste my time designing for 1% of the market share at 640x480. I thought those folks had gone the way of the dinosaur...

http://www.upsdell.com/BrowserNews/stat_trends.htm#res



[ Reply to This | # ]
Small Screen - Width guides for web page designs
Authored by: bezel on Sep 27, '04 01:42:42PM
Personally, I like the iRulez widget from Goneau
Simple and resizeable.

[ Reply to This | # ]
Small Screen - Width guides for web page designs
Authored by: osxpounder on Sep 27, '04 02:56:38PM
http://www.sticksoftware.com/software/Constrictor.html

Why not just use Contrictor, if the main feature you want is a border to use as a guide? Constrictor floats a translucent frame over your screen, with an optional resolution counter in the bottom corner to tell you the size of the frame [Always leave that option enabled].

There are features for power users, including the power to add standard sizes to its menu, and even to assign a shortcut key to a certain size.

And those are just extras; Constrictor is a screen-snapping application. It sounds perfect for what you folks are describing, plus it does screen snaps, to look at it another way. Unless you're making screenshot movies, you probably don't need anything that Constrictor can't do in those areas. For $10, you get the frames AND the screen shot maker in one.

I'm a fan; can you tell?

To set up those power user features, see this:

Constrictor Manual

In short, for those who already have Constrictor: You can type this at the command line to add some preset sizes and shortcut keys that I like. Restart Constrictor. The manual page gives detals on how to make your own.

I set it up so that CMD-OPT-1 puts a 640x480 frame in the top right corder, and CMD-OPT-2 does the same for an 800x600 frame, CMD-OPT-3 for a 1024x768 frame, and CMD-OPT-4 for a 1680x1050 frame.

defaults write com.stick.app.Constrictor StandardSizes "32 x 32|64 x 64|128 x 128|256 x 256|320 x 240|400 x 300|640 x 480|800 x 600|1024 x 768|1280 x 1024|1680 x 1050|1280 x 960|0, 570, 640, 480.~1|0, 450, 800, 600.~2|0, 282, 1024, 768.~3|0, 0, 1680, 1050.~4"



---
--
osxpounder

[ Reply to This | # ]