What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?
How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?
An answer with an explanation rather than just the size would be greatly appreciated.
the most grids use a width of 960px. (When the design has a fixed width).
When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106
Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)
I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/
Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/
Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.
960px width is a good standard, as others have already elaborated on.
However, one should keep in mind that websites are viewed on a lot more than just desktops these days, so the answer could vary based on what the site is being styled for. For example, 960px would be a poor width for a mobile stylesheet.
One resource that could help you is www.resizemybrowser.com. (There is a similar tool built into Firebug.)
At the end of the day, I think 960px is a good standard, but really, "it depends". :)
960 is a standard for fixed-width websites. It is to ensure that 1024x768 resolution will pick it up easily. As for height - it does not really matter.
In general, for a fixed-width website, that is meant to be read on a computer screen, nowadays, I'd say around 1000px (because there's no 800*600 resolution anymore and the least you can find is 1024*768).
You should really aim for an extensible design (generally harder to do though).
Out of experience, for the web i would say a width greater than 850 and less than 1000 px preferably in the 900's and a height of around 750 px, but bear in mind that the height would be variable in case of dynamic content. so the height could be set to 100% or auto.
and best to align the website in the center, via the css property margin: 0 auto;
The most common size is between 900-1000 pixels there are some good sources for screen size useage which most people tend to desgin for the largest group. mostly its assumed anyone with a 800 by 600 screen wont want to be doing much business. ie strapped for cash (big generalisation)
I won't consider only the desktop monitor resolutions. Nowadays you can browse websites on almost any device, and is fairly common for people to browse also with their mobile phones and tablet PC, so you really should consider them both.
This could result in a different site version for different devices, or a site layout that is ableto accomodate based on different sizes. This is something you have to consider when first thinking about the website you are planning to do, since not every website is suited to have a layout of this type.
An adaptable layout has the added benefits that it will be good even if new devices with custom (non standard) resolutions came out, you won't have to worry about checking it in those new devices because it will fit ok (if the layout was done right).
Anyway my standard minimun width is still 960px for desktop monitors, and for an adaptable layout I usually choose a max-width for really huge monitors (think about viewing a site which extends for the entire monitor width on a 2500x1600 monitor... gosh) of about 1200px, and a 100% width if the browser size is less than that, to allow the website to fit good everywhere.
Related
With every responsive website, there's a certain point where it would be unreasonable to allow the width of html to shrink any further (on a computer screen, not mobile or tablet).
Is there a certain standard number in pixels that web developers use as the smallest possible computer screen width, which the html shouldn't be allowed to shrink below?
In other words, it would be the min-width of html, if the width is 100%.
Try and avoid any limits on the responsive design, if you find things to crush up find ways to minimize the amount of data on screen either by removing or collapsing content.
When looking for a min-width, we're looking for the smallest devices we're likely to encounter. So, unless we're targeting smartwatches (as #Tammo) said, in which case we'll be creating an entirely different interface optimized for the smartwatch, the devices we'll likely be looking at are smartphones.
Android: Android compatibility guidelines mean that, at minimum, any Android phone will be at least 240px wide (this question lists those guidelines and a few, relatively rare examples). Min: 240px
iPhone Even the first iPhone was 320px wide, and they've only increased in resolution since then. Min: 320px
Considering those two minimum resolutions, the smallest resolution you're ever likely to see is 240px, though this is so rare that 320px is much more likely to be a better min-width candidate, as it gives more layout options to design a better site.
I have started learning some web development lately and have noticed lot's of sites just use Pixel dimension to specify sizes of thins as well as the overall size of the body.
This seems counter intuitive to me (maybe because I am used to programing for Android)
But this could make the website a pain to view on lower res screens and less useful on higher end screens.
Is this really the way things are done? Does this not cause to much problems?
Thanks.
EDIT: how would one go about implementing a less fixed size site?
There are pros and cons to doing things like this.
Pros: It allows you to have full control over where everything is placed as sometimes with relative sizing things will move in unexpected ways.
Cons: Well you mentioned them! Different size screens will give the site a different look.
But overall to some people it is more important that everything remains in the right place than that everything looks great on all screen sizes. Ultimately it depends on the preference of the designer. Also remember that uses on higher resolution screens can zoom in and those on lower resolutions can zoom out!
Peaces and pears.
Each to their own, so long as they are consistant and know what they are doing that is all that matters.
I have recently starting using grid templating which uses pixel dimensions for containers and I really enjoy it. Considering that 960.gs (960px) is an accepted size width for a website, if you know that you do not want to develop a fluid template, then why not use fixed width pixels.
If I am going to have a mobile version of my phone, then I serve the mobile version not my 960px website, and in any case, most phones intuitively display websites anyway. (At least the latest phones, obviously not the old Nokia 8210's ;).
I am creating a website and would like to get the opinion of some of the more experienced web developers.
How does one create a website where the element style attributes (padding, margin, height, width, etc) are appropriate for the users screen resolution?
With CSS i get to choose one value and that is the final value which will be displayed for all users, regardless of their browsing resolution.
For example, say i would like an image to be displayed 10% to the left of its container i would do the following: padding-left: 15%; Now, that may work fine for some resolutions but for others i may need that value to be higher.
What do more experienced web developers do in regards to screen resolution differences?
It sounds like your goal is to have your layout look literally the same at any resolution, which isn't really practical. Remember that images scale poorly! What most designers do is use percentages where possible to allow the layout to "flow" to fit most resolutions while remaining attractive.
If you analyze (for example) Stack Overflow. you'll see that it is a fixed-width set that is itself centered in the browser. Apple does the same thing, with some art elements that are displayed gracefully at any window width. It's an artistic problem, and I'm not sure the answer can be given with any more clarity than that.
It depends entirely on your design goals.
Most designers use fixed-width areas and let it center on the screen.
In some cases you can use CSS media-queries to apply specific rules to different types and sizes of screens (browser support is limited).
You can use min/max-width to handle many cases of content growing too large or small - but there is no equivalent for margins.
SVG graphics can be used to provide scalable images that look good at any resolution.
Some companies provide an entirely separate site for mobile users.
There are other tips and tricks but in general most designers avoid these issues by using fixed-width layouts - even though that's not always ideal.
I usually define those styles in em units, which are relative to the font size. So, increasing the text size increases padding & margins proportionately.
What is more popular these days - CSS fixed page width or flexible, how are the pages built in terms of CSS views layouts
what is most popular page resolution - 970 or 1024 px
Make it flexible and save yourself the headaches in the future. Pick a minimum size you're going to support, and make sure it scales.
If you make it fixed, it only looks good for a fraction of the people.
And, just because a person has a high resolution, doesn't mean the browser window will be maximized.
I think you'll find that if a site is fixed, it will most likely be designed for a screen width of 1024px, meaning the width of the contain will be around 960px.
This article does a good job summerizing some pros and cons of both approaches: Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
.
Definitely make it fixed. As a 1920x1200 user, 100% width pages hurt my eyes badly - I'm talking to you wikipedia.
Notable exceptions are igoogle, where you really need all the screen space you can have.
There is a reason most sites go for fixed layout. You should really do the same unless you have a very good reason not to.
Regarding popular resolutions, I would suggest examining your site with Google Browser Size.
Know our audience is better.
Global Web Stats
Browser Display Statistics
I choose 960 with fixed layout
I think this is a bit of a subjective question because I doubt most of us here will know what's trully more popular (or where those statistics might be).
Stack Overflow, for example, uses a fixed layout and most of the corporate sites I've worked on have been fixed width also.
My personal preference is for fixed layout. Partly because it keeps everything contained in a way I find preferable and partly because it means I can choose the page width myself based on my own preference in the moment (I tend to use CTRL +/- a lot daily).
As for what you should do, it depends on what you want to acheive, what you prefer, what your customers/users may find more usable etc.
I am developing a website.
I heard that it is best to have a website with a fixed width.
What possibly could be the best fixed width I can allocate to my website ?
As Yahoo says:
* #doc - 750px centered (good for 800x600)
* #doc2 - 950px centered (good for 1024x768)
* #doc3 - 100% fluid (good for everybody)
* #doc4 - 974px fluid (good for 1024x768)
I recommend using yahoo styles and follow their advice.
Another helpful resource is Display Browser Statisics from w3schools.com.
While I agree to a point with those who say variable width has its benefits, I find that unless there is significant content, when a site stretches the content winds up looking pretty sparse as it's stretched out to wider widths. It's for this reason alone that many of my client request fixed-width skins. Keeping a site narrow can help frame the content and maintain a more 'constant' appearance (when that's a concern). Usually, when designing fixed width sites I use the stats over at the W3C for the most popular resolutions. Currently, I've been designing with ~980px wide, this allows for 1028 wide, with scroll bars and some background to still be seen. However, I am noticing a shift in statistics towards wider resolutions as more people adopt wide screen monitors.
However, it really does come down to what you feel is a good fit for the site, content and client.
960 Grid System argues that 960 pixels is a wise choice since the number has so many divisors. I am not sure that I agree, but they sure have an impressive list of demo web pages on their site.
You can find a link to a fluid alternative at the bottom of the page.
In my experience the fixed vs. fluid debate seems to be a designer vs. programmer discussion. Designers generally prefer a fixed layout because that will give them more control, while programmers generally prefer a fluid layout because that will let them choose the width they want, by setting the width of the browser window.
Ideally your website should scale with the width of the screen resolution. But that is difficult in most of the cases. Since most of the users still use 1024x768 resolution, so any width such that all the content appears on such a screen without needing to scroll is a good width.
Where did you hear that? A website with a fixed width comes with the problem that it (most times) only looks good where the screen suits the width. Think of a website with a fixed width of 768px, how would that page look on a resolution of 1920x1200?
You should develop websites that scale with the browsers resolution.
Here is a little hack that might come in handy. On the larger screens I find that not having a 100% width is good as the amount of horizontal eye scrolling is more than what is comfortable. About an A4 or foolscap page is what people like their content width to be.
However on very small screens if you set your width to 70% or 80% you will be wasting valuable screen resolution. So workout what is the smallest width in pixels that you will allow - for argument's sake let's say it is 800px.
Create a 1x1 pixel image the same color as your background. Then put this image into your content pane (div, table whatever you are using for layout) but set width="800px" height="1px", this will force your content to always be at least 800px wide but not cover the fullscreen on resolutions that have width greater than 800px.
As I said it's hack, and it may or may not be exactly what you were looking for.
Because websites can appear in any number of browsers, on any number of devices, at any number of resolutions, (phone, netbook or cinema screen?) a fixed width is a kludge. Kludges can work, but it would be better to design for a purpose, instead of deciding on some arbitrary rules and then sticking to them without really knowing why.
Don't just go with 1024px because most people can handle that in most cases. Know what you're trying to achieve, and use that to inform your decision.
So, who're you targetting, and what do you want them to do?
This kind of question really has to do with theming/templating and if you are using a CMS like drupal (and many others) can be flexibly handled to provide you anything you want. Fixed or fluid - whatever. You even can let your users decide.