Page Dimensions

Freeway
1

Hi,

Can someone please let me what the best dimensions are ta cater for different screen resolutions such as 1024x768 as well as 800x600 type resolutions.

I have been using w:700px and h:700px - but it seems that on a laptop with the above resolutions, my website doesn’t look right.

FYI, the page is centred.

Further to this, what should it be for the whole website to take up the whole screen so it looks right in different resolutions?

Thanks.
T.

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

2

You can try what I’ve done - make friends with people who have crappy computers, then use them as an excuse to get out of your flat, have some drinks, play some cards, and check your latest web creation. :slight_smile:

My favorite fixed width is 778px. Height should be determined by the content imo, remembering to place the most important bits at the top. Too much focus on presentation and not communication is the bane of web design.

On Sat, May 17, 2008 at 4:20 AM, Tonsils wrote:

Can someone please let me what the best dimensions are ta cater for different screen resolutions such as 1024x768 as well as 800x600 type resolutions.

I have been using w:700px and h:700px - but it seems that on a laptop with the above resolutions, my website doesn’t look right.

FYI, the page is centred.

Further to this, what should it be for the whole website to take up the whole screen so it looks right in different resolutions?

–
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

3

Sometime around 17/5/08 (at 10:03 -0700) Ernie Simpson said:

My favorite fixed width is 778px. Height should be determined by the
content imo, remembering to place the most important bits at the top.

Absolutely.

Tonsils, a good phrase to remember is “above the fold”, meaning the
stuff that’s seen on the typical display without scrolling. As much
as possible, you should design to keep important and/or compelling
stuff above the fold.

This space can be depressingly small, particularly on Windows PCs
with smaller screens and many toolbars taking up vertical space…
but it isn’t as bad now as it used to be when 800x600 was the most
common display resolution size.

The ‘above the fold’ concept originates in the newspaper industry, I
believe. There, it refers to the part that’s visible on a front page
even before it is unfolded to reveal the lower portion. Different
media, same underlying concern.

Too much focus on presentation and not communication is the bane of
web design.

Words to go to sleep and wake up by! A good designer is a good communicator.

k

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

4

Hi,

With having a fixed width of 778px and having my website centered, all looks fine now of a screen resolution of 1024x768 but viewing this site on my MBP with screen resolution 1900x1200, the website now looks quite thin with a lot of whitespace on each side - not too nice at all.

Now to cater for most resolutions and having a fixed width of 778px, is there anyway I can actually set this to actually be width of 100% in order for it to cater for varied resolutions, such as my examples of the two resolutions above?

Do I need to remove the fixed width and somewhere else, specify width:100% ?

Thanks.
Tony.

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

5

Ask your self the question - if your website is 1900 pixels wide, how readable is it. The mechanics of reading - the muscle movements you go through to process a line (eye movements, head movements etc) will increase, and the site can start to become physically tiring to read. Reading from a screen is harder work than from paper anyway.

Then ask yourself - why has the BBC, Amazon, Adobe, Apple, NY Times, CNN and many, may others opted for a fixed width site?

It’s certainly the case that in the stone age, people just made their browser windows fit the width of their screen - but that was when screens were typically 640x480 or 800x600. Today, such practices are not necessary, and people are starting to see that a very wide browser window, where paragraphs can occupy less than a line of text is a very, very silly idea.

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

6

On 20 May 2008, at 09:19, Paul wrote:

Today, such practices are not necessary, and people are starting to
see that a very wide browser window, where paragraphs can occupy
less than a line of text is a very, very silly idea.

This is true, but my experience of PC (Windows) users and their
browsing habits is that Internet Explorer seems to default to full
screen - no matter the size of the screen. My guess is that large
numbers of users never change the window size at all.

I’ve had clients complain to me about the “wasted white space” on the
right of the browser! I noticed this in the comments on the BBC’s new
design as well.

Heather

“Freeway - Web Design for All”

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

7

Really appreciate the comments but would also appreciate some help with my question with regards to actually having a page width of 100% and if possible, how can I go about making this so within FW Pro 5 ?

Thanks.
Tony.

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

8

Sometime around 20/5/08 (at 06:15 -0400) Tonsils said:

appreciate some help with my question with regards to actually
having a page width of 100%

Set the page alignment to ‘none’, then play around with the
dimensions controls for HTML objects. Try setting things to be
‘pinned’ to the left and right edges, just the right, or try setting
widths to percentages.

This should do the trick! :slight_smile:

k

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

9

On 20 May 2008, at 11:15, Tonsils wrote:

Really appreciate the comments but would also appreciate some help
with my question with regards to actually having a page width of
100% and if possible, how can I go about making this so within FW
Pro 5 ?

Sorry! We tend to get a bit carried away!

In Freeway 5, ensure your page alignment is set to None. It is this
by default, normally.

Now you can place elements on the page, and using the Inspector you
can set their widths to a percentage of the page width. You can also
set the top/bottom/left/right inset to keep items at set distances
from the edges of the window.

That’s how it’s done in brief - have a play and see what you think.
Come back with any more questions.

=o)

Heather

“Freeway - Web Design for All”

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

10

On 20 May 2008, at 11:25, Heather Kavanagh wrote:

using the Inspector you
can set their widths to a percentage of the page width

I should have explained that better. (My excuse is I’m busy on other
projects, and I’m firing answers off without thinking too much!)

To set a percentage width, enter a number, say 89, followed by %.
Freeway will remember you’re using percentages until you change it
back to px or whatever.

As you drag the edges of the item set like that, you’ll see the
Inspector updates accordingly.

Hope that helps.

rushes off again

Heather

“Freeway - Web Design for All”

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

11

Hi,

Having problems unfortunately - definitely something I’m doing wrong.

Now, I currently have my main page set to w:778px and H:900px and alignment of: Center.

When I attempt to change the alignment to None and then try and change the width from 778px to say 100% or even the height attribute to a percent value, I get an error saying “Invalid value; previous value substituted”

Pls help.

Thanks.
Tony.

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

12

On 20 May 2008, at 13:18, Tonsils wrote:

When I attempt to change the alignment to None and then try and
change the width from 778px to say 100% or even the height
attribute to a percent value, I get an error saying “Invalid value;
previous value substituted”

Don’t try to change the width of the page itself. Freeway handles
that for you. Leave it at 778px or whatever.

The elements on the page itself can have percentage dimensions.

Try that and report back.

=o)

Heather

“Freeway - Web Design for All”

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

13

You don’t need to change the page width to 100% – that’s implied by
the lack of alignment. Leave it to a standard width, so all of your
pages have a basic lowest possible width. Then use percentage widths
and relative alignment to do the rest of the trick. Your page will
scale to fit the window. It just won’t scale any smaller than
whatever width you designed it at.

Walter

On May 20, 2008, at 8:18 AM, Tonsils wrote:

When I attempt to change the alignment to None and then try and
change the width from 778px to say 100% or even the height
attribute to a percent value, I get an error saying “Invalid value;
previous value substituted”

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

14

Sometime around 20/5/08 (at 08:18 -0400) Tonsils said:

Now, I currently have my main page set to w:778px and H:900px and
alignment of: Center.

When I attempt to change the alignment to None and then try and
change the width from 778px to say 100% or even the height attribute
to a percent value

Don’t bother trying to set the page dimensions to 100%. When the
page alignment is set to anything other than ‘none’, it pays
attention to a specific width. Otherwise, the width there is really
more of a design aid while you’re making your layouts. Consider that
the minimum width of your design, but something that can flex wider
to fill larger browser windows.

You cannot have a page set to an alignment of anything other than
None and also have items within the page flex. They do their resizing
according to a resizing page width, but if you want the page to have
an alignment it has to have a fixed width in order to be able to
align.

Basically, make your Freeway page width as narrow as you’re
comfortable with, make sure the alignment is set to None, and play
with the dimensions settings for your various onbjects on the page.

k

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

15

OK, so I leave the page width and height as is and now have the alignment as none.

Now Walter, unsure what you mean when you say “Then use percentage widths and relative alignment to do the rest of the trick.” - How/where?

Can you pls explain in detail (if possible) how I do this and how I can possibly get my website centered and also to span nicely on different screen resolutions.

Thanks.
Tony.

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

16

On May 20, 2008, at 8:46 AM, Tonsils wrote:

Can you pls explain in detail (if possible) how I do this and how I
can possibly get my website centered and also to span nicely on
different screen resolutions.

Draw an HTML element on the page. With that element selected, look
carefully at the Inspector while the left-most tab is active.

Each of the width and inset (distance from the page edge) input
fields has a combination button/caption graphic to its left. Clicking
on this graphic will enable or disable the associated field. What you
want to do to center the page is to draw all of your elements as
regular HTML boxes (with the CSS Layers button on) and then change
these settings so that your elements flex to fill the browser window.

Let’s say you wanted to have a 10% width column on one side of the
page. Draw a box right on the right side of the page. Fill it with
some color, and then look in the Inspector at the various dimension
settings. First, make the width 10%. Highlight what’s there, and type
in 10%. Now, click on the Left inset button so that field is
disabled. The Right inset field will automatically become active. If
you want that element to stick to the right, then make sure that it
reads 0px. Preview, and you will see what you want to see.

Now, if you want a centered box, draw a colored HTML box (just so you
can see it) un-check the width so both left and right inset become
active, then change left and right inset to some percentage. Try 10%
again, and you will have an 80% width central column that always
follows the width of the browser window.

If you want to build up a more complex layout that stays together and
flexes with the page, then draw a central box to hold your layout,
and draw all of your other layout elements as children of that
central box. To do this, first click on the central box so it is
highlighted (8 handles showing on corners and sides), then select the
HTML tool and draw your child box, starting and ending entirely over
the parent box. This child element can then be positioned relative to
the right or left of the parent box using the same technique as
above. You can also make children of children if that’s what it takes
to scratch your creative itch.

You can probably get the same effect without this trick, but I find
it most helpful in order to get the look of a centered page that has
a consistent relative dimension.

Walter

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

17

Thanks Keith, Heather and you Walter for your detailed explanation - it really helped me alot to understand how it all fits together.

Right now, I am playing around with setting all my HTML item dimensions where possible and it’s a bit trick, but getting there. I find some items are shooting completely off the page and when I even grab and drag and then preview, the items are not actually showing where I thought they would be.

Anyways, thanks again all for your help.

see ya,
Tony.

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

18

Making a faux page to a colour and alternately colouring the actual page
background will probably be less likely to be seen as ‘wasted’ space.
Especially in a centre aligned page that makes margins either side on larger
screens.

all the best
Brian

Heather Kavanagh said recently:

On 20 May 2008, at 09:19, Paul wrote:

Today, such practices are not necessary, and people are starting to
see that a very wide browser window, where paragraphs can occupy
less than a line of text is a very, very silly idea.

This is true, but my experience of PC (Windows) users and their
browsing habits is that Internet Explorer seems to default to full
screen - no matter the size of the screen. My guess is that large
numbers of users never change the window size at all.

I’ve had clients complain to me about the “wasted white space” on the
right of the browser! I noticed this in the comments on the BBC’s new
design as well.

Heather

http://www.softpress.com

“Freeway - Web Design for All”

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

19

This is all interesting to me as someone creeping toward not using Freeway’s
mostly brainless table layout feature.
How would I effect the ‘appearance’ of a centre aligned layout using CSS
positioning like below?

regards
Brian

Keith Martin said recently:

Sometime around 20/5/08 (at 08:18 -0400) Tonsils said:

Now, I currently have my main page set to w:778px and H:900px and
alignment of: Center.

When I attempt to change the alignment to None and then try and
change the width from 778px to say 100% or even the height attribute
to a percent value

Don’t bother trying to set the page dimensions to 100%. When the
page alignment is set to anything other than ‘none’, it pays
attention to a specific width. Otherwise, the width there is really
more of a design aid while you’re making your layouts. Consider that
the minimum width of your design, but something that can flex wider
to fill larger browser windows.

You cannot have a page set to an alignment of anything other than
None and also have items within the page flex. They do their resizing
according to a resizing page width, but if you want the page to have
an alignment it has to have a fixed width in order to be able to
align.

Basically, make your Freeway page width as narrow as you’re
comfortable with, make sure the alignment is set to None, and play
with the dimensions settings for your various onbjects on the page.

k

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

20

Thanks Walter
Your answer preceded my question.

If I was SP1 I’d pay you handsomely to create learning resources!

all the very best
Brian

Brian Steere said recently:

This is all interesting to me as someone creeping toward not using Freeway’s
mostly brainless table layout feature.
How would I effect the ‘appearance’ of a centre aligned layout using CSS
positioning like below?

regards
Brian

Keith Martin said recently:

Sometime around 20/5/08 (at 08:18 -0400) Tonsils said:

Now, I currently have my main page set to w:778px and H:900px and
alignment of: Center.

When I attempt to change the alignment to None and then try and
change the width from 778px to say 100% or even the height attribute
to a percent value

Don’t bother trying to set the page dimensions to 100%. When the
page alignment is set to anything other than ‘none’, it pays
attention to a specific width. Otherwise, the width there is really
more of a design aid while you’re making your layouts. Consider that
the minimum width of your design, but something that can flex wider
to fill larger browser windows.

You cannot have a page set to an alignment of anything other than
None and also have items within the page flex. They do their resizing
according to a resizing page width, but if you want the page to have
an alignment it has to have a fixed width in order to be able to
align.

Basically, make your Freeway page width as narrow as you’re
comfortable with, make sure the alignment is set to None, and play
with the dimensions settings for your various onbjects on the page.

k

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

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