From: Northumberland, England Insane since: Apr 2003
posted 05-12-2003 04:33
I don't mean to be picky, especially since the above guys all know much more than me, but I always understood liquid design to be a design whereby the content would flow and move to always fill the availble space without looking shite at any one stage.
The guy specifically asks for a site that looks the same in all screen resolutions, liquid design doesn't really provide that in my opinion, it is the best way to go tho.
If you want truly fixed rigid design tha is exactly the same in all resolutions then you have two main options:
1. use absolute position and a 'rigid' design structure, this will always look the same but will have lots of blank space on larger resolutions and may have horizontal scroll bars on smaller resolutions depending on your chosen 'rigid' design width.
2. use Flash and let it be scaleable within the browser window. This is sacrilage in this forum tho, so I suggest if you choose this option you find yourself a Flash forum to discuss it in (www.actionscript.org is good). This method also has it's own range of problems, notably it's bad text rendering (harsh anti-aliasing probs), userbility issues and awkward updateability. It can be done well, but you'll need to be a real pro to do it, the trick is to make a site that looks like it isn't made in flash, not as easy as it sounds.
My advice is the same as the other guys tho, go liquid - it is the most professional and user friendly design 'style', but you will need to know your css or stuff will go everywhere. If you are worrying about res then you are obviously concerned with appearances and you should also worry about browser compatibility (mozilla/netscape is most important second to IE, then you have Opera which can be a bugger (V.7 tho is quite nice and like IE, although IE is M$ and therefore evil), but stick to standards and you'll be ok. Finally I mustn't forget Mac IE, truly a nasty one, good compatibility in some areas, big bugs in others, and you'll need a mac to do any debugging.)
[This message has been edited by smonkey (edited 05-12-2003).]
Secret Monkey has a good point. What jmhc is actually looking for is a fixed design--the opposite of liquid.
I, too, would urge you (jmhc) to go the way of Water, rather than the way of Stone. Stone may be firm and unmoving, and look very nice in your Zen garden, but it cannot flow through a small hole. Water, on the other hand, can flow anywhere, and it will change its shape to fit its container. Stone may be dropped from a height or smashed with a hammer, leaving it shattered and broken. Try to shatter Water.
[And no, you may not have some of what I am smoking.]
my guess was that he was looking to detect the screen resolution and load different version depending on the settings which is not a good idea and one should really aim for liquid design. But we'll see.........
Yes, I think you may be right. That was my initial impression as well. I was just hoping to lead our friend along the path to enlightenment. I'll be meditating in the basement if anyone needs me.
From: Santo Domingo, DN, Dominican Republic Insane since: Feb 2002
posted 05-12-2003 18:12
Thank you guys for helping me
Emperor is right, what I'm looking for is a way to detect de screen resolution and then load different pictures, tables and font sizes so the content look at the same size no matter what screen resolution users are using.
I read about liquid design, and this solution can work with tables, but I think a need a script to detect the resolution and then load the different pictures and font sizes depending the screen resolution.
That's why I post this thread in the javascript forum also
Any other help you guys can give me it would be great
[This message has been edited by jmhc (edited 05-12-2003).]
From: Northumberland, England Insane since: Apr 2003
posted 05-12-2003 20:29
well screen res scripts are everywhere, I have an example below: this is from something of mine (ignore the nofNums bits) basically you need to specify what to do at different resolutions and this does it fine, but what about people who have a really big res, but have their browser window unmaximised? you would need to check the window width and not the screen width, this is harder, especially since the unmaximised window width has no standard/average widths etc. Liquid or Flash - they are really the best two options you have.
code:
var width = screen.width;
var res = (((!(640-width))*640) +
((!(800-width))*800) +
((!(1024-width))*1024) +
((!(1152-width))*1152) +
((!(1280-width))*1280) +
((!(1600-width))*1600)); if(!(res)) res = 1;
if (res=='640') {nofNums = 70}
if (res=='800') {nofNums = 90}
if (res=='1024') {nofNums = 190}
if (res=='1152') {nofNums = 220}
if (res=='1280') {nofNums = 270}
if (res=='1600') {nofNums = 400}
if (res!='640' && res!='800' && res!='1024' && res!='1152' && res!='1280' && res!='1600') {nofNums=90}
[This message has been edited by smonkey (edited 05-12-2003).]
[This message has been edited by smonkey (edited 05-12-2003).]
Loading different versions of a page for different screen resolutions is a horrible way to go about making a page, for a few reasons, some of which have already been pointed out:
- Not everyone runs their browsers maximized
- It's extremely unlikely that you'll successfully account for every possible screen resolution
- The web is not screen; there are many other ways of viewing the web (such as PDAs)
- It relies on scripts to display the page
- If a person changes their browser size or screen resolution, all the cached images become useless
- Someone might change their browser size *while* viewing the page
There are a bunch more reasons.
Look into liquid design. Unless you create a fully flash-based web site (which is generally a bad idea for *other* reasons), it's the only good way of achieving what you want. (Saying it's the "only" good way isn't really a limitation, since "liquid design" is a broad term encompassing many different types of design approaches, including both table and CSS-based design.)
jmhc: Do not be swayed by way of Stone! It is the way of rigidity, of stagnation, and ultimately of death. The way of Water leads to vibrant life.... I hope that you choose wisely.
(Yep, been crankin' up the juice down in the basement. Woohoo!)
I too am trying to do the same thing, create a website that will look the same no matter what the screen resolution.
But my big thing is that I want to have a different fixed background image behind each page on my site. This is purely because of the artistic effect that I am going for, and so far, the site only looks "great" when viewing it in IE at 800x600. I am thinking that I can create a javascript to detect the screen size on each page and then dish off the right sized background image. Or maybe there is a more efficient way to do this???
Have you not been listening? You have been seduced by the Way of Stone! Think Water, my friends... Water!
Sorry Eric. I've been a bit on the batty side lately. If you really want to keep the background image, you could make sure that it fades out around the edges and then center it. I have to admit, though, I'm not really that enthusiastic about that background. Personally, I think you are approaching the problem the wrong way--don't think of this as print, think of this as the web. Sorry I can't be more specific at the moment, but my brain isn't really working too well today.
As for this:
quote:I am thinking that I can create a javascript to detect the screen size on each page and then dish off the right sized background image.
You didn't read the thread, did you... go back and read the posts above.
Eric001: It requires more of a paradigm shift in your thinking - don't try and fight against the medium (this is the web not print) you will waste an awful lot of your time trying to get the page to conform and it will always find a way to break.
My advice for that specific design is to fade the picture of the streetlight out at the edges and use CSS to position it in the middle of the page and not tile. It should look much better.
However, it doe seem like there is too much of a contrast between the colours (it goes from black to white) and, unless you aren't going to put anything in the middle (or if you do you need to cover it over), then it doesn't really work as a background image.
[edit: Bloody hell Suho1004!!! Stop stealing all my good ideas and posting them while I am composing my reply!! I'll switch the electricty supply to the basement off.........]
What if I really want to make the background image an equal part of the equasion. And organize the text around it so that the text and image complement one another.
From: Northumberland, England Insane since: Apr 2003
posted 05-17-2003 18:35
never maximise a users window or change the size of the users window using script unless you have expressly stated somewhere before it happens that it will and they have chosen to accept it.
users get so pissed when websites take control of their browser.
if you want to load a different size image depending on resolution you'll need to find a script that detects res and then writes the css background statement in the head. The trouble with this method is it doesn't take into account the user's browser window width and you'll come unstuck there.
it is possible to detect what size the browser window is, but this method is unadvisable as you wouldn't be able to work anything out exactly because windows can be any shape or size. Short of creating a complex javascript that dynamically adjust the size of your image by the pixel in order to fit any possible window size and even then still facing numerous display ugliness, you are not gonna be able to do this exactly as you want to (unless you use flash, but this is a bad way to go for what you are doing)
listen to the people above, you need to work on a design that fits well in any browser window a user can throw at it. It doesn't mean you have to give up using images, it just means you must use your images wisely. Designing for the web is all about flexibility and scaleability, you need to think in terms of overall design aesthetic. If you want to create a fixed stict design then you need to use a program that creates just that (powerpoint, director, flash, acrobat) - trouble is all of these formats have limited uses and aren't easily updated. Powerpoint and Acrobat don't even work as a web format (well Acrobat/pdf can be viewed in a browser using the acrobat plugin, but this thing sucks and is really only suited to corporate intranets).
As we said before with jmhc, it's either liquid or flash, and we all recommend liquid.
Of course as you page design isn't liquid then you could do what a lot of people do and ignore the right side of the screen in larger resolutions. Just set it a boring colour and control your background behind your fixed width layout and then you have your design sorted, but you also have to put up with a useless blank space on one side of the window.
I checked out the page and I see the javascript for selecting the background image. Do you like it so far? Are there any bugs still to work out? It looks good to me.
From: Santo Domingo, DN, Dominican Republic Insane since: Feb 2002
posted 05-26-2003 17:45
With background I think everything is working fine, with tables I worked with percent values (no pixels) , like DL-44 and company told me to and it looked perfect, my problem is using percent values with jpg and gif files, but I think it can be worked this way also
[This message has been edited by jmhc (edited 05-26-2003).]
From: Santo Domingo, DN, Dominican Republic Insane since: Feb 2002
posted 05-27-2003 15:17
I think I know what you mean, you call a javascript to open a browser window. The only problem with this is that it won't fit at all screensizes, by example: is you use webtv (560 x 420 resolution) and your windows size is 640 x 480 or 720 x 540 it is obvious that your window wolud be bigger than the screen.
But I think that we can work it out with percent values instead of pixels
On your page, I think I see that you check for screen size and then dish out the appropriate sized background image. Is that working well or buggy at all? Im going to try it that way on a page - and also use the percent instead of pixels.
In your source code, I see the various if then statements you use to write the info about the background image. Is there a way to write something into the style sheet instead of the html? That is where I have all of my background image information.
Maybe I haven't carefully read the posts and the links some of you posted,but what can be done when it comes to the vertical? I mean designing a site that will fit on the vertical too, no matter the resolution?
In regards to the vertical - I too have a question about that. I tried to create a webpage in which no matter what the screen resolution is, a mailto: link would always be at the bottom. I tried using tables and included a height="xx%" but I was never able to get it to my liking. And I guess that setting the height of a table doesnt work in Netscape. I only got it to work somewhat in IE.
By the way - I redesigned my site according to your suggestions - it turned out to be somewhat more of a jello design instead of pure liquid - since I wanted the background images in there. but Im quite satisfied with the results (until the next redesign.)
crip said: "what can be done when it comes to the vertical?"
the answer is: "not much." You can wade around in JavaScript all day if you're desperate, but I can't think of a way.
to everyone: This is just my opinion, but I really don't feel JavaScript can fix everything. As people have said before, liquid design is really the best way to go if you don't want to go through the stress of designing 5 versions of every page.
posted 05-11-2003 00:10
