• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Supporting Different Screen Resolution Sizes

 
Paul Michael
Ranch Hand
Posts: 697
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

My wife and I are currently working on this site: http://www.slingandstonemusic.com.

We were wondering what's the least screen resolution that we should support. My friend who's been using an iMac when browsing our site is saying that we should take advantage of precious real estate. But for us, as much as possible we would still want to support 1024 width resolutions.

Hope to hear your comments.

Thanks!
 
Pauline McNamara
Sheriff
Posts: 4012
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Maybe these stats might help you decide. Looks like a majority of users have 1024 pixels wide:

http://www.w3schools.com/browsers/browsers_display.asp

I wonder if the content were centered if it might not seem like so much space is unused?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
As much as possible, it's a good idea to make your pages resolution-independent. When that isn't feasible, Pauline has hit on the point that many modern-looking web sites center the content to avoid the "painted into a corner" syndrome.
 
Paul Michael
Ranch Hand
Posts: 697
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's a great suggestion! And thanks for the link, it was very helpful.

I think I also heard from my wife, that she saw a particular site where more contents were visible if the user has a higher resolution but those extra contents disappear like magic when using a lower resolution.

Are you familiar with this technique? And how it can be done with CSS?

(apologies for the seemingly newbie question)

Thanks!
 
Elliotte Rusty Harold
author
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Whoever thinks that 1024 is a minimum browser size has never used an iPhone. It has fewer pixels across than a Mac Classic. Design sites so they're resolution independent. It's easier to do and your sites will look better.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Elliotte Rusty Harold:
Design sites so they're resolution independent. It's easier to do ...

And yet it seems most challenging to many page authors given the state of sites on the web. Does your book give guidance on refactoring sites to be resolution independent?
 
Paul Michael
Ranch Hand
Posts: 697
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Supporting the iphone is the least of our worries for now. But it would be great if we can work on that someday.

As an added note to Bear's query, how does one make his site resolution independent?
 
Elliotte Rusty Harold
author
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Making a site resolution independent is usually easier than making a site resolution dependent. The key is to focus on the content and not the appearance. Strive for linearity and avoid complicated element placement. Never specify the width or height of anything (or if you must use percentages and relative units, not absolute units like pixels and centimeters). Finally, never design a mockup in Photoshop. It's a photo editor, not a page layout program.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Elliot, it almost sounds like you are advocating a least-common-denominator approach using simple linear web sites. This isn't always possible in the face of complex web applications, and product managers that want complicated, non-linear layouts.

Does your book have tips for such sites?
 
Elliotte Rusty Harold
author
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Get a better product manager?

Seriously, step 1 in good site design is to write a simple, linear page.

Step 2 is to apply CSS to make it look better.

But you always start with step 1, and then you always have a page that degrades gracefully in older browsers. The book spends a lot of time talking about how to design and style linear pages (though I didn't think of phrase it that way).

Besides backwards compatibility, linearity is crucial for both search engine optimization and accessibility. If your product manager doesn't believe that, don't tell them what you're doing. They won't know the difference.
 
Pauline McNamara
Sheriff
Posts: 4012
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Elliotte or Bear (anyone, actually), do you think you could explain briefly what you mean by linearity?

Thanks
Pauline
[ July 18, 2008: Message edited by: Pauline McNamara ]
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Elliotte Rusty Harold:
Get a better product manager?
Ha! They don't exist!

(That was, of course, tongue in cheek! But it is true that there are a lot more bad product managers than good ones -- just as with good development managers. The Peter Principle and all that.)

Seriously, step 1 in good site design is to write a simple, linear page.
Absolutely. And it's great to hear someone else besides myself stress this. I think too many people start with design in mind and write their HTML to suit that design. Doing so makes stylistic decisions creep into the content markup even if the CSS is sequestered away in style sheets.

The best pages completely separate content from behavior and style, without letting the content be influenced by the end design. Obviously, the content needs to marked up enough for the behavior and style to get their hooks into it, but the content should be able to degrade gracefully in the absence of style and script.
[ July 18, 2008: Message edited by: Bear Bibeault ]
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64990
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Pauline McNamara:
Elliotte or Bear (anyone, actually), do you think you could explain briefly what you mean by linearity?
In essence, writing the page content in a top-down fashion such that, in the absence of CSS or script, the page still reads well and makes sense.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic