my dog learned polymorphism*
The moose likes HTML, CSS and JavaScript and the fly likes Supporting Different Screen Resolution Sizes Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Supporting Different Screen Resolution Sizes" Watch "Supporting Different Screen Resolution Sizes" New topic
Author

Supporting Different Screen Resolution Sizes

Paul Michael
Ranch Hand

Joined: Jul 02, 2001
Posts: 697
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!


SCJP 1.2 (89%), SCWCD 1.3 (94%), IBM 486 (90%), SCJA Beta (96%), SCEA (91% / 77%), SCEA 5 P1 (77%), SCBCD 5 (85%)
Pauline McNamara
Sheriff

Joined: Jan 19, 2001
Posts: 4012
    
    6
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

Joined: Jan 10, 2002
Posts: 61094
    
  66

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Paul Michael
Ranch Hand

Joined: Jul 02, 2001
Posts: 697
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

Joined: Feb 25, 2004
Posts: 91
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.


Elliotte Rusty Harold<br />Author of <a href="http://cafe.elharo.com/web/refactoring-html/" target="_blank" rel="nofollow">Refactoring HTML</a>
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61094
    
  66

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

Joined: Jul 02, 2001
Posts: 697
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

Joined: Feb 25, 2004
Posts: 91
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

Joined: Jan 10, 2002
Posts: 61094
    
  66

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

Joined: Feb 25, 2004
Posts: 91
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

Joined: Jan 19, 2001
Posts: 4012
    
    6
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

Joined: Jan 10, 2002
Posts: 61094
    
  66

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

Joined: Jan 10, 2002
Posts: 61094
    
  66

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.
 
Don't get me started about those stupid light bulbs.
 
subject: Supporting Different Screen Resolution Sizes