The great Debate? (fixed or fluid width?)

He has: 490 posts

Joined: May 2005

The great debate over whether to create pages at a fixed width, or make them liquid. There are advantages to both, and equal disadvantages.

I’ve been doing a little research on the subject, as this is the dilemma I have been having with my new site. I have files for both fixed, and liquid. Also one has fixed size fonts, while the other can be re-sized, this of course does not relate to Firefox, But to IE. We all work hard to get our websites looking good, and have a place for everything, and everything in its place.
But it seems that the creators of browsers, work equally as hard to defeat our very purpose. Also worse than that, there does not seem to be a limit to the plague of different monitor resolutions.

1024 has the edge definitely, but 1280 is not far behind, this resolution comes from notebook computers. But I have seen resolutions up to 2100 on my site meters, and as small as 320?. While these are few nevertheless they are out there.
Any website always looks the best at the resolution it was designed at. You cannot completely, and exactly compensate for the little differences in browser display, and for sure you cannot satisfy dozens of resolutions - there are about four different 1280 formats.

There are two usual ways to go with a fixed format, One; use a 800 x 600 center and lay a complementing background behind it. Two use a solid background, and defaults you content to the center, while maintaining some fixed width.
The first reminds me of a postage stamp lying on a table at higher resolutions, while the other just seems there should! be something else there. Unfortunately this is a no choice situation, as resolution size increases. In my survey this was a toss up, as to which was preferred.

Liquid on the other hand goes fairly well, as long as the browser size is increased to a point. But most at 800 x 600 start to loose controll. Text gets bunched up, boxes start to overlap, and your site just looks a little like hell. The opposite when most sites start to depart far from their original design point, lines of text begin to look like Iowa corn fields. Text going on, and on forever. But this is something we just have to live with, there is no real fix. Ultimately the choice is yours, of how you want your site destroyed.

The bottom line seems most preferred fixed width, about 90% of those asked. They preferred text to remain reasonably readable, with controlled lines. And did not seem to have a preference in the way the site was fixed, as long as it remained center. While the other 10% preferred liquid, and were willing to accept the distortions as long as their screen was filled.

One way gives the user more control, the other (fixed) gives the webmaster more control. Since 8 X 6 is only about 6 - 10% of internet users, I really do not see the need to destroy my hard work for them.
When I first started using the internet about 9 years ago I had a 13” monitor, and had to use 640 X 480. Not long after most sites started to go to 8 x 6, I accepted my dilemma, and just scrolled until replacing my equipment. After all having a dinosaur was my fault, not the web designers.

Bottom line my preference is 1024 fixed. Monitor formats are not going to get smaller, and really can’t get to much larger. So 1024 keeps enough width at higher resolutions not to look to stampy, while its not the worst for 8 x 6 users to scroll until all the lizards die.
Also a fixed font size seems reasonable, while Firefox can re-size it anyway, IE does not increase fonts a little but goes to extremes. This does more damage to your layout than any monitor resolution.

So what do you think?. Smiling

Busy's picture

He has: 6,151 posts

Joined: May 2001

Have you tried to print out a site fixed at over 800 ?
That's my reason for never fixing over 800

He has: 490 posts

Joined: May 2005

Good point.

But who prints out websites, I can understand if it has savable info on it. But your general run of the mill site ? why would anyone want to print it out?.
I just usually save page as, and save the whole thing in my documents, if I want to refer to something on a particular site.

Another point is - I may not want anyone printing anything from my site. Smiling

And there always the "printer friendly option" for recordable information.

demonhale's picture

He has: 3,278 posts

Joined: May 2005

Yes you can provide a print version of your site. But if you have a printer with a smart web-print option, it automatically generates a default readable look when printing web pages.

As far as the width and site sizing goes, make what you can live with. Monitor your stats, and watch out the most used resolutions, and adjust your sites to those. You may get a jumbled site at the most impossible resolutions, but youll have 90% of your visitors happy with how your site looks. The most important thing thats forgotten in this "sort of" argument is that even if you layout the site poorly if they need your content, and the visitors get what they want fast, then it doesnt matter...

openmind's picture

He has: 945 posts

Joined: Aug 2001

Personally I prefer the fixed width approach but by fixing for 1024 you are still going to alienate 17% of users...

DaveyBoy's picture

They have: 453 posts

Joined: Feb 2003

Most of the sites i've done over the last 2 or 3 years have been fixed at 760 - 780. I just prefer my sites to be fixed width.

He has: 490 posts

Joined: May 2005

I think that the site content, has a lot to do with the resolutions you see on your site meter. The site that I'm replacing was up for a year, on the average 8 x 6 was only 6% or less per month.

If you have a photography related site, most of your visitors will be people who have the same interest. These folks run at least 1024, or better all the time. I have seen some ridiculous resolutions, that had to be someone who converted their plasma Tv to monitor, because they just don't make em that big. Well I have seen a few in Tv studios 3 feet wide, but that's not your average internet user (maybe Uncle Bill has visited me?).

Jokes not withstanding, I post photos sometimes on the local weather channel. It is operated by the same corporation as our local Tv studio, sometimes they will grab a photo off of that to use in a news cast (I have had it happen). I think this is where my unusual sized resolutions are coming from.

I was thinking about what Demon said, and if you use Adobe PDF reader, which I do. There is a automatic download of internet printing, just for the purpose of adapting the printer for creating friendly conversions, from high resolution sites.

I wish there was a script that would allow limited liquid resolutions, like 1024 and 1280 then cut off. Maybe some program whiz will concoct one when they see this post, but at present there is no such animal. Laughing out loud

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

steve40 wrote: I think that the site content, has a lot to do with the resolutions you see on your site meter. The site that I'm replacing was up for a year, on the average 8 x 6 was only 6% or less per month.

IF everyone visits with their window maximized. Do they? I don't. My resolution is at 1152 but my preferred window width is about 950 pixes. I like sites that stretch to fit whatever width I want to use. I imagine a lot of people with big resolutions do something similar. Really, who wants to see a website stretched out to fit a gigantic resolution anyway?

Quote: If you have a photography related site, most of your visitors will be people who have the same interest. These folks run at least 1024, or better all the time.

That makes sense. Same would be true for graphic designers or video game enthusiasts or web designers or computer programmers. You'd think, anyway, but I know that we've got a few regular visitors to this site who use 800 x 600. And again, you're assuming they keep their browsers maximized.

Quote: I was thinking about what Demon said, and if you use Adobe PDF reader, which I do. There is a automatic download of internet printing, just for the purpose of adapting the printer for creating friendly conversions, from high resolution sites.

I'm not sure what your'e getting at here (am a little dumb these days due to bike accident), but the simplest way to create a print friendly page is to provide an alternate stylesheet. That way you can hide navigation and things like that to make the content print out properly. There's also something called Prince which converts web pages to PDF. Or is that what you're talking about.

Quote: I wish there was a script that would allow limited liquid resolutions, like 1024 and 1280 then cut off. Maybe some program whiz will concoct one when they see this post, but at present there is no such animal. Laughing out loud

Um, yes there is, and it's not a script, it's CSS. THe property is max-width, and it's supported by all standards compliant browsers and IE7 (someone can verify that for me - IE 7 had better support max-width!!). I have seen a script that automatically switches the stylesheet when the width gets below a certain point. It was interesting, but very odd to look at. I tried it out for this site for awhile but decided against it. Too disruptive.

Sorry if it felt like I was picking on you, yours was just the last post in the thread here Smiling

I think that sites should be designed for any resolution, any device, any browser, any viewing preferences. If people are browsing with a certain setup it's probably because they like it that way. So the best we can do is make our sites flexible, standards compliant, and device independent (you can also provide different stylesheets for mobile devices. Opera can preview that for you).

I'm getting really annoyed with all the fixed at 1024 pages out there. I can't believe people are so quick to abandon 800 x 600. I'm having to do a lot of user CSS to fix sites now.

He has: 490 posts

Joined: May 2005

I don't feel picked on, that's why I started this thread to get some input. The print program I was talking about comes as a download with Adobe Acrobat Reader, there is really no name given for it.

I am not really trying to exclude anyone who still uses 8 x 6, I did until recently. When I started the new site layout I did it at 1024, all the margining, and positioning. As a result it does not look to pretty at 8 x 6, it gets all stacked up on it's self. So I reasoned that if I came across such a site, I would just as soon scroll a bit rather than to see it the way it looks at 8 x 6.

But I am not everyone, and as the saying goes you cannot account for everybody's taste. Laughing out loud

Even the album script I am using will not work at 8 x 6 if you use 5 coulombs. If you only use 4 like you would at 8 x 6 it looks very empty, and strange. So all the points put together I decided to fix it at 1024. That way it looks the same at all the major resolutions, but with a little scrolling at 8 x 6. Smiling
Well all but the album it still stacks up, I may have to resort to something else. But all the others I have ran across use either flash or java, neither of which I am fond of.

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Personally, I prefer fluid layouts as they fit on any screen, however, as of recently, I've found myself doing fixed width designs as it is a lot easier (I find) to work with. The fixed width designs were made to fit on a (max window) 800x600 resolution.

He has: 490 posts

Joined: May 2005

That's the usual way to do it; that is to start at the lowest resolution, and work up. But the problem with that is - as res increases the fonts, and graphics get smaller and smaller. And everything gets stretched like a pair of old underwear.

I centered this last site on 1024, I can go liquid with it, but when you go down to 800 x 600 just the reverse occurs. The text gets too large, and things start to stack up, or just get to crowded.

Liquid just seems to be a no win situation with some designs. If there were a way to control fonts with resolution change that would be the fix. I think there is something like that in java, but that is a dying script, as just about all browsers either don't - or will not support it.

demonhale's picture

He has: 3,278 posts

Joined: May 2005

Use fonts in ems, or (oh no!)percentages... anyways it seems using ems could be better than font sizes in px...

Also, you can try and maximize your layout to prevent over-stretching with some css voodoo...

He has: 490 posts

Joined: May 2005

I've tried them all Demon. The header is not in that big of size actually, but at 800 it gets to big. The text fonts almost collide with the jpg, and I tried to see if the jpg could be re-sized it gets badly distorted when going to smaller demsions.

What it does is just what it is, a 1024 layout being forced to 800 it looks bad. I found a java script that will allow two style sheets to be used, but I don't want to go that route. What CSS Voodoo?. Confused

I was on another forum, well looking. They were talking about some sites seemingly abandoning 800. I don't think it will be very long before this is the norm anyway.
This was something I wanted to do, that I could not get to look right at 800, not enough room. Remember that's what happened to 640. As people wanted to create pages that just would not fit 640, it turned over and died. Smiling

#PS. I bet I can win a web-sucker award for this. That seems to be one of his pet dislikes, sites that don't re-size. Laughing out loud

A remark to answer one of Megans statements. As this proliferation of multi-browser sizes just keeps going on, that's your only defense. Create something fixed in the middle, and let the chips fall where they may. It seems I am not alone in this new counter idea/war.

demonhale's picture

He has: 3,278 posts

Joined: May 2005

well something else worked for me, see at my site I have fixed it to fit 800 and floats to adjust at higher res...

If by mundane instance the visitor has a very wide monitor, it never disrupts the design, but then your concern of smaller texts comes in, which is gladly handled by a text-sizer common now even for mambo/joomla/wordpress installations on the net. Also as you can observe I have a print-view option for the site, that if you really need to read the content, you can have a print-view option to have it printed...

As far as pictures go, I have two types of gallery, one in full-view mode and one in max-resize adjusting to the width of the browser on load... using GD Library manipulation which is a far-cry in resize quality than assigning widths and heights...

Theres also another gallery where the visitor can set his own thumbnail size, so I think that solves many of my problems...

He has: 490 posts

Joined: May 2005

Well I settled it the site is 1024 fixed, I guess I am just going to be one of the rebels. Like one guy said on another board "Let the s-n of a b-----s squint". But at least I did go with % for the main part of the text, which will let explorer users re-size text. That does not seem to bother the layout at all, as long as it stays at 1024. That is if you don't have to have billboard size text, in that case maybe they just need new glasses. Laughing out loud

Busy's picture

He has: 6,151 posts

Joined: May 2001

My view as a buyer or reader of a site is that if I have to 'work' to view the site I'd rather go elsewhere to buy/see/read whatever.
Alistapart is a good example, for yonks they had a fixed width 480x640 or whatever it was, sure it was annoying as it was so skinny it made the pages really long, now it's a stupid size and isn't worth the effort of having to scroll right just to cut of the logo in the left column, the content is cloned on so many other sites so those sites get my vistorship (my word Sticking out tongue )
I was viewing a site for a friend the other day, they wanted some performance parts (automotive), I looked at the site but had a fixed width so I just browsed what I could see and skiped the right column as I couldn't be bothered 'working' the site (and the part I wanted was over on the right as I found out when friend emailed the company), I gave up after several pages and went to their competition and even thou I paid a bit more for the item it was hassle free, mind you it was the third site I tried as the very first one was a flash only site.

Printing does matter and PDF is not the way to go, my girlfriend was trying to arrange some lodgings to coinside with a hot rod run and a photo gallery showing, she printed some pages off to show me (and didn't bookmark them), both the gallery and lodgings sites were fixed width and all the important stuff (like contact details and prices) were cut off, even the web addresses. As she couldn't remember where she found them, which is normal when your looking at hundreds of search results) we've decided to just wing it, go down for the day and if the gallery is still open take a peek, if not go elsewhere - two more companies lost business because they couldn't make a decent printable page.

And no I never email the webmaster, if they wanted everyones business not just a select bunch ...

Quote: If you have a photography related site, most of your visitors will be people who have the same interest. These folks run at least 1024, or better all the time.

What am I, chop suey? I was a freelance photographer and still am as a hobbiest, my screen is at 800x600 and now just maximised (always forget to check that).
The stats and theories about what/who etc are guesses at best, just because you have air con in your house doesn't mean everyone else does, just because you like coke or pepsi doesn't mean everyone else does ... is a numbers game, stats are just numbers with a large percentage of error and with pc's that percentage is even bigger as there are so many factors to weigh up, do I have side bars, do have screen max'd, do have tool bars, do I have this, do I have that ... no one could/would know even within 10%, 35% would be closer but probably still way off

He has: 490 posts

Joined: May 2005

Busy.

Here are just a few of my reasons for the fixed 1024. The first is it is not possible to have an image re-sizeing even up to 1280, and not loose tremendous quality. Either its going to be to small if you originally sized it for 800, or its going to be huge at 800 if you originally sized it at 1280, I've been that route already.

An image over the text at least wont affect that, but if it is parallel to it then you have a problem when it gets to big, and starts crowding up on the text. I use 1024, and I mean all of it, I don't have tool bars and other junk on my browser, I despise them. I really don't see why anyone wants such crap. But I guess you cant account for everyone's taste as I said before.

The other reason is why its called a PC (personal computer), I wanted something that did not look like every other site on the internet, and it just required more room than 800 allows. I tried to make it fluid, but was not pleased with the way it looked.
I think this is why about all of your news services, and a lot of corporate sites are fixing at 1024, its just to much hassle to try to satisfy every browser size out there. Probably another reason is the same as mine, they deal with images and text mixed.

I know you can load a site down with java script, and several style sheets and work almost anything out, but again who wants to. Besides java is not even half supported anymore. IE-7 does not support it at all. I know you can go to sun and download a java vm, I did that it sucks, I got rid of it.

I did get the album to be compatible with 800, by making the thumbnails a lot smaller than I wanted to. 800 is like 640 finally got - its a dinosaur, and needs to just quietly pass on. I would probably be the last to say that, I held on to it with a vengeance, but I finally realized when it needed to go.

He has: 490 posts

Joined: May 2005

OK, to be fair.

I am not trying to be an a-hole about this thing. So to be fair all the pages are now liquid. Go take a look and let me know what you think, "Honestly". I just hate the idea after all the work the site will not look as I planned, but I guess you cant win em all.

I have not used any max width, because IE does not support it. Since thats the biggest share of the web, using max width would be a waste of time. Even if IE-7 does support it, 6 will still be around forever.

The link is in my signature.

Busy's picture

He has: 6,151 posts

Joined: May 2001

Theres nothing wrong with your site at 800x600, it looks good. The text is all good sizes (not to big not to small), except the 'Created with Web Album Generator' which is tiny and had to move forward to work out what it said .
The waterfalls page has one extra pic but it doesn't look out of place, gives it that "I'm going to ad more soon" feel. The flowers page only has the 5 but fits across perfectly without any scroll bars or anything (this on FF at 800x600)

I can't see what the problem was

He has: 490 posts

Joined: May 2005

Well, maybe the problem was "ME". I did add a max-width tag to the tables @1280. Works with FF, and opera, but you would know there is no way with IE. So it just goes on, and on, and on, and on.

I tried something that was supposed to work "HAH". Needless to say it did not.

The albums do need more pictures, and they are forthcoming as I get the time. Thats why the odd pix on the waterfall page, the album is set up for 5 rows.

Busy's picture

He has: 6,151 posts

Joined: May 2001

I just took a look in IE (at 800x600) and no horz scroll bars
The only difference I can see between IE and FF is there is a different gap between picture and caption on the photo pages (nothing to loose sleep over thou), and the next -previous is slightly different height if you really wanted to get fussy.

He has: 490 posts

Joined: May 2005

Yeah I am used to that, its not my program so I can blame that on someone else. It seems FF wants a space some places, and IE does not, then IE wants a space some place, and FF does not?.

I tried briefly to add a little margin to that, no response so I did not pursue it any farther. Another instance is the W3C button at the bottom of the index page, IE neatly sticks it into the corner, and FF leaves a big margin at the bottom. Tried a little - margin in that and IE went to the basement, but FF just settled to the corner.

I don't really understand why it is, they have to have a different view of spacing on some things? but they do. But most people don't view your pages on two or three browsers like "uses do", so they never know the little diffrences. Smiling

I guess I can live with the text wrapping at 8 x 6, just like I have to live with it spreading to Georgia at really high resolutions. I have it fixed for FF, and Opera with a max-size 1280, but IE does not recognize that command. There is a java/css script IE does recognize, but only for text paragraph length, not width display of the whole page. "Useless". :flame:

Busy's picture

He has: 6,151 posts

Joined: May 2001

Which text are you concerned about here? I had another look and can't find any text wrapping that doesn't look like it shouldn't be

He has: 490 posts

Joined: May 2005

At 800 x 600 it should be, I would really have a hizzy if it didn't. But as I originally planed for it to be at 1024, there is enough margin between the text and the pix so that it doesn't.

I could have based it on 8 x 6 like I did the last one, but then things go the other direction - they tend to get too small. So I chose the middle ground 1024.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.