• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

What is the standard size for website??

Guest
Jul 25, 2009 Jul 25, 2009

Copy link to clipboard

Copied

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..

TOPICS
How to

Views

211.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Guru , Jul 25, 2009 Jul 25, 2009

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

...

Votes

Translate

Translate
LEGEND ,
Jul 25, 2009 Jul 25, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 11, 2013 Jul 11, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jul 12, 2013 Jul 12, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 12, 2013 Jul 12, 2013

Copy link to clipboard

Copied

Herbert2001,

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 25, 2009 Jul 25, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Jul 25, 2009 Jul 25, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Jul 25, 2009 Jul 25, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jul 26, 2009 Jul 26, 2009

Copy link to clipboard

Copied

Thank you all, for all the great responses!

I feel like a human spunge because I want to learn as much as I can..

I am still in the creative process, 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..

I have either read the articles (Dave) or saved your link for future use (Mark).

I appreciate the feedback people!! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Jul 26, 2009 Jul 26, 2009

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 26, 2009 Jul 26, 2009

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jul 27, 2009 Jul 27, 2009

Copy link to clipboard

Copied

Hey thanks for the Links Nadia the material seems really helpful!

Kath-H, I know that I will need to add live text which I was going to add in DW, I have added text in PS for layout purposes.

I was planning on slicing and exporting the design from Fireworks to DW, and then plugging to proper code... This is is my intention...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 03, 2013 May 03, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 05, 2013 Jun 05, 2013

Copy link to clipboard

Copied

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/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 05, 2013 Jun 05, 2013

Copy link to clipboard

Copied

"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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 05, 2013 Jun 05, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 05, 2013 Jun 05, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 05, 2013 Jun 05, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 06, 2013 Jun 06, 2013

Copy link to clipboard

Copied

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 11, 2013 Jul 11, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 14, 2013 Aug 14, 2013

Copy link to clipboard

Copied

LATEST

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines