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..
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
...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.
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
Copy link to clipboard
Copied
For a good (and current) perspective, check out LukeW's presentations on this subject:
"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.
Copy link to clipboard
Copied
Herbert2001,
Thanks for sharing. I had bookmark Luke's website for reference.
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
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
--------------------------------------------------
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
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!!
Copy link to clipboard
Copied
This is a good article to bookmark as well if you're going the liquid layout route:
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
--------------------------------------------------
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.
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...
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.
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
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.
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
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.
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
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
CSS Tricks
Disney
A List Apart
http://alistapart.com/article/designing-for-breakpoints
Adobe
BBC News Mobile Site (if you're not on a mobile device, you won't see it)
And the list goes on and on...
Nancy O.
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.
Copy link to clipboard
Copied
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