Ideal webpage size on Dreamweaver

pauro 76

Just wondering what the ideal size is for designing pages on Dreamweaver? This is what it looks like on a 12inch MacBook, but what's the ideal size so that it will good on different size screens? Also how do you ensure that when you open the website, that it doesnt scroll to the right? Sorry if this doesn't make much sense.

yupyup7up

the company I work for designs them so that they fit without resizing for 1024X768. This is the standard resolution for a laptop screen. As for anyone who buys a childs laptop - I say f*ck em and go for the aforementioned size

pauro 76

1024x768, I'll try that so. I designed it on my own 12'' MacBook but discovering that what looks good on that size looks out of place on a PC or larger screen.

yupyup7up

pauro 76 wrote: »

1024x768, I'll try that so. I designed it on my own 12'' MacBook but discovering that what looks good on that size looks out of place on a PC or larger screen.

Its like my boss always said "Never, no, Always, no sorry, NEVER(father ted joke ) design a webpage for your screen. You have to think about the average user of the site. not everyone will have a (1280 X 800) or (800x600) or whatever resolution. 1024X768 is the perfect medium for both desktop and laptop users alike so design it for them! good luck!

Liam Byrne

Remember that 1024x768 is the SCREEN size, not necessarily the window size.

At the very least, allow about 50 horizontal pixels for scrollbars and borders, and about 150 vertically for toolbars, etc (although I've seen small screens lately with so many toolbars installed that the screen "real-estate" was only 500 pixels!)

pauro 76

Cheers! New to this game and always thought that resolution size wouldnt really matter. How wrong I was... I'll have to redesign it, but so long as I know it'll work ok on other platforms I'll be ok.

pauro 76

Ok tried that. Ive adjusted to 1024x768 the size of webpage.



However with size of pc screen Im calling up the website on, 1280x1024, should I increase the page to that? How can I make sure that it will work for most sizes of screens?

Dades

You should really have that sheet music image in the body background (rather than within whatever table/DIV all the content is in), with the content sitting on top of it. That way the image (assuming it's large enough) will fill whatever screen resolution people are using.

The actual content you can then restrict to 1024x768 monitors, and it will look fine because the BG image fills the spaces.

pauro 76

That's what I was aiming for.. I've the background image separate at 1024x768 currently with the text on top. I orginally had it bigger but scroll bars were appearing at the bottom so that's why I needed to cut it to 1024x768.

Liam Byrne

A background image will not cause scrollbars to appear.

If the image is the page's background, then whatever portion of it is required will appear.

So the image can - in theory - be as large as you like*

*Just make sure it's optimised properly, as allowing for 2048x1536 would mean the background image would be VERY slow.

zAbbo

I thought web developers used grid systems these days? like http://960.gs/

hobochris

If you can get your head around Javascript then page size isn't an issue.

p

940 pixels wide is your best catch all.

Liam Byrne

zAbbo wrote: »

I thought web developers used grid systems these days? like http://960.gs/

Doesn't really matter; if you read that page it'll still tell you that it's aimed at 960 pixels (the safe size "real-estate" size for 1024 x 768 screens)

pauro 76

OK, downloaded the grid. Used my background for it as shown...



The problem in Dreamweaver is, when I import it in, there's still white space to the right. Resolution on my laptop is 1280x800. When i make it 1024x768, it looks fine.



The problem is for people reading it on larger screens, there'll still be the white space. Repeat just looks strange... Making the whole thing 1280x800 Im sure wouldnt be recommended, but anyway I can make the white space black and have the grid centred in the middle of that? Many thanks lads, first effort here.

Liam Byrne

pauro 76 wrote: »

Making the whole thing 1280x800 Im sure wouldnt be recommended

If the image file size is small enough, then it'd be fine - as long as it's the background to the page, and not ON the page.

pauro 76

Liam Byrne wrote: »

If the image file size is small enough, then it'd be fine - as long as it's the background to the page, and not ON the page.

Think I finally have it.



Tested it out with a few other resolutions too and the preview worked fine. Guessing the trick is not to go over 1024 pixels with the content, but the background to the page can go over 1280 pixels.

Pixelcraft

you're looking at this all wrong. What if someone has a larger resolution than you, then they'll see whitespace. 1: how many websites do you see with a full image for a background (not many, there's a reason) 2: if you have to do it, then make the image scale.

ScumLord

If you have the picture fade to black on the right and bottom it won't matter how wide the screen is with a black background.

pauro 76

Pixelcraft wrote: »

you're looking at this all wrong. What if someone has a larger resolution than you, then they'll see whitespace. 1: how many websites do you see with a full image for a background (not many, there's a reason) 2: if you have to do it, then make the image scale.

It looks fine when I check the website in 800x600, 1152x700 and what i currently have 1200x800. But forgot about the larger resolutions! Do you mean multiply 960x2? And how can I check how it looks in a larger resolution if 1200x800 is the max I have? Sorry for all the annoying noob questions.

ScumLord wrote: »

If you have the picture fade to black on the right and bottom it won't matter how wide the screen is with a black background.

I see, but i have the picture as the background ya see, not on the background. Was thinking of having black bars at either side and increasing the resolution size if that was possible, but would that translate for the larger screen resolutions and work on the smaller ones? Really appreciate the help guys.

Hoku

but i have the picture as the background ya see, not on the background

You do know that you can set both background image and a background colour to the same element?
Your background image seems distorted in that screenshot you posted, so here's what you could do:
*Make your background image a bit wider than the content container and make its right, left and bottom sides fade to black.
*In your HTML editor, wrap your content in a <div> which will have your image as the background and "margin: 0 auto;"
*Go to your stylesheet, and give the body tag a black background

This combines what ScumLord said, and what you had in mind. Visitors with larger resolutions will see the image faded either side and black colour filling up the empty space.

206exhh_edit.jpg

Another thing you could do is change the background image of the content container itself to a black semi-transparent image. This way you'll see the music sheet through your content container.

Pixelcraft

pauro 76 wrote: »

Do you mean multiply 960x2?

No, I mean don't be thinking static resolution sizes for backgrounds!

pauro 76

Just need to wait for it to upload to the website and see how it goes.... Have the background as 1280x800 so fingers crossed.

Hoku

Don't forget about

body {
background-color: #000000;
}

to accommodate for the bigger resolutions. You might also want to get away from the absolute positioning, as it can cause difficulties on large screens.

pauro 76

Hoku wrote: »

Don't forget about

body {
background-color: #000000;
}

to accommodate for the bigger resolutions. You might also want to get away from the absolute positioning, as it can cause difficulties on large screens.

Cheers mate, how do you mean by 'absolute positioning'? I'll fix up the colours in code mode...

Hoku

If you look at the Stylesheet, all of your apDivs have "position: absolute" and the matching "top" and "left" attributes. With the given values, it might look fine on your screen, but could be incorrectly positioned on larger (or smaller) screens. Use margins, padding and float to position elements on the screen.
Dreamweaver's visual editor isn't the best tool to use to adjust the position of elements on the screen. Trial-and-error in code view seems to work for me :P

pauro 76

Hoku wrote: »

If you look at the Stylesheet, all of your apDivs have "position: absolute" and the matching "top" and "left" attributes. With the given values, it might look fine on your screen, but could be incorrectly positioned on larger (or smaller) screens. Use margins, padding and float to position elements on the screen.
Dreamweaver's visual editor isn't the best tool to use to adjust the position of elements on the screen. Trial-and-error in code view seems to work for me :P

Colour worked a treat. Now for the stylesheet... I'll attempt that and rejig it tomorrow. Hopefully that will work on other platforms such as iPhone too...

pauro 76

Hoku wrote: »

If you look at the Stylesheet, all of your apDivs have "position: absolute" and the matching "top" and "left" attributes. With the given values, it might look fine on your screen, but could be incorrectly positioned on larger (or smaller) screens. Use margins, padding and float to position elements on the screen.
Dreamweaver's visual editor isn't the best tool to use to adjust the position of elements on the screen. Trial-and-error in code view seems to work for me :P

Ok I'll admit it now, not too hot on codes, but I do appreciate I'll need to get my head around them. So what do I need to change on the divs? Tried messing about but nothing much happened.

#apDiv1 {
position:absolute;
left:168px;
top:143px;
width:684px;
height:701px;
z-index:1;
overflow: visible;
}
#apDiv2 {
position:absolute;
left:865px;
top:143px;
width:180px;
height:352px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:14px;
top:163px;
width:118px;
height:154px;
z-index:2;
}
#apDiv4 {
position:absolute;
left:19px;
top:185px;
width:100px;
height:111px;
z-index:2;
}
#apDiv5 {
position:absolute;
left:10px;
top:144px;
width:142px;
height:204px;
z-index:2;
}
#apDiv6 {
position:absolute;
left:332px;
top:125px;
width:292px;
height:359px;
z-index:1;