Skip navigation
Currently Being Moderated

What is the standard size for website??

Jul 25, 2009 2:08 AM

What is the standard size for a website? height x width

 

I would like to create a website that is a good width, and have the leangth expand as needed depending on the content, which might expand in the future...

 

Some sizes I have worked with in the past have been 760x360 (pixels) and 800x600 (height x width), yet this was awhile ago..

 
Replies
  • Currently Being Moderated
    Jul 25, 2009 2:14 AM   in reply to DRivera

    DRivera wrote:

     

    What is the standard size for a website? height x width

    There isn't one. People have different size monitors. Even those with large monitors don't always browse full screen. See this page that was written many years ago, but which is still relevant today: http://www.thepattysite.com/window_sizes1.cfm.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2009 7:26 AM   in reply to DRivera

    It all depends, I use CSS so i make the width 800px so the whole site fits all types of moniter, I never specify a height this way my site auto expands to accomodate whatever is placed within.  So I would say the standard width would be 800 px.

     

    http://www.helpvid.net

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2009 7:57 AM   in reply to DRivera

    As David says, it all depends on your viewing audience.

     

    Have a look at the stats for the site (if you have any at this point).  What type of people are going to be viewing the site.  If it's a more technical audience, then they probably have pretty wide monitors, but it's a 'mom & pop' type site, then they may still be using small monitors.

     

    These days I've gone from 780 width (for 800px wide window size) to 980px width to cater for at least 1024 window size. As for height, don't declare a  height at all.  This will allow the content to expand vertically as needed regardless of window size.

     

     

     

    --

    Nadia

    Adobe® Community Expert : Dreamweaver

     

    Unique CSS Templates |Tutorials |SEO Articles

    http://www.DreamweaverResources.com

    http://csstemplates.com.au/

    --------------------------------------------------

    http://twitter.com/nadiap

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2009 10:44 AM   in reply to DRivera

    Know your audience. If everyone is using old computers, the monitors might be 15". If everyone is a digital designer, the monitors might be 22" or more.

     

    If you want a scan of how many of what size monitor is still in use, take a look at http://www.w3schools.com/browsers/default.asp where you can find statistics on displays as well as on who is using which browser.

     

    You might consider making your file look great in a smaller monitor but stretch (through liquid CSS design) to fill larger monitors, or to float and center on any monitor. Or use Adobe Spry widgets to make an "Ajax" layout that appears to change only the data/content area and not the whole screen (accordions, sliding panels, spry data objects, etc.)

     

    Test your site on as many different configurations as you can get hold of.

     

    If you are working in Dreamweaver, set your Window to Cascade files. Then you can read off the size of the window in the right end of the tag selector bar. Adjust the window manually to the size you want to work toward, and you have an on-the-job reference for what fits and what doesn't.

     

    Viewport size is one of the ongoing challenges of design that can't be nailed down...

     

    Beth

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2009 10:49 PM   in reply to DRivera

    This is a good article to bookmark as well if you're going the liquid layout route:

     

    Liquid layouts the easy way

    http://www.maxdesign.com.au/presentation/liquid/

     

    and from w3org:

    http://www.w3.org/TR/WCAG20-CSS-TECHS/G146.html

     

    Good luck and I like the fact you want to keep learning - keep at it and you'll get there  :-)

     

     

     

     

    ---

    Nadia

    Adobe® Community Expert : Dreamweaver

     

    Unique CSS Templates |Tutorials |SEO Articles

    http://www.DreamweaverResources.com

    http://csstemplates.com.au/

    --------------------------------------------------

    http://twitter.com/nadiap

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2009 11:12 PM   in reply to Nadia-P

    I am designing two pages (in photoshop) that will be used as templates for a website..

     

    I went with 960 pixels for the width of the site, and I am leaning towards keeping it liquid..

     

    I guess I will cross that bridge when I get to it..

    Please be aware that you could be driving towards a big road-block there. Of course sketch out your design in Photoshop if you want, but please don't think you can just export the slices and achieve a liquid layout. You are also going to need lots of live text on your page, not just 'text' in PS images.

     

    I'd advise, stop and read those pages and tutorials that were just linked to before you go further down this road.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2013 9:20 PM   in reply to DRivera

    As people are noting, there is no 'standard'. I like to go with 960 pixels wide. Height is not as important. Just make sure you have some valid content viable for someone with a 1024x768 screen. So, be careful not to make your header overly big.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2013 7:48 PM   in reply to DRivera

    There's definitely a standard for fixed-width or max-width sites, around 960 +/- 20px

     

    look at almost all major sites, cnn, b&h, cnet, bbc, etc. etc they're all close to that

     

    https://addons.mozilla.org/en-us/firefox/addon/measureit/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2013 9:36 PM   in reply to Scooby007

    "There's definitely a standard for fixed-width or max-width sites, around 960 +/- 20px"

     

    No... that's NOT a standard. It's a common choice.

     

    A standard is like a mandate. CD's are made to a standard size. Paper is made to a standard (regular 8.5X11 or legal 8.5X14) size. Nuts, bolts, screws and nails are made to standard sizes. That's so that they work in the application(s) they were intended to, be it a CD/DVD player/recorder, a printer, or an automobile (or whatever).

     

    There is NO SUCH THING as a webpage width standard so they all fit into the internet. For a very long time (in computer time), the vast majority of viewports were CRT 13" (1024X768) monitors. Most of the "major" websites were designed to fit that viewport. Others followed suit and many who design sites today choose to follow suit, because it makes sense. Not everyone has a 24" wide screen on their desk.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2013 10:40 PM   in reply to Mike M

    semantics, a standard in this context is what is most commnly done within a discpline. Standard size for mainstream websites with a fixed or max width, in this day and age, is 960px +/- 20px, countless websites bear out this fact

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2013 11:16 PM   in reply to Scooby007

    Final salvo for the peeing match. (at least that I'll deliver)

     

    Webster's defines a standard as "something set up and established by authority as a rule for the measure of quantity, weight, extent, value, or quality".

    It also says "something established by authority, custom, or general consent as a model or example" but then follows it up with "criterion <quite slow by today's standards>"

     

    If everyone at Starbucks one morning gets a 24oz latté with vanilla mocha creamer and no lid..... IT'S NOT A STANDARD. IT doesn't mean that everyone from then on MUST get a 24oz latté with vanilla mocha creamer and no lid.

     

    That's the difference between a standard, and a common choice.

     

    Windows 7 MUST have at least 256mb of RAM to function at the most basic level. THAT'S a standard.

    Adobe Premiere Pro CS5 MUST have a 64bit operating system in order to install. THAT'S a standard.

    Photoshop MUST have a minimum 1024 X 768 resolution monitor or it WON'T function. THAT'S a standard.

    In order to become a commissioned officer in the military you MUST have a college degree. THAT'S a standard.

     

    Websites come in all shapes and sizes. There is no standard except by some people's obscure definition of the word.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2013 11:27 PM   in reply to Mike M

    the spirit and substance of the OPs question was - I'm making a site, what's the standard width these days. The best gauge for this is what is pretty much every major website on Earth doing. and that is 960px +/- 20px. I think anything else is semantics and beside the point, but whatever. I think if people are going to tell him there is no standard, you can make it 700 or even 1200 (not saying that has necessarily been the case here so far), that's really bad advice  in the context of his question

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2013 2:50 PM   in reply to Scooby007

    Forgive me for saying this, but I really think the 960 layout is way passed its prime.  A one-size fits all approach simply doesn't cut it anymore.  We have far too many devices to consider now.   If you examine the smarter web sites, you'll see that they have already embraced the Adaptive or Responsive Web Design approach.

     

    Smashing Magazine

    http://www.smashingmagazine.com/

     

    Project Seven

    http://www.projectseven.com/

     

    CSS Tricks

    http://css-tricks.com/

     

    Disney

    http://disney.com/

     

    A List Apart

    http://alistapart.com/article/designing-for-breakpoints

     

    Adobe

    http://html.adobe.com/

     

    BBC News Mobile Site (if you're not on a mobile device, you won't see it)

    http://www.bbc.co.uk/news/

     

    And the list goes on and on...

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 11, 2013 8:29 PM   in reply to Nancy O.

    Nancy,

     

    Thanks for providing thoughtful diverse links that you provided.

     

    Well, as for other posters posted with interesting perspectives, facts, reasons and all. All are valid.

     

    At one point, I agree with David Powers about his comment about there is no such a web standard for web browsers.

     

    I am certain that David knows that lot of web standard has transformed from glory days of introduction of HTML and CSS back in 1990s. There isn't such a standard for smartphone or tablet in those days.

     

    Lot has changed from 1990s to now, so in case of David Power's comment can be true. But if we view 1200 pixel of website loaded with huge image files onto smartphone while using mobile cellular access, is this a good comment to support this perspective. I don't think so.

     

    Unfortunately, we don't have total control of web users these days where many of them have the luxury of having access to smartphone, tablet or desktop computer as well as laptop. The web trend shows that more and more browsing trend is widely used by smartphone and tablet as opposed to desktop and laptop.

     

    The one Nancy's diverse web links, this provide more thoughtful perspective about mobile first concept and the whole nine yards. This means more thoughtful consideration for designing website that "fit" all kinds regardless of one device. Again, there are many different smartphone sizes, tablet size, so on.

     

    It would be wise to take a good hard look at all options, then test the water to see if the water is fine, then jump in. I think this analogy holds very true I'd web standard-ism.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 11, 2013 8:39 PM   in reply to David_Powers

    Hi David,

     

    I have this problem, though. What you said is all true. But, unfortunately, I wholeheartedly disagree. Lot had changed from those days of "old school" thinking of old HTML and CSS coded in those days back in 1990s.

     

    In fairness, we have to adapt and adopt new thinking with more forward-thinking in designing more user-friendly that is more accessible to any device, whether if it is a smartphone, or tablet, or laptop, or desktop with two or three extra large elegant monitors. We don't have control over this but if we do this way... Which means more work in designing and code in HTML5 and CSS3 and some awesome javascript scripts, so on.

     

    But you are correct, though. In other words, you should be a bit more clear about what you meant... Just because... Lot of things has changed since 1990s to now and next 10 years from now.

     

    Best, Brian

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2013 11:09 AM   in reply to CaramelMacchiato

    For a good (and current) perspective, check out LukeW's presentations on this subject:

     

    http://www.lukew.com/presos/

     

    "Mobile First" and "Multi-device Web Design" are quite interesting.

     

    In a nutshell: think content design, and leave the screen width paradigm where it belongs: in the past.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2013 12:57 PM   in reply to Herbert2001

    Herbert2001,

     

    Thanks for sharing. I had bookmark Luke's website for reference.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2013 5:30 PM   in reply to Nancy O.

    Nancy,

     

    I bet for the majority of web designers when they are designing their website, they do not dare to look up to BBC, Disney or Smashing Magazine for inspiration. They have a very different mindset from those big names when it comes to make a website work.

     

    Joy 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points