Determing a page size to fit browser window

Freeway
1

Ok, I have a site I want to build however I understand optimum size etc is 800x600…

Bascially I want to place an image ‘background image’ that will fit the browser window once scrolled both width and length in ALL browser if possible?

The graphic I have is currently 1400x1000, however when viewed in browser it get white bands either side of the image
and is even more visable if I stretch the window to fit the entire screen!

Im working on 20" Mac, I know ‘many’ people may not have this size screen, but my client doen’t care!

On the other hand I do, and want this to be optimised for ALL user/browsers etc, and obviously for future reference!

The differcuilt element is that the image is not seemless, I.E the horizon makes it so that I can not tile the background horizontally! Otherwise you get the image repeated next to it, looks awful.

I’ve tried using a 20x1000 ‘background image’ set to tile both H and V : Works fine, but only if the image is a patten/gradient that when next to itseld looks seemless, but I want to have a image that fill’s the page.

Any ideas? Is this possible, suggested dimensions?

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Is this the sort of thing?

http://windowuk.myzen.co.uk/services.html

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 15 Feb 2008, at 11:09, Mr worm wrote:

Ok, I have a site I want to build however I understand optimum size etc is 800x600…

Bascially I want to place an image ‘background image’ that will fit the browser window once scrolled both width and length in ALL browser if possible?

The graphic I have is currently 1400x1000, however when viewed in browser it get white bands either side of the image
and is even more visable if I stretch the window to fit the entire screen!

Im working on 20" Mac, I know ‘many’ people may not have this size screen, but my client doen’t care!

On the other hand I do, and want this to be optimised for ALL user/browsers etc, and obviously for future reference!

The differcuilt element is that the image is not seemless, I.E the horizon makes it so that I can not tile the background horizontally! Otherwise you get the image repeated next to it, looks awful.

I’ve tried using a 20x1000 ‘background image’ set to tile both H and V : Works fine, but only if the image is a patten/gradient that when next to itseld looks seemless, but I want to have a image that fill’s the page.

Any ideas? Is this possible, suggested dimensions?

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Yes, with regards to the image and what I’m trying to achieve, but yours is obviously left aligned and set to tile, as at the right side of your page you can see the start o fthe image where it is being repeated ‘tiled’.

What size is your image Nathan?

I’m not sure if this is possible having thought about it and exhaused all my options!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I am going to resize my image to 1440pxl which should then be large enough so that the repeat wont be seen.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

On 15 Feb 2008, at 11:42, Mr worm wrote:

Yes, with regards to the image and what I’m trying to achieve, but yours is obviously left aligned and set to tile, as at the right side of your page you can see the start o fthe image where it is being repeated ‘tiled’.

What size is your image Nathan?

I’m not sure if this is possible having thought about it and exhaused all my options!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

OK I have an idea, clever it may be but you could also call it cheating, but may only be possible in certain circumstancesor at least mine!

Use your main image and place as gaphic on page or ‘cell background image’ align centre top etc on the page and lock item. Note, this graphics background must be faded out towards either side (with gradient tool/overlay etc in photoshop) to allow it to blen in with the overall image/background if alt all possible! You’ll see why in the next step…

use a 20x1000 graphic file as your ‘bg image’ set to tile both H and Z. Note this graphic MUST, I repeat must match your main image with regards to horizontal layout/colouring/markings etc.

So that once viewed your image then sits centred, with the background ‘matching’ which, tiles thus giving a seemless look and that if felxible once the browser window is scrolled!

This may take some tweeking, but its the closest I can get at the mo!

Why do I always try to do differcuilt things!!!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

On 15 Feb. 2008, 10:51 am, BigG wrote:

I am going to resize my image to 1440pxl which should then be large
enough so that the repeat wont be seen.

What are the standard page dimensions, safe areas for screens? Do you know…?

Or is 1440 a guess? trial and error…

cheers

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

There are no standards here, only averages – and those averages
depend on YOUR audience. Write a blog for graphic designers, and you
will have a fair number of people with 30" Cinema displays viewing
your page in a salad of different Mac browsers. (But almost none of
them using their browser in full-screen mode.) Write an intranet for
a pharmaceutical company, and nearly all of them will be using the
very same version of Windows IE, on identical 17" displays at 1024 x
768 and always in full-screen mode. (Because that’s the way the IT
department likes it, and they re-install their entire system every
two weeks to try to keep the spyware at bay.)

Here’s the thing. You don’t get much control in the Web design
business. Freeway goes a very long way to making Web pages that
behave the same way in every browser, but off in the edges of things,
there are differences and compromises. The best approach that I have
found is to design for graceful degradation. And design for what your
visitors will be doing. If you are presenting a long essay that you
expect someone to actually read, then make the line lengths a
reasonable 7 - 11 words per line, make the text a comfortable reading
size, and ensure plenty of contrast and little distraction. Dim the
edges, resist the urge to add flashy blinky things everywhere, etc.

As far as screen size goes, a great tool for this is Google
Analytics. It measures the screen dimensions of your visitors and
presents you with nice colorful pie charts to help you decide what
dimension to target. But even it doesn’t tell the entire story. As
screens get larger, not everyone allows their browser to be full-
screen any more. So while you can get the outer width of the screen
in this way, the more useful metric is the actual browser window
dimensions.

My advice is to err on the side of readability. Make your target
screen fairly small, then use optical illusions to occupy the rest of
the space. Center your page. Use the “page on a page” effect with
shadows and contrasting colors to “lift” your content area above the
background. Search the web archive of this list for tons of tutorials
about how to accomplish this.

Walter

On Feb 15, 2008, at 7:01 AM, Mr worm wrote:

What are the standard page dimensions, safe areas for screens? Do
you know…?

Or is 1440 a guess? trial and error…

cheers

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

With my target audience - google analytics reports: (54 different resolutions)

The main ones are:

1024x768 = 46%
1280x800 = 21%
1280x1024 = 14%
1440x900 = 5%
800x600 = 3%

This was pretty much the same on 3 of my sites covering - ‘Womens only bootcamp’, ‘Defence and Aerospace’, and ‘Life Coaching’.

Nathan Garner
Partner

Austin Wells Design Consultants
1 Elmgate Drive, Littledown, Bournemouth BH7 7EF
+44 (0)1202 301271
email@hidden
http://www.awdc-creative.com

Member of NAPP

9

Viola!

http://www.chriswalmsley.co.uk/clients/zyzag/home2.html

let me know what you think?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Scroll away!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Looks fine on widescreen (I’m on 1680x1050px) but…

Do you want the site to side scroll for those that don’t have a widescreen?
Do you want users the have to fiddle opening up the browser window to see the whole page?

On 15 Feb 2008, at 14:58, Mr worm wrote:

Viola!

http://www.chriswalmsley.co.uk/clients/zyzag/home2.html

let me know what you think?

David Owen
Freeway Friendly Web hosting and Domains ::

http://www.printlineadvertising.co.uk/freeway
http://www.ineedwebhosting.co.uk

12

Looks impressive!

The principle seems fine, but - being an old pedantic - you can still
see the join on my iMac. Just needs the graduated blend adjusted
slightly and/or the background slightly lighter. No problem on my PC -
the screen’s not wide enough to see the seams!

Well done.

Colin

On 15 Feb 2008, at 14:58, Mr worm wrote:

Viola!

http://www.chriswalmsley.co.uk/clients/zyzag/home2.html

let me know what you think?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

I know, still needs a little more tweaking here and there, but it emphaise’s what I wanted to achieve.

Im still toying with the layout, but I’m just a perfectionist and like things to look good, without the background ‘scrolling’ the whole effect is lost, so it was worth the fiddling!

Now I know what I wanted to acheive is possible I can scale + or - accordingly!

BTW if you every need any illustrations, drop me a line outside the forum!

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Very nice…the “books” button isn’t aligned on your menu (viewing with firefox on PC)

Bill

Bill McCarroll
Poway, California
http://williammacdesign.com

On Friday, February 15, 2008, at 06:58AM, “Mr worm” email@hidden wrote:

Viola!

http://www.chriswalmsley.co.uk/clients/zyzag/home2.html

let me know what you think?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Really great graphics, Worm, but why would you use a .png file at 1MB, where the same image “Saved For Web” in Photoshop, as a .jpg at a quality level of 50, would result in an image file of only 162k. Perhaps slightly larger depending on your quality setting, but I can’t see any difference at 50.

Loren

Viola!

www.chriswalmsley.co.uk/clients/zyzag/home2.html

let me know what you think?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

I hate to put a damper on this because your image is great but at 800 x 600 I have to scroll right to see all the navigation buttons.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

On 15 Feb 2008, at 20:33, lfedje wrote:

Viola!

www.chriswalmsley.co.uk/clients/zyzag/home2.html

let me know what you think?

Couldn’t see the chap with the viola but did notice that the Books
button seems to be down about 1 pixel below the line of the others.
In Firefox. Also, as Dave pointed out, it is quite wide so I can
imagine many will find the right hand buttons are off screen
initially. Nice Manga stylings though.
Cheers
Pete

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options