How to deal with different screen sizes when your theme is all about design

Question

We know that not all people have the same screen resolution in their computer monitor. Some people prefer widescreen display in 15'', when other uses 17'' and more for their computer experience.

I am designing a web page that in my monitor (17'' 1280w x 1024h ) looks great.

When I tested it in a laptop, ( less height resolution than my monitor ) it does not look good because it kind of splits the page and you have to scroll to get the feeling. You don't get all the good part at once. This means it looses from it's design.

My question is if this is a game of my mind because I am used to my monitor, and if it is not, how should I deal with it ?

I prefer not to show my page, but I found an example of what I mean in template monster here http://livedemo00.template-help.com/joomla_35840/

Answer 1

For that reason and furthermore for mobile screensize as well, there is new technique called Responsive Webdesign. Its about adapting its content and layout according to screensize by using CSS mediaqueries and additional serverside techniques. Haven't digg too deep into it, but I think its based on HTML5 and CSS3.

But, I'm afraid it needs a whole new layout approach for your current site.

Links: Responsive Web Design Introduction, Responsive Web Design: What It Is and How To Use It Pragmatic responsive design, Adaptation: Why responsive design actually begins on the server, Golden Grit System

And critical links: 11 reasons why Responsive Design isn’t that cool!, Responsive Web Design or Separate Mobile Site? Eh. It Depends., CSS Media Query for Mobile is Fool’s Gold

Answer 2

Have to agree with FrankL here. The current trend is towards responsive web design using HTML5 and CSS3 (in particular media queries). Be aware though that a lot of this functionality will only work on newer browsers. If you have some stats about who currently visits the site (what browsers they use) this may show whether HTML5/CSS3 is the way to go or you need to look at other ways of creating similar effects that work on older browsers.

Some links on response web design:

http://www.alistapart.com/articles/responsive-web-design/

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Answer 3

I have to say (to my shame)n that I haven't checked recently what is the majority resolution used by screens in 2011. However, I stick to the idea that you should at least cater for 1024 x 768. In your design, if you aren't catering for the vast majority of your potential audience, then all you are creating is a vanity project.

My advice is...find out what the majority (i.e. over 90%) of your visitors resolutions are and cater for at least an acceptable appearance the lowest common denominator. i know it is a pain but it is your users you should be addressing.

Answer 4

If its really ALL about design, than try to design it fluid so it can adjust to different screen sizes. There are lots of examples of similar websites.

Google did a really good thing with a semi-fluid interface (i used the term semi because it has couple of steps that it reduces to, it does not reduce smoothly with every size of browser) - open up your google docs, and than start reducing the size of the browser window and see what happens.

There are even frameworks for this kind of work that you can use.