SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What resolution should I design for.

    I'm working on an online magazine website.
    What resolution should I use? I went to several websites.
    People's magazine, MSNBC and US Weekly. All these websites appeared to have a Horizontal scroll bar when viewed at 800X600 but works fine at hiher resolution.

    So should I be concern about the people using 800X600 resolution?
    I also understand that the MIN Width/Max Width is not fully supported by all browser.

    What route should I take, I have been designing fixed resolution websites but with this new project it seem I have to go "Liquid."

    Thanks everyone.

    IC

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A lot of people still use 800px wide browsers - I see it all the time with my clients (even on huge wide screens!!). Also you can never know how wide people will actually have their browser window - whatever their actual screen settings are so yes I'd still worry about the narrower screen widths.

    Personally I now tend to go for a min/max width range for websites with the sections within that using % for widths. I usually have a max width of about 1100px sometimes a little more or less and then a min-width of 760px to prevent scrollbars at 800px wide screens.

    Although min/max widths don't by themselves work for older versions of IE you can use an expression to do the same job for those browsers.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you want it to be printable then it needs to fit within about 750 pixels. If you allow it to be flexible and go wider on the screen that's up to you.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Zealot LilyGrace's Avatar
    Join Date
    Nov 2008
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If you want it to be printable then it needs to fit within about 750 pixels. If you allow it to be flexible and go wider on the screen that's up to you.
    felgall is absolutely correct. 750 is the perfect width.

    What you want to do is fit all the important stuff within that 750, but that does not mean you can't put another column of no so important stuff in the 750 to 1000 range.
    Color Yourself Pink at Pink Boutique!
    I have a love of pink and my site sells pink accessories.
    We have cute pink purses, pink jewelry, pink watches,
    and some pretty cool pink stuff.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also go for the 750px minimum. My maximum is around 1230px or so. Anything between those two takes up as much real estate as the screen allows.

  6. #6
    SitePoint Enthusiast BogusRed's Avatar
    Join Date
    Dec 2008
    Location
    San Jose, CA, USA
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need to decide this sort of thing based on your audience.

    I would recommend starting with 750 or a flex width and install Google Analytics on the site. Google Analytics will tell you what percentage of your viewers are using what size resolutions. For example one of my websites shows 4% of my users have 800x600 resolution.

    Also consider if your website will be trafficked by mobile users.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thing is though resolution is meaningless. You could have someone with a 1280x968 resolution (or thereabouts) and still be running the browser at 800x600. In fact, I tend to run mine at 1024x768 so I can see other apps (like Trillian) while looking at the browser and I have a higher "screen resolution" than many people.

  8. #8
    SitePoint Enthusiast BogusRed's Avatar
    Join Date
    Dec 2008
    Location
    San Jose, CA, USA
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True but at that point if a 1024x768 user has their browser set to 800x600 and they visit a site designed for a larger screen, they will most likely maximize it while they're on that particular site.

    And having some metrics on this is better than not having any.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or they could just leave it (let's say the right sidebar had nothing but ads they don't want to look at anyway), or the right sidebar could employ a "float drop" that would push it below the main content for those users.

    It's all about giving people what they want.

  10. #10
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Since it's an online magazine, you should consider column width, as very long lines will impair readabilty. I found an article for you: http://desktoppub.about.com/cs/finet...ine_length.htm
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  11. #11
    SitePoint Evangelist jonbey's Avatar
    Join Date
    May 2007
    Posts
    507
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't like liquid, messes up too often. I prefer 1024px wide.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jonbey View Post
    I don't like liquid, messes up too often. I prefer 1024px wide.
    1024px messes up 100% of the time when you print the page. It also messes up 100% of the time when your visitor has their browser open to less than 1030px width. That leaves very few circumstances where it will not mess up. If you are going for a fixed width then 750px is the widest you can go without it messing up more often than not.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I am with Mr. Felgall.
    I think Mr.Felgall Is right in this topic, And his answers is also quit good from other replier.
    And if you want get more information. So, I knew I site who give information about this type of matter.
    Thanks

  14. #14
    SitePoint Enthusiast D3niss3's Avatar
    Join Date
    Sep 2008
    Location
    RP
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    ... If you are going for a fixed width then 750px is the widest you can go without it messing up more often than not.
    Absolutely right! Hence, printer friendly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •