Topic: Different screensize

Hello

I'm making a new website, and I want that the site looks the same no mather the screen resolution, but I don't know how.

Can somebody tell me how can I do this??

Thank you

we refer to that as Liquid Design

With more specifc questions we can more specific answers. There are a lot of really good resources listed ^there though.

=)

[This message has been edited by DL-44 (edited 05-11-2003).]

jmhc: See:

:FAQ: What is liquid design?

:FAQ: What screen resolution should I be designing for?

___________________
Emps

FAQs: Emperor

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.]




www.liminality.org

Spankde Monkey & Suho1004: Well we'll have to let jmhc confirm this but as he also cross posted in the DHTML forum:
www.ozoneasylum.com/Forum2/HTML/002141.html

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.........

___________________
Emps

FAQs: Emperor

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.

Ohmmm....

Yep, so now I'm just confused =)

I made the same assupmption as Emperor, for the same reason.

Oh well, now he's got info for either scenario and should be all set

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).]

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.

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).]

So you actually plan to have a different set of images for every screen size

Ok, 1st big question then - why on earth would you want to do such a thing?!?

For starters, screen sizes are theoretically limitless, and so then are resolutions. How would you account for non-standard resolutions?

What about people who don't maximize their browsers? I run 1280x960, but my browser window is usually in the vicinity of 800x800.

If you want things to be completely resizable to match the viewer's screen, the only feasible way is through something like Flash.

But again, the question: why?

DL-44: isn't that kinda what I said? good to see people are of 'like-minds' with me.

yep, I guess you did. sorry, I missed a couple of your points

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.)

Thanks guys for the help and fot the advices

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???

Eric www.secret-beach.com

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.........]

___________________
Emps

FAQs: Emperor

Well, isnt there a dhtml way to force maximize the window, or detect screen size and then reload the window at an appropiate size? Id rather do that.

What I mean is,

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.

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 made a combination of what think it is liquid design, javascript and different size images and the results where close enugh of what i've spected.

Thank you guys for the help



[This message has been edited by jmhc (edited 05-17-2003).]

can I view what you have done to see if that is the way I would like to go?

thanks much

Eric

www.geocities.com/joan_hache

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.

Eric

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).]

I may have found an interesting way to get around this whole issue of screen size. And of all places www.madonna.com

It isnt a liquid design, but what do you think of the way they did this?

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.

thanks again

Eric

Hi again,

just have a question.

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.

thanks much

Eric

mmm, jmhc:

<OBJECT classid="clsid D27CDB6E-AE6D-11cf-96B8-444553540000"

 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

 WIDTH="100%" HEIGHT="100%" id="my page" ALIGN="">

 <PARAM NAME=movie VALUE="my_page.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="my_page.swf" quality=high bgcolor=#FFFFFF  WIDTH="100%" HEIGHT="100%" NAME="Untitled-1" ALIGN=""

 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>

Jason

[edit] friggin smilies

[This message has been edited by JKMabry (edited 05-31-2003).]

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?

Ok guys, here we go again

Can I use liquid design with text the same way I used it with tables??
I mean working with percent instead of pixels



[This message has been edited by jmhc (edited 06-03-2003).]

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.)

Thanks again! You guys rock!

So, how about a peek?

Please take a peek.

But aside from the jello, you may find a bunch of other things that need a fixin....

Has it been jellified well? I kinda like the way it looks in 1024 these days even though I originally had designed it for 800x600.

oopse

the site is www.secret-beach.com

jmhc: There's no way to resize fonts to the size of the browser window with pure HTML and CSS. There is a JavaScript solution, though. Due to my sketchy familiarity with JScript, I'll point you else where. This may be what you're looking for: http://hotwired.lycos.com/webmonkey/reference/javascript_code_library/wm_scl_fnt/?tw=reference&category=layout_css

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.

I'll meet you guys in the basement... ;-)

Yup, it's looking fairly liquid, but you do realize that the background image sits by itself in the middle of a black page at anything above 800x600 resolution, right? It's rather distracting...

Anyway, if you want a more detailed review, drop the site in the site reviews forum. Not that you have to, of course, just if you want to.

suho: The background does look a bit odd at high resolutions.

While, this relates more to graphics than HTML or CSS, I have a suggestion.

Perhaps you could adjust the brightness and contrast of the photo in a graphics program such as Photoshop (or whatever you prefer).
The image sticks out because its a little too bright. Darkening it a bit will help it blend into the black and (hopefully) not look so awkward.

Do you guys have your screen resolution set to 1024x768, or even higher than that?

I was considering putting a javascript on each page to detect screen resolution and then load up the right sized background image.

But actually I kinda like the way it looks in the 1024 mode.

I dunno...

Could/would a MS please edit the post causing the dreaded horribzontal scroll. =) and then show us how this
happens?

Ya picky picky I know... but it drives me nuts.
thnx