SitePoint Sponsor

User Tag List

Page 5 of 5 FirstFirst 12345
Results 101 to 115 of 115
  1. #101
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ryum View Post
    The general rule as far as I know, is that a website should be viewable at a 960px width (or viewport). But as said earlier there are different ways of defining width. Percentages are best, but it's hard to design for and make it work across all devices. I always go for the 960px approach, but set this to work as a min-width, so that if a user has a wider screen, margins, padding and so on will adapt to this.
    One thing to be careful of is that a 960px screen does not mean you have 960px to play with. For example, a common screen width is now 1920px. A lot of people will have two windows side-by-side, so each window is 960px wide. But that 960px has to include the browser edge/border and the scrollbar – you may only have 940px of actual screen real estate to use. So your carefully crafted site that is exactly 960px wide is now too wide, the edge disappears off the side and your reader has The Dreaded Horizontal Scrollbar.

    That's why 960 is a bad width to work to.

  2. #102
    SitePoint Member Ryum's Avatar
    Join Date
    Jul 2012
    Location
    Oslo, Norway
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    One thing to be careful of is that a 960px screen does not mean you have 960px to play with. For example, a common screen width is now 1920px. A lot of people will have two windows side-by-side, so each window is 960px wide. But that 960px has to include the browser edge/border and the scrollbar – you may only have 940px of actual screen real estate to use. So your carefully crafted site that is exactly 960px wide is now too wide, the edge disappears off the side and your reader has The Dreaded Horizontal Scrollbar.

    That's why 960 is a bad width to work to.
    I've never thought about that! It's an interesting way to look at it. But what does a user running two windows side by side expect from a website? I tested the "setup" myself, and discovered that most major newspapers, company websites, YouTube, Facebook and even Google had a horizontal scrollbar. The only website capable of viewing it this way is sitepoint.com (although I didn't check a lot of sites). So I would assume the "screen splitters" expects horizontal scrollbars. Now consider the number of users not splitting their screen, and the standard resolutions today. Is it worth a 20px sacrifice?

  3. #103
    SitePoint Enthusiast cgCody's Avatar
    Join Date
    Jul 2012
    Location
    Arizona, US
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There may be a lot of websites still using 960, but we can't allow ourselves to get stuck in the past because "others are doing it". 960px static sites are on their way out the door sooner or later. The site I'm currently working on is a 60em (960px at 16px base font) design, with media query break points to collapse the columns for smaller screens. I get to have my 960 cake, and smaller screens, and browsers with large text get to eat it, too.

  4. #104
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Ryum, I agree with you completely. The majority of web site visiters today use a screen resolution larger than 960px wide, and 960px 'is' the official standard for many Web Development teams in the industry. Most well-known web sites use this standard or something close to it, usually not exceeding 1000px, including Apple and others. They may use CSS or JavaScript if desired to get the web site to look nicer on mobile and tablet devices, but this is under their own discretion and is generally done by a separate team in a company setting. For anyone using a smaller computer screen, such as 800x600, they are out of luck and will have to resort to zooming out to view the whole page. I don't see a smaller resolution becoming an official standard for Web Development teams anytime soon.

  5. #105
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,315
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Well after carefully reading all your comments, and there were so many excellent ones, I finally decided to go ahead with main Table fixed width of 950 and then then inner Tables set at 100%.

    Now the good thing is I generate all the page widths via Php so by changing one file all of the site was instantly set to new width.
    And what do you do when you discover that 20% of your readers are using mobile devices? Wouldn't responsive web design be best?

  6. #106
    SitePoint Member Ryum's Avatar
    Join Date
    Jul 2012
    Location
    Oslo, Norway
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    And what do you do when you discover that 20% of your readers are using mobile devices? Wouldn't responsive web design be best?
    Of course a website able to fit any device is the best thing to make, but this involves putting a lot more work into it, and also restricts your options while designing the site. When you say mobile devices, does this include tablets? Some tablets, like the new iPad, supports desktops resolutions with no problems, and are mostly able to interact with through a standard web interface. I would say this leaves us with iPhone, Android and Windows Phone users on small to medium displays.

    As a designer, you should do some research and analysis of the potential user group and figure out if they are typical phone users, if they are likely to visit the site and so on. You should also think about the product you're making/marketing: Is it important for this to be easily accessible on the go?

    If your results/thoughts show that mobile access is indeed important, then go ahead and make it responsive. If not, I would keep it at 960px for now. Saves time and gives you 960px of space to play on

  7. #107
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Washington
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A 960px container div is ideal if you want to use a grid with 12 or 16 columns to have a proportionate layout. 960px is the most commonly used container layout. 980px is also used by many companies and gives a slightly larger space to show your content.
    If you want to have a responsive layout, that is adaptable for any display size, then a fluid (percentage based) layout ideal.
    Check out CSS frameworks such as Twitters Bootstrap. They use percentages for the layout

  8. #108
    Non-Member
    Join Date
    Aug 2012
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    write your page based on your visitors.
    for 1024x768 resolution, use a width less than 980 pixels
    for 800x600 resolution, use a width less than 760 pixels
    for printing, use a width less than 560 pixels

  9. #109
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by MrThind View Post
    write your page based on your visitors.
    for 1024x768 resolution, use a width less than 980 pixels
    for 800x600 resolution, use a width less than 760 pixels
    for printing, use a width less than 560 pixels
    DON'T set a width for printing, and even if you do, DON'T set it in pixels. Pixels are a screen measurement and make no sense in a printed media. You can set a width in centimetres or inches, but make sure you allow plenty of space for people who have wider margins on their printers, and remember that much of the world uses A4 paper, which is narrower than US Letter. Far better to just set a width of 100% for print (if you even need to do that!) and allow the design to fill the paper precisely without having to guess at how much space you have to print on.

  10. #110
    Non-Member
    Join Date
    Aug 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are going to make a fluid width website then width=100% is great but in fixed width websites its not good as most of people are using "Wide Screens" like LCD and LED type. In this case you can use website body width=100% and website wrapper width=960px is a standard with margin:0 auto to make this centered website.

  11. #111
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ferrelm3 View Post
    A 960px container div is ideal if you want to use a grid with 12 or 16 columns to have a proportionate layout. 960px is the most commonly used container layout. 980px is also used by many companies and gives a slightly larger space to show your content.
    If you want to have a responsive layout, that is adaptable for any display size, then a fluid (percentage based) layout ideal.
    Check out CSS frameworks such as Twitters Bootstrap. They use percentages for the layout
    That's true. If I remember it right, 960px gives a little more flexibility with ratios (more numbers you can divide by) and thus gives you more options for layouts than 980px, which is the primary reason I choose to use it.

  12. #112
    SitePoint Member littlemisschic's Avatar
    Join Date
    Jul 2012
    Location
    pittsburg
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    most new computers have a widescreen display so the bigger the better as you want to be able to view it easily and make use of your screen size, however i do have my site at 95% as just a bit of white space isn't so bad and for me i think it makes my site look more professional. It has been suggested to me to make a background design for the white space but my fear is that it might look a bit like twitter or you tube and lose its professional look. Honestly Every site is differant I think you should have a play about with it and see what you like best and what works better for the look you are trying to achieve!

  13. #113
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Miami, USA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think 12801024 because all key information visible above the fold so users can see it without scrolling, it's also easy to read read the text in various columns.

  14. #114
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,316
    Mentioned
    213 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by John Sammers View Post
    I think 12801024 because all key information visible above the fold so users can see it without scrolling, it's also easy to read read the text in various columns.
    Only if you have a monitor with that resolution. If you have a laptop or an old computer with a smaller monitor, you're going to end up possibly scrolling both horizontally and vertically at that resolution.

    Did you read the full thread before offering your opinion? The issues of different monitor sizes and resolutions have been covered several times over the last year.

    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  15. #115
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Your page needs to still work when displayed on mobile devices where the available width may be as little as 400.

    On computers your page needs to work at 940 as anyone with a screen more than double that width will generally use the window-arrow key combinations to open their applications up side by side.
    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="^$">


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
  •