Thursday, April 2, 2009

Designing Websites to Fit in the Browser

Title sounds easy right? Just check out W3Schools and you can see that about 95% of web users use 1024x768 or above. Soooo, lets crack open photoshop or flash and create a canvas 1024 by 768. Right?

That would be fine and dandy, however, you are forgetting about the browser. You are forgetting that most people have Navigation Toolbar, BookMark Toolbar, AddressBar, Tabs, ScrollBars, etc... You drop your lovely 1024x768 into a browser and suddenly you are clipping 100 pixels off the top and another 20 off the sides.

Solution? Some of the creative folks here at the basement (Brian and Amy) use a browser.psd template when they start designing a project.

It is just a png of the browser that they lays on top of their design. Many times they will have their design expand out beyond the browser's frame so they know what the site will look like when it scales... but they keep the frame here to turn on whenever they want to see the site at its minimal size. This way, when the site goes live, no one is surprised by the extra space taken up by the browser.

Hopefully you find this helpful.


INS said...

Why don't you just use a 1000x600 px canvas? It is much easier than turning on/off a browser layer.

Ickydime said...

I'll have to see if Brian or Amy want to field this one... but I think there are 2 benefits here.

1. You can design for when the browser is larger and your website gets "stretched". If your photoshop file is 1000x600, you won't be able to see what gets extended when the browser is re-sized.

2. I think this is a lesser note, but you get to see how the site looks in it's natural frame. ex: Putting the frame will help you realize if you need more breathing room around the borders, which is something that may not be apparent when the canvas just ends.

Great question though, I will forward this along and see if they can shine some more light on the subject.

Brian Phillips said...

Mark, You are right. I like to layout the file with a large monitor in mind. It's especially helpful if you are laying out site that are environments vs contained site. Like a heart-shaped car wash floating in the sky.

And yes, seeing it within the context of the browser helps clients understand the design without their own interpretation. Especially if you doing non-conventional justification like anchoring the site in the lower right.

Ickydime said...

"heart-shaped car wash floating in the sky"

just pulled that idea out of thin air? ;)