Best pixel dimensions for portfolio site?

June 25, 2006 8:33 AM

Suggested max width/height variables for portfolio site? ... And, should I use a sniffer to branch people off? Also, if you've got any links to art sites that have solved this problem gracefully, I'd appreciate them.

I'm building a portfolio site for a painter and am trying to decide what the best width/height dimensions will be to suit the most visitors. The artist paints large abstracts so the bigger the better, but what's the fine line between big and too big?

Also, should I just default to a given size or should I ask people resolution on the front page or should I sniff the resolution and branch people to different sizes. If different sizes is best, what should those sizes be?

Is there an online resource that'll tell me percentage of people surfing at X resolution?

Also, if you've got any links to art sites that have solved this problem gracefully, I'd appreciate them.

posted by dobbs to computers & internet (11 comments total)

Make thumbnails of the paintings and and use popup windows with larger images when the user clicks on the thumbnails. A portfolio website with huge images that makes me wait for loading is 100 times more annoying than popup windows.
posted by junesix at 8:46 AM on June 25, 2006

Stats here. 1024x768 will be fine for ~80% of users.
posted by beerbajay at 8:47 AM on June 25, 2006

Also: it's not worth the effort of sniffing sizes or branching people based upon their screen size. Just provide multiple image sizes to everyone and let them choose what they want. I would personally be annoyed if I was running a low-resolution screen but was then prevented from viewing larger images because some webdesigner decided that they were 'too big.'
posted by beerbajay at 8:51 AM on June 25, 2006

Also you could set the thumbnails (or images?) to percentages of browser width, and thereby avoid forcing horizontal sroll.
posted by librarina at 9:03 AM on June 25, 2006

How about starting with a medium sized image by default, with obvious links to "larger pictures" and "smaller pictures," which would set a persistent cookie and cause any subsequent pageviews to use the selected picture size?
posted by odinsdream at 9:18 AM on June 25, 2006

You might consider a resolution-dependent layout (demo).

Lightbox is a nice DHTML alternative to opening full-size images in a popup window.
posted by kirkaracha at 9:24 AM on June 25, 2006

Thanks for the answers thus far. I was hoping to have a display area for the images of 700 x 700 so it looks like that'll be fine for most viewers. I'm going to use Slide Show Pro as it's nice and has a simple "cms" for the client to be able to adjust stuff easily.

kirkaracha, thanks for the link to Lightbox. Hadn't seen that before.

junesix, the site currently has (I'm redesigning it) popups and everyone complains so I'm avoiding them in this design.
posted by dobbs at 10:25 AM on June 25, 2006

I see you've marked 1024x768 as a "best answer".

I would like to be clear about 2 things:

1) Screen resolution and browser resolution are not the same thing. I run at 1024x768 on all of my computers, but I multitask a lot so my browser does not use my whole screen.

2) 80% is not really that huge of a majority when it comes to "developing for the mass market". 80% means that your site will be designed such that 1 of every 5 people who views it doesn't see it as you intended, and must scroll horizontally.

I'd really strongly suggest you make sure the site looks ok at 800x600.
posted by twiggy at 2:40 PM on June 25, 2006

Stats from ANY website other than yours must be taken with a grain of salt. Every website is going to have a different percentage of users who use a particular screen size (ie Tech sites generally have users with more screenspace than a site about Cooking). And on top of that, just because their screen "supports" 1600x1200 doesn't mean their browser will be at that width.

Your best bet is either:
A) Build for 780x600 (Microsoft IE's scrollbar is 20px wide)
B) Build a fluid layout that will fit about any resolution

But again, I STRONGLY advise against looking at some generic stats poll from other sites when making your decision on what size to build for.
posted by JPigford at 3:58 PM on June 25, 2006

I'd have to agree with what twiggy said:
Display resolution is not browsing resolution.

For example, my preferred browser window size is around 957x631, which gives me a viewport size of 949x463.
But even if I maximize(which I never do) the browser window is 1032x723 with a viewport of only 1025x555 so on a 700x700 image even without the attendant html, I'm going to be scrolling.

On a regular firefox on XP setup, with one row of tabs, and a row of bookmarks and the taskbar(one row) on top, the max viewport seems to be 1024x580.
posted by madajb at 4:00 PM on June 25, 2006

Livebooks is very well-regarded among pro photographers, artists, designers, etc. If you can mimic their look, you'll probably have a winner.
posted by LuckySeven~ at 8:24 PM on June 25, 2006