Help with screen res. problems

Flynn

hey

Im building a website and have recently found out id have to design it on a lower screen res so that the finished site will suit everyone... This came as a dissapointment because as soon as i set my laptop to 1024x768 it looked crap. Im normally in 1280x800. The thing is my laptop is a widescreen.

So i designed the site and then checked it out on a square dell monitor (17" or 19" maybe) with the 1280x800 screen res but it was scrunched up as if the laptop was just stretching it in the first place... How do i fix this problem.. should i design on a square monitor.... When surfing on my laptop i found all sites to be ok and they didnt seem stretched...

If i design in 1280x800 i can get the site looking lovely but it looks big and clumsy on College Campus computers...

What should i do?

I dont have access to the net from my laptop so i cant show ye...

Adam

The bane of every webdesigners existence... The options are fixed vs. fluid layouts. But as standard you should develop on a normal 17/19 inch square monitor, as this will be the norm for most folk browsing the site.

Mind you, if it looks bad now, try checking it out at 800x600!

seamus

Ah yes. I had a client once who complained that "The site is different sizes on some of our screens. It looks too small on my screen. I want it to look the same on my screen and my colleagues screen. Please do this."

Try and develop sites in a standard 17" screen at 1024 x 768. For fluid sites, this mainly just ensures that text and images aren't scrunched up or overlapping. For fixed-sites, it ensures that the site will appear correctly for the bulk of your audience - i.e. that there isn't too much whitespace or scrolling.

Flynn

Yeah i spose i'll have to but is that not a bit odd that the widescreen couldnt really take the drop in resolution??

See i have an iFrame and on my widescreen it looks fine with no horizontal scroll bar but on a square monitor it puts in a scroll bar (as if it's squashed)


What a dose.. Everyone should have a high res!!!

I'll be back to ask for a site critique too...
nice one mirror...

Adam

No problem, best of luck!

Flynn

seamus wrote:

Try and develop sites in a standard 17" screen at 1024 x 768. For fluid sites, this mainly just ensures that text and images aren't scrunched up or overlapping. For fixed-sites, it ensures that the site will appear correctly for the bulk of your audience - i.e. that there isn't too much whitespace or scrolling.

So what am i going for here fixed or fluid?? Never heard of those terms.. i'm self taught so forgive me....

If u check out jodavino.com thats the vibe im going for.. I presume thats fixed ya? Not much scrolling to be done...

seamus

Yeah, that's fixed. Basically what we mean is fixed-width/height (size of the site never changes), or variable width/height (size of the site changes as the window is resized). Boards.ie for example is variable - it expands to fill up all available space.

Flynn

Oh right... i see.. and it would change as the window re-sizes if you use layers???

Adam

Ah. layers....so you're using dreamweaver I presume? I don't know that DW caters for fluid layouts anyway, I imagine you would have to create the site and then tweak the css...but dont quote me!

seamus

It can, but you don't necessarily have to use layers or CSSIf you set their sizes to a percentage, then sites (or parts of the sites) will be fluid. If you set them to a specific size, then your site is fixed.

For example, if you have a table e.g.

<table width="80%">.....</table>

Then the size of the table will always be at 80% of the size of the window, regardless of how much you resize the window. However, the size of items is (generally) relative to the size of the container they're in.

So if you have, for example.
<div style="width: 500px">
<table width="80%">.....</table>
</div>

Then your table will always be 80% of 500px, not 80% of the size of the window.

Neither way is better. They both have their merits.

Flynn

Ok gotcha...

Ya im using DW but not layers... i just noticed that they change depending on window size... thanks again guys..

Ph3n0m

but also dont forget the total width of elements in the page (in a single line)

for example

I have 3 images side by side: image 1 - 200pixels, image 2 - 140pixels and image 3 100pixels

That alone means a minimum with of 440px - that is without adding anything else in (such as content, navigation, etc).

The problem is sometimes people design using a certain resolution instead of a specific width

for example 800 x 600 upwards - max width would be 775px;
1024 x 768 - 960px; (or roughly around that figure), and so one

You also have to take into account scrollbars, etc.

I know when I am building sites - even now, I will still try and get it looking good in 800 x 600 and then worry about higher resolutions.

Not because of "fluid" design - but because sometimes clients/designers insist on it looking a certain way

smcelhinney

When deciding between fixed/fluid, consider your audience. Tables by their nature are not fully accessible to screenreaders, particularily if you nest.

When you use fluid designs, you essentially allow the user to control their own experience of your site. You can achieve a uniform looking site with fluid design, dont think that you necessarily have to use tables to do it. Consider this site for example, not a table in sight.

CSS Zen Garden is a fantastic example of fluid sites conforming to fixed designs. These sites use a combination of fixed and relative object sizes, to allow you to resize to the optimum experience.

Thats why I dont use tables anymore, except for tabular data. And iframes are not SEO-friendly either, so watch out for that.