Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Ensure website compatibility in all resolutions

[Daryl]

Hello,

Recently I came across some information either about CSS or something which ensures that your website is compatible in all screen resolutions so that there isn't any distortion or the layout doesn't break.

Anyone know what I'm talking about? If you can shed some light on this it would be much appreciated.

Cheers
Daryl

[WebNaz]

You should use the so called fluid or Elastic layout, in short instead of using fixed width, e.g #wraper{width:960px} //Fixed
you either dont define width or use %
#wraper{width:90%} //Fluid
or elastic in which case you define your width in em, and will change width as the text is enlarged
#wraper{width:40em} //Elastic

All methods have their cons/pros and there is a lot of argument which is correct.

I personally think that it all depends from your design, all designs require different layout, which might be fluid or fixed, so I would say there is no right or wrong layout.

[Daryl]

Thanks for your input WebNaz, much appreciated. Is this the only way to go about it? Or are there alternatives?

Cheers
Daryl

[WebNaz]

Another method is getting the visitors screen resolution/OS/Browser version, e.g with javascript and displaying the appropriate template/css

Again this has its cons/pros

In short, there is no 100% solution, you have to take many variables into consideration (design, target audience, content etc) and decide which is best for you.

[SiddDubey]

or if your design demands fixed widths then just design the layout according to the most popular resolution used.. like in a survey it was noted that 800x600 is a resolution that is long gone.. so optimize your website for 1024x768 and it will look right in all the resolutions bigger than that..

[JayNL]

Fluid 960.gs is a great start

designinfluences.com/fluid960gs/12/

[Daryl]

Thanks guys for your feedback which has certainly been helpful.

Cheers
Daryl