PDA

View Full Version : Do you use a wide screen?



Spider
02-03-2011, 08:12 PM
Question for those of you who use a wide resolution screen - I am thinking of 1400px and wider but I am also interested in the views of those using any resolution over 1200px wide.

Do you surf the web at full width?

If you surf at a reduced window width, on average approximately what width is your surfing window?

When you do your work, whatever your work is, do you use full width or do you have several windows open at less than full width and, again, what is the average width of your windows when you use them? (No calculations necessary, just what width do you think you are using.)

I'm not looking for exact details, just to get a feel of what our surfing habits are.

Also, if you feel you are unusual in your screen use, please state what you use. I would also be interested in what you think the general public use.

Also, those of you who are website designers, what width do you generally design for- ie. what would be the optimum width for viewing your work?



TIA

vangogh
02-03-2011, 10:20 PM
I use a laptop an the resolution is 1440x900 and it's either 15.2 or 15.4 inches. I forget which. I usually don't open anything full width, but my browsers are usually open to fill most of the screen. It looks like I have them open to just under 1300px and almost all of the 900px. I usually have a about a half dozen programs that are always open, including 2 browsers. Then depending on what I'm working on I'll have additional programs open. Most of the programs sit in the background. When I open something specifically for work it sits on top most of the time, but most everything I do requires bouncing back and forth with one or both browsers.

I use keyboard shortcuts to switch between all open programs.

When designing I usually aim for 1024x768, which means a width a little lees. 960x is common because it works well with a variety of grid systems. I think 984px pushes things for 1024 (You have to account for the browser edge and the scrollbar). It depends on the design, but there are ways to make parts of your design seem to span from edge to edge so it still looks good at wider widths, even when the content portion of the site is still set for 1024.

Here's an example of having fixed content with a liquid background (http://www.sohtanaka.com/web-design/examples/liquid-backgrounds/). You can see the content itself fixed and centered at 960px, but because the background color stretches to the edges it gives the feeling of being a fluid design.

I also think about smaller resolutions as well. Not so much for desktops and laptops, but for tablets and phones. You can design in a way that a phone gets served a different stylesheet and have a different look or you can design in a flexible way so that parts of your page drop down and into place. When I designed my current site I tried the later approach. At lower resolutions the content on the side should drop down. I later installed a WordPress plugin that gives the site a different theme when viewed on a phone. I think I also use a bit of javascript to style things a little differently below a certain resolution. I wouldn't do it that way today.

We're back to there being no real idea width for designing sites. We're moving into a time where someone can view your site on any number of devices with any number of screen widths. The trick is going to be creating layouts that are flexible and can adapt. There are ways to server different stylesheets through something called css media queries and part of it is thinking about your layout and how it can respond to being viewed on different devices.

Spider
02-03-2011, 11:14 PM
Thanks, VG - most helpful.

vangogh
02-03-2011, 11:20 PM
Glad to help. By the way, not to force you into more css, but if you view the source code of the page I linked to you can see how the layout is set up. One of the ways I learned was seeing pages like that and looking at the code. It becomes one more layout you add to your toolbox. This one is a demo from a blog post that was written specifically to teach you this layout.

cbscreative
02-04-2011, 12:18 AM
Frederick, I'm pretty sure you already know my answer, but my 24" wide screen monitor is set to 1680 pixel width. Many users with monitors this large go with a 1920 width. My browser I use for surfing is not set at full screen. Doing that just makes things too wide. Even this forum becomes too difficult to read at full screen. I will estimate the width of the browser window to be somewhere around 1400 px.

I don't use multiple browser windows though, I use tabs.

I don't use my laptop very much, but when I do, it's a 15.4" wide screen set at 1280x800. For that, I do use a full screen browser window.

There's not much I could add to vangogh's comments about design though. For a while, it looked like things were getting somewhat standardized. Now we have the former standard monitors, wide screens, mobile devices, and all manner of Internet enabled screens. From a design perspective, it's gotten much more complicated to satisfy all the variables.

billbenson
02-04-2011, 12:53 AM
I haven't played much with putting stuff on the empty space on a wide screen. I have a big monitor (28") running 1900 x 1200 and I love the monitor. That's not a real wide aspect ratio. I do have a 24 inch wide screen monitor but don't like it. The only thing I do with the space to the right is put the program panel which is usually on the bottom over there. If you could put tool bars over there instead of eating up your versicle space at the top I'd do that. Get more on the page.

For multiple programs open at once I suspect multiple monitors or multiple desktops you can switch to on the same monitor would be the best. I haven't played much with that though.

vangogh
02-04-2011, 01:06 AM
Even this forum becomes too difficult to read at full screen

One reason I've never liked fully fluid sites. They become too difficult to use when your resolution gets past a certain point. One of these days I'll actually find the time to redesign this place and when I do we won't have a fully fluid layout.

@Bill. For $10 I can get an app that will turn my iPad into a second monitor. I haven't felt the need, but it would probably be useful for keeping either a program or two or some toolbars on the iPad.

jimr451
02-04-2011, 06:56 AM
I just got an external monitor to use as a second screen for my laptop. It's very helpful for having more workspace.

I agree that with all the devices out there, it's hard to design a site for everyone. I wonder if the trend will be designing 2 layouts - one for the average desktop / iPad screen, and one for mobile devices. Since many websites today are database driven, it's not that hard to have 2 layouts using the same content.

-Jim

AmyAllen
02-04-2011, 08:00 AM
I have a 17" laptop. Resolution: 1600x900.

I also have Windows 7 which has a feature where you can drag your browsers or programs to the side and it will automatically snap the size to the full length and half the width; or you can drag it to the top and it will give the program the full screen. I only mention this, because often when I am in a hurry - I use one of those options to widen a browser window vs. dragging each side out to a comfortable size.

I generally use the full height of my screen for applications and adjust the width.

For website design, I usually try to keep all the important content within an 800px width, though some of the design elements might be wider (up to 960ish).

vangogh
02-04-2011, 11:08 AM
I wonder if the trend will be designing 2 layouts - one for the average desktop / iPad screen, and one for mobile devices.

That's definitely one approach. Another is to make your site more responsive to different conditions. A couple of weeks ago Smashing Magazine posted about responsive web design (http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/). Part of that is making more of your design flexible. Images for example can be coded to vary size by using % instead of px.

I think it comes down to understanding what's going to happen as browsers resize, both up and down. The more you understand what will happen the more you can set limits where appropriate and allow for full flexibility. 2 layouts is certainly one approach, but I think there's going to be more to it.

Dan Furman
02-04-2011, 11:17 AM
I have a 23" widescreen monitor, and run 1920x1080. I fill the screen.

One thing I have noticed is web copy becomes very hard to read once you get past 80-100 characters a line or so. Now, we can get away with it here (and on most other forums) because of our mindset - we're here to read the forum, after all.

But a website that I'm coming to cold? More than 100 characters wide will hurt you. Nobody wants to read text that looks like that unless they have to (which is why when you ask people "does this 200 character width bother you", they'll say "no", because you asked them to read it.)

Spider
02-04-2011, 11:47 AM
Dan is approaching the point that this inquiry was all about. If one finds a website is too wide on one's monitor, surely one would reduce it to what is comfortable. I am adjusting websites all the time - increasing the size of too-small text, widening and narrowing a window, overlapping two narrower windows so I can refer to both -all to suit my own personal usage. I would imagine that most people do that, don't they?

You see, of late, my website has come under scrutiny in these forum (for which I most grateful) and the width has been a point of general disapproval. I like a fluid design so that my readers can adjust it to suit themselves. I find it most annoying when I visit a site with a fixed width that I cannot widen or narrow, with the text fixed so that it, too, cannot be adjusted. When that happens in combination, using the zoom function makes the text large enough to read comfortably, but now the fixed width is wider than my screen and I have to scroll sideways - a most annoying maneuver.

If I am to stay fluid, I need to find a general range that suits most people and have the site so those who are outside the normal viewing parameters can adjust to suit themselves. Aiming for 1100 px wide is right between the two most popular settings of my visitors browsers, 1024 and 1280px, which is what I have been doing.

Seems the results of this little survey confirm this as a reasonable approach.

vangogh
02-04-2011, 11:48 AM
About 50 - 65 characters is what's considered idea for reading. As your column of text gets wider you generally want the text itself to get larger so a line of text stays within that ideal range. You also w.ant to make sure there's a good amount of space between lines of text. Usually having the line-height somewhere between 1.2-1.5 times the font size works well

Spider
02-04-2011, 11:52 AM
How can you make the text grow larger as the browser gets wider?

cbscreative
02-04-2011, 01:28 PM
Images for example can be coded to vary size by using % instead of px.

I can't help but wonder how the nice folks over at MS will treat that in IE. IE has a nasty habit of distorting images if the actual image dimensions, and the HTML width and height attributes, do not match. I suspect a percentage value would cause distortion.

vangogh
02-04-2011, 01:28 PM
You wouldn't necessarily increase the text as the browser grows. It's more that you would keep the width of the site fixed so as the browser grows the line of text doesn't get longer. You'd more likely set the width of the design to expand and contract based on the size of the text so if someone increases the text size the width of the site will also increase.

What you're asking is possible, but I think it's usually done via javascript. At least no simple solution is popping into my head. That's the downside of fully fluid sites. You allow the viewer to adjust their browser, but you also give up some control over how your site will look as they do.

Harold Mansfield
02-04-2011, 01:30 PM
I know I'm late to the party, but I use 3 1600x900 resolution monitors. I use them at full width and expect that most people have at least a 19" widescreen. Most websites are built at 900-1000. I don't see too many over that, unless they are set to go to what ever the users default is.

vangogh
02-04-2011, 01:31 PM
I can't help but wonder how the nice folks over at MS will treat that in IE.

Off the top of my head I'm not sure how it's down. I'm pretty sure there are some good solutions to the problem though. I can't remember if the post on responsive design I linked to above included a link to the image issue, but it might have.

Spider
02-04-2011, 02:39 PM
...That's the downside of fully fluid sites. You allow the viewer to adjust their browser, but you also give up some control over how your site will look as they do.You call "downside" - I call "upside." Why should a site owner (or his designer) force me - the visitor - to look at the site as they look at the site? If you want to attract me (any visitor) then you must give me the power to use it as I want, not as you want. This isn't the 18th.century anymore. People have choices, and if you won't allow me to configure and use and read your site to suit my preferences, then I (any visitor) will go to a site that is a little more considerate of me, the potential customer.

I want my visitors to be free to access my site and use it however serves them best. I think they will be the best judge of what is best for them. I want the poor-of-sight to be able increase the size of the text hugely, if they need that. I want them to be able to view the site in any width they find most convenient. I am trying (not so successfully at present) to let the site narrow down to be viewable on cellphones, Ipads, etc. even though I do not use any such devices myself.

Maximum flexibility is the word of the day. I believe the less flexible one's site is, the more marginalized it will become as the internet continues to grow.

Harold Mansfield
02-04-2011, 02:46 PM
Most people set a default standard that is compatible with most users. Anyone that needs special viewing options such as larger text are likely aware of the "view" tab in their browsers that will let them enlarge anything they wish.

People can see my pages on a 15" CRT, just as well as a 42" widescreen. I normally check a new build on my Netbook ( 11" screen) , and iPod Touch and it's usually good to go.
You could design for an 800 resolution screen and that would cover everyone, but very few people have resolutions that low anymore and it would look small to most people who have at least 1200.

You can pretty much bet that even with the stock monitors that come with even the cheapest systems that they will have at least 1000-12000 resolution.

Designing for mobile devices is a whole 'nother thing. Most mobile browsers are now displaying the web in it's natural state. No special configuration needed. Only older phones have issues with dynamic pages and I personally don't design for old technology. Although Wordpress has a mobile browser plug in that seems to work just fine.
The only way that I know how to design for older mobile devices in HTML is to design two different pages (or style 2 different CSS functions) that will display based on what browser the user is accessing it from.
I could be mistaken about that. It's just what I remember from 3 years ago.

Spider
02-04-2011, 03:15 PM
That's what I'm talking about, Harold, and trying to avoid. The size determinants in the View menu are Text Size - which doesn't work anymore since most sites fix the text size in the code - and the full screen (F11) which doesn't alter the size of the site, only how much of it and surrounding white space one can see. To alter the size of the text, one must use the zoom or magnifier, and on many sites making the text bigger makes the width bigger beyond the size of the screen thus requiring horizontal scrolling - a most unsatisfactory result. I find myself quite often abandoning a site because it is fixed in a manner that is unworkable for me.

I don't want to do that to my visitors.

vangogh
02-04-2011, 03:48 PM
The downside I referred to was that the line of text is going to get longer and there's not much you can do about it. As the line of text gets too long it's going to be harder to read and comprehend.

No one is forcing you to look at a website. Unlimited flexibility isn't a benefit by default. Would you suggest the words in the novel you read rearrange themselves so you can read them in the order you want? The general point of visual design is to aid communication. The site owners has something to communicate to the viewer. How that site is designed helps in that communication. Too much flexibility can lead to miscommunication, which isn't a benefit to either site owner or site visitor.

Human beings by our very nature exert control over the environment around us. It's what we do. Just about everything we do is exerting control over unlimited flexibility to make things easier for ourselves and others.

You can design websites that are flexible without them being fully fluid. I'd even suggest your fully fluid website forces me to view the site in a certain way. It likely means having to resize my browser to view it comfortably and then resizing again to view the next site.

You saying that a site owner shouldn't hold power over the way a visitor views a site, but your solution is to give all the power to the visitor to force the site owner to build a site your way. You don't need a fully fluid site to allow the text to be resized or have the site be viewed at different widths. You can do both with sites that don't stretch from edge to edge in the browser window. Non of the things you suggest require a fully fluid design. Fully fluid and flexible are no synonymous. They're two different things.

By the way every browser (maybe not IE) allows you to place your own stylesheets and javascript in front of any website you view. There are extensions you can add to most all browsers for that. You can override how any site is styled and style it any way you want so you don't need the site owner to do it for you.

Harold Mansfield
02-04-2011, 03:57 PM
Yeah, that's just basic mathematics. If you enlarge certain aspects of the page, you can't expect the dimensions to stay the same for all of the other elements. The will get pushed to make room for the larger text.
The only thing that does that is images.
If your site was flash or pages with text on images, then it would all just get bigger just like enlarging any other image.
That is not a reality with HTML.

Spider
02-04-2011, 11:06 PM
...By the way every browser (maybe not IE) allows you to place your own stylesheets and javascript in front of any website you view. There are extensions you can add to most all browsers for that. You can override how any site is styled and style it any way you want so you don't need the site owner to do it for you.That's an interesting point - when I was looking in the browser (MSIE) "view" menu to respond to Harold's post, I saw a menu item - Style - No style/Default style - default style was selected. Is that what you are referring to, what is it and how can one change the style?

Spider
02-04-2011, 11:12 PM
Yeah, that's just basic mathematics. If you enlarge certain aspects of the page, you can't expect the dimensions to stay the same for all of the other elements. The will get pushed to make room for the larger text.
The only thing that does that is images.
If your site was flash or pages with text on images, then it would all just get bigger just like enlarging any other image.
That is not a reality with HTML.Not true, Harold. In many cases that is so - and that is what I was complaining about. However, some sites - this very forum you are now reading, for one - does not operate like that. Try clicking the zoom (in MSIE that is bottom right of the browser window.) You will see the text get bigger but the page remain the same size with the enlarged text wrapping. So, it can be done - however, not all sites do that.

I do it like that on my site, too.

vangogh
02-04-2011, 11:52 PM
I saw a menu item - Style - No style/Default style - default style was selected. Is that what you are referring to

That wasn't what I was referring to, though maybe it does something similar. I don't use IE enough anymore to know what that is.

What I was referring to was an extension for Firefox called Greasemonkey (https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/) that lets you customize how any page or site looks or behaves. You need to know some css and javascript to make it work for you, but many people have written extensions for the extension to change how some sites work. Greasemonkey scripts run in between the page in question gets to your browser and you seeing it so you really customize it in your browser. The extension has been ported to other browsers and there are other similar extensions.

What you're seeing in IE might be more something to customize the look of IE itself and not necessarily web pages though I'm not sure.

I did just find this for you Use your own style sheet to format webpages (http://windows.microsoft.com/en-US/windows7/Use-your-own-style-sheet-to-format-webpages). I think it's mainly so you can choose your own font and font size. IE should also have some settings where you can override parts of web pages. Firefox for example lets you set a minimum font size. If any web page has their font size set smaller than your minimum you'll see the font at the minimum you set. I think IE has something similar.

jamesray50
02-05-2011, 01:32 AM
My laptop is 15.6" and my resolution is 1466 x 768. That is as high as it will go. I view my browser if full screen and use tabs. I also magnify if I can't read what is on the page.

Spider
02-05-2011, 08:55 AM
Thanks for your explanation about style, VG. Sounds like a lot of fuss - not the sort of thing ordinary (non-nerd) folk would bother with or even know about. I'll bet the majority of internet users don't even know about the zoom feaure! (Many people don't even know you can have more than one window open at a time and that they can alter the size of those windows!) And still, over 50% of my users are using MSIE and only 13% using Firefox.

Hard as it may seem for advanced folk like you, we still have to play to the gallery!

Harold Mansfield
02-05-2011, 09:29 AM
As a "nerd". If you were a client, I would tell you that you that you are wasting days on something that won't matter 99% of the time.

Spider
02-05-2011, 09:45 AM
As a "nerd". If you were a client, I would tell you that you that you are wasting days on something that won't matter 99% of the time.Are you referring to something speciific, Harold - this thread about how a website is viewed, perhaps?

But aren't you one of the people telling me how important design is?

Clearly, I'm missing something here.

Harold Mansfield
02-05-2011, 10:17 AM
No, all I'm saying is that for the most part if you stay within the regular standards, most people will view your site just fine. It won't be an issue. You can't lose sleep over the 1% that still have old monitors and a Motorola Razor.

Spider
02-05-2011, 10:55 AM
Does anyone else have stats that report the resolution being used by their visitors? I only have a rough idea as to what my visitors use. These are my stats--

52.67% Unknown
22.74% -- 1280x1024
18.22% -- 1024x768
4.86% -- 1600x1200
0.82% -- 800x600
0.68% -- 1152x864

The resolution used by more than half is unknown. I can only suppose this 53% are using resolution around the 1024 -1280 mark because these are the only standard resolutions that score - except that such a low 1152 rather destroys that assumption. Because 1600 is 5% I have been guessing that 1000 to 1400 is the most popular range, which would be accounted for by the popularity of laptop computers.

Result: I have been focussing on 1100px and generally building for 1000 - 1400px and testing for 800 -1800px.

What do your stats tell you?

Spider
02-05-2011, 11:01 AM
No, all I'm saying is that for the most part if you stay within the regular standards, most people will view your site just fine. It won't be an issue. You can't lose sleep over the 1% that still have old monitors and a Motorola Razor.I'm not concerned about the 800px screen user, because they will be covered when I see how narrow my site can go for the pad, pod and cellphone user. What I am concerned about is the 1600, 1800 and 2400px user, because then the site is too wide with 100 -180 words on a line. If there are few large monitor users using the full width for their browser window, my problem is solved, but I cannot tell whether that is a large or small percentage of my visitors.

Harold Mansfield
02-05-2011, 11:28 AM
I'm not concerned about the 800px screen user, because they will be covered when I see how narrow my site can go for the pad, pod and cellphone user. What I am concerned about is the 1600, 1800 and 2400px user, because then the site is too wide with 100 -180 words on a line. If there are few large monitor users using the full width for their browser window, my problem is solved, but I cannot tell whether that is a large or small percentage of my visitors.

OK, now I understand.
For the most part, I don't design for "Full" Width" anymore, because that could mean anything. Just like HDTV, that newscaster that was so hot for the last 20, isn't so hot when blown up so large in high def that you can see her pores.
At 1000-1200px, I got everyone covered on all browsers and screen sizes and that is the resolution that my site (non specific) looks good at.

My personal feeling ( philosophy) on the web is that you can't please everyone because there are too many variables. There's always going to be some obscure browser from Germany, or wacky resolution that only 2% of the people use. Please the masses, the others will conform (That almost sounds communistic. Scary.).

vangogh
02-05-2011, 12:26 PM
What I am concerned about is the 1600, 1800 and 2400px user, because then the site is too wide with 100 -180 words on a line

Which again is a downside of creating a fully fluid design that stretches from edge to edge of the browser window. If you want to go from edge to edge then parts of your layout will need to expand to fill the space. In the past you would use javascript to detect the size of the browser window and based on that you could serve different stylesheets to different people. Now you can use css media-queries (http://css-tricks.com/css-media-queries/) to serve different styles based on the width of the screen. This is probably what you want.

What Harold is saying is that before spending time making sure things look perfect for a specific resolution or browser or operating system, etc. ask yourself how many people are really going to visit your site using it. Say only 0.05% of your visitors have their browsers open wider than 1200px when on your site. Is it worth the time to develop a new stylesheet for those few people? It might be. I'm not suggesting you should ignore those people. At the same time the effort might not be worth it. Maybe the stylesheet you used for 1200px still works really well for the above 1200px people. Not perfect, but more than acceptable.

What you'll find a lot in developing sites is that very little is impossible. There's usually some way to make whatever you want happen. However the cost in the solution, whether in time or money, is often not worth what you get.

Also where fully fluid design is concerned open any book or magazine and just about always there's a margin around the page between the text and the edge of the page. It exists because it helps make the text easier to read. The same is true of web pages. A little space outside the page is a good thing. When you make your page stretch edge to edge in the browser window you'e making it harder to read. Say you designed a page to be 1000px wide and you center the page for 1200px browsers. You've left 100px on each side, which can serve as the margin. Now say someone with a browser open to 1400px visits the site. They'd get a a 200px margin on each side. Is it worth restyling things for that person?


But aren't you one of the people telling me how important design is?

Yes design is important, but it doesn't mean creating something that is perfect for every potential person and every possible condition that could ever be met. Not unless your budget is unlimited too. Choosing not to make something perfect for 1% of your audience isn't a design decision. It's a business decision.

Harold Mansfield
02-05-2011, 12:57 PM
What Harold is saying is that before spending time making sure things look perfect for a specific resolution or browser or operating system, etc. ask yourself how many people are really going to visit your site using it. Say only 0.05% of your visitors have their browsers open wider than 1200px when on your site. Is it worth the time to develop a new stylesheet for those few people? It might be. I'm not suggesting you should ignore those people. At the same time the effort might not be worth it. Maybe the stylesheet you used for 1200px still works really well for the above 1200px people. Not perfect, but more than acceptable...

...Yes design is important, but it doesn't mean creating something that is perfect for every potential person and every possible condition that could ever be met. Not unless your budget is unlimited too. Choosing not to make something perfect for 1% of your audience isn't a design decision. It's a business decision.

Bingo! Right on the head.

Spider
02-05-2011, 02:55 PM
...What Harold is saying is that before spending time making sure things look perfect for a specific resolution or browser or operating system, etc. ask yourself how many people are really going to visit your site using it. Say only 0.05% of your visitors have their browsers open wider than 1200px when on your site. Is it worth the time to develop a new stylesheet for those few people? It might be. I'm not suggesting you should ignore those people. At the same time the effort might not be worth it. Maybe the stylesheet you used for 1200px still works really well for the above 1200px people. Not perfect, but more than acceptable...We seem to be going round in circles, I'm afraid. This thread is for the exact purpose of trying to determine how many people are really going to visit my site using certain browser widths. I am still unable to determine this. If anyone can offer any light on this matter, I would be very grateful.

Say only 0.05% of your visitors have their browsers open wider than 1200px: I have shown my stats and nothing is shown to have .05% usage. My concern is the 53% of visitors whose browser width use is unknown. Can anyone offer any suggestions regarding the 53%.

Maybe the stylesheet you used for 1200px still works really well for the above 1200px people: We have seen that people on these forum who have viewed my site and kindly given me feedback have, almost unanimously, declared that the style I use for less than 1200px is not acceptable for those over 1200px. Which is why I started this thread in the first place.



...What you'll find a lot in developing sites is that very little is impossible. There's usually some way to make whatever you want happen. However the cost in the solution, whether in time or money, is often not worth what you get... Well, we will have to determine the solution before we can analyze its cost-effectiveness. Does anyone have a solution?



...Also where fully fluid design is concerned open any book or magazine and just about always there's a margin around the page between the text and the edge of the page. It exists because it helps make the text easier to read. The same is true of web pages. A little space outside the page is a good thing. When you make your page stretch edge to edge in the browser window you'e making it harder to read... Not sure what this has to do with this subject - none of my pages has ever had zero white space around the text and certainly do not run edge to edge.



...Yes design is important, but it doesn't mean creating something that is perfect for every potential person and every possible condition that could ever be met. Not unless your budget is unlimited too. Choosing not to make something perfect for 1% of your audience isn't a design decision. It's a business decision.I'm not concerned with any 1%. As already stated, I am concerned with the 53% of visitors whose browser widths are unknown. Of course, no-one here will know them, either, but any information or experience anyone can offer that will help me estimate or make an educated guess, will be helpful. That is why I asked at the outset ....

Do you surf the web at full width?

If you surf at a reduced window width, on average approximately what width is your surfing window?

I am tryng to determine in what browser widths my visitors generally read my material. Some of you have answered clearly and I appreciate that.

Harold Mansfield
02-05-2011, 03:34 PM
If you are determined to set a specific browser width, then 1000-1200px pretty much covers everyone.

vangogh
02-05-2011, 03:44 PM
I have shown my stats and nothing is shown to have .05% usage. My concern is the 53% of visitors whose browser width use is unknown. Can anyone offer any suggestions regarding the 53%.

I never said you did. I was just using that as an example. As far as the 53% unknown is concerned I would suggest a better analytics package. None of us are going to be able to tell you what resolution those people are using. That's what your analytics is for. If it's not reporting those numbers then you should try a different analytics program.

I know you're not a big fan of Google, but Google analytics is pretty good and free.

Spider
02-05-2011, 05:14 PM
If you are determined to set a specific browser width, then 1000-1200px pretty much covers everyone.Clearly not. Most of the reviews of my site at SBF remarked that it was too wide. I am now focussing on solving that problem while still leaving the site flexible for visitors who like to determine their own viewing parameters.

Spider
02-05-2011, 05:18 PM
... As far as the 53% unknown is concerned I would suggest a better analytics package. None of us are going to be able to tell you what resolution those people are using. That's what your analytics is for. If it's not reporting those numbers then you should try a different analytics program.
..I know you're not a big fan of Google, but Google analytics is pretty good and free.Ah - there's a good idea. Does Google analytics state visitors resolutions?

vangogh
02-05-2011, 05:32 PM
It does. I'm looking at GA for my site now and I see it reporting numbers for 373 different screen resolutions. Most of course are only 1 or 2 visits. You can also see which resolution spent the most time on your site or clicked the most pages. There's some good information. It's not too hard to set up.

You'll need to sign up for an account or use an existing Google account and add Analytics to it. They'll need you to either at a meta tag at the top of every page or upload a single file to the root folder where your site lives. The file is a simple text file and google tells you what to include and what to name it. Then you need to add a bit of javascript code to every page of your site you want to track. It goes in the footer just before the closing body tag.

Then it's sit back and wait for Google to collect the information. It'll probably show different stats than your current analytics, but that's ok. Each stats program has differences in how the collect data so they generally won't show exactly the same numbers.

vangogh
02-05-2011, 05:50 PM
Thought I'd give you a few more details of some of what GA can show you. By no means is this only way to view the data. Two lines showing traffic from Google and two more showing traffic from Twitter.



Resolution | Source | Visits | % Visits
--------------------------------------------
1280x800 | google | 4,394 | 7.81%
1024x768 | google | 3,043 | 5.41%
1680x1050 | twitter.com | 253 | 0.45%
1920x1080 | twitter.com | 239 | 0.42%


The source column can be changed to things like the city where the visitor is located, the browser they used, what keywords (if any) they used to find you, the specific page on your site they landed on.

Visits can be changed to avg time on site, pages/visit, bounce rate.

The % visits is always the same.

Harold Mansfield
02-05-2011, 05:56 PM
Clearly not. Most of the reviews of my site at SBF remarked that it was too wide. I am now focussing on solving that problem while still leaving the site flexible for visitors who like to determine their own viewing parameters.

I don't see where you site is set at any specific dimension. It seems like it's set for percentages of the screen width.

Dan Furman
02-05-2011, 06:09 PM
You call "downside" - I call "upside." Why should a site owner (or his designer) force me - the visitor - to look at the site as they look at the site? If you want to attract me (any visitor) then you must give me the power to use it as I want, not as you want. This isn't the 18th.century anymore. People have choices, and if you won't allow me to configure and use and read your site to suit my preferences, then I (any visitor) will go to a site that is a little more considerate of me, the potential customer.

I want my visitors to be free to access my site and use it however serves them best. I think they will be the best judge of what is best for them. I want the poor-of-sight to be able increase the size of the text hugely, if they need that. I want them to be able to view the site in any width they find most convenient. I am trying (not so successfully at present) to let the site narrow down to be viewable on cellphones, Ipads, etc. even though I do not use any such devices myself.

Maximum flexibility is the word of the day. I believe the less flexible one's site is, the more marginalized it will become as the internet continues to grow.

There are both good and bad points.

For example, layout matters in conversion. Subheadings matter. Picture placement matters. It all matters.

I want my site to look a certain way, because, like a retail store, I have a specific flow I am going for. Now, of course, nobody has to follow it, but at least let me lay out the path I want.

vangogh
02-05-2011, 06:26 PM
Dan, that's a good analogy. You can go beyond the layout too and say that the entire experience someone has on your site from pure aesthetics to how quickly pages load and how easy they are to use, goes a long way toward whether or not you make a sale. Some of those things are obvious and we're consciously aware of how they might affect us. A poorly designed checkout process, for example, that doesn't accept your zip code as valid. It's easy to see how that led us to not buy something. What's less obvious and often invisible to the visitor might be choices in color or a small detail on a border. Whether we're aware of those things or not they do affect us.

And like you said all those choices have pros and cons associated with them. If one way always worked we'd all be doing things that one way.

Spider
02-05-2011, 11:21 PM
It does. I'm looking at GA for my site now and I see it reporting numbers for 373 different screen resolutions. Most of course are only 1 or 2 visits. You can also see which resolution spent the most time on your site or clicked the most pages....Excellent! Then can I ask you kindly, VG, to copy and paste the most numerically significant results for your site? You quoted some results in your next post but it seems those might have been from the middle of the pack - they only covered 14% of your total visitors. What were the most popular resolutions?

I'm thinking that your visitors will be more technically sophisticated than my visitors, and the results you get today are likely to be the results I can expect tomorrow. This gives me an opportuity to predict what my visitors are likely to be doing in the near future, as they catch up, and I can provide what they will be needing.

I have just thought of another question - do you know if the stated resolution is the resolution of the screen or the size of the browser window in which the site is being viewed? I presume it's the screen and not the window, but I thought I'd ask.

Spider
02-05-2011, 11:33 PM
I don't see where you site is set at any specific dimension. It seems like it's set for percentages of the screen width.Yes it is -my site is designed to allow visitors to view it however they think is best for them. I thought it was clear from this thread that I employ a non-fixed layout to accomplish that. When you said, ...

.... "If you are determined to set a specific browser width, then 1000-1200px pretty much covers everyone." ...

... I interpretted that to mean you were suggesting building to a 1000 - 1200px range, because you know I am determined NOT to set a specific browser width.

Sorry for the misunderstanding.

Spider
02-06-2011, 12:05 AM
There are both good and bad points.
For example, layout matters in conversion. Subheadings matter. Picture placement matters. It all matters.
I want my site to look a certain way, because, like a retail store, I have a specific flow I am going for. Now, of course, nobody has to follow it, but at least let me lay out the path I want.I like that analogy, too. And, indeed, use those principles. Harold, especially, was heavy on my confusing navigation, a while back.

The 30+ pages of my site were available directly from a left-side menu, and that was too many choices, resulting in confusion for visitors, Harold convinced me, who rarely made it to the "purchase" page of the site. Now, I have three tracks - Life coaching, business mentoring and wealth building, which merge into one track, so that a visitor will arrive at the purchase page in 3,4 or 5 steps. (With a direct jump from anywhere on the track.) All the other pages catch long-tailed searches and plug into one or other of those three tracks.

So, any visitor can choose the subject of his coaching inquiry from the three I offer, is forced to follow the flow path I have determined, but gets to design for themselves how the information is presented to them (big or small text, wide or narrow screen) in a manner that serves him best. And always finishes up on my purchase page. (Unless they abandon the site somewhere along the path.)

And once they arrive at the finish line, with your excellent re-write, Dan, they must make a choice of contacting me or not.

Frankly, I think it is a pretty awesome design strategy. The implementation is what we are working on now.

vangogh
02-06-2011, 12:08 AM
Frederick here are the top 15 resolutions and their associated %s



% Visits | Resolution
---------------------
15.42% | 1280 x 800
12.13% | 1440 x 900
11.59% | 1680 x 1050
10.32% | 1280 x 1024
9.36% | 1024 x 768
9.29% | 1366 x 768
8.31% | 1920 x 1080
7.53% | 1920 x 1200
2.99% | 1600 x 900
1.85% | 2560 x 1440
1.17% | 1152 x 864
1.04% | 1600 x 1200
0.99% | 1360 x 768
0.91% | 1280 x 768
0.83% | 1024 x 600
0.77% | 768 x 1024
---------------------
94.50% | <-- I think I added correctly


I probably do have a more tech savvy audience so take the numbers with a grain of salt. Other than the last resolution listed the lowest width is 1024px. And that last one is all the iPad, which can be held either way. My guess is the smaller width is listed first regardless.

Also other than the iPad resolution there are only two other times something less than 1024px shows up in the top 50.

#18 - 800x600 - 0.49%
#50 - 819x614 - 0.02%

I built my site for 1024x768, but there is some javascript to detect a lower width and the site should then resize itself to fit nicely at 800x600. It's been awhile since I've checked to see if it's still working though. Given the resolutions visiting my site it's not something I felt the need to worry about.

For smart phones I use a WordPress plugin that detects the presence of a phone and then displays a mobile theme. I know it works on the iPhone. I don't have any other phones to check.

You don't see it in the top 15, but it looks like they're measuring the window as it's open. I see some odd sizes further down the list like the 819x614

I'm working on a redesign whenever I have a few minutes and I will be putting more effort into having the site work well for different devices like tablets and smart phones.

Spider
02-06-2011, 12:53 AM
Thanks, VG. Here is my reading of this--

50% of your visitors are viewing with resolutions between 1024 and 1280, whereas my stats are 40% for the two extremes and an unknown number between them. So, I might have a greater percentage in this range than you.

Then I have only 5% at 1600 against your 15% or more. And yours go up from there.

With 370+ resolutions stated, I am going to guess that G are reporting window widths rather than screen widths. And those will largely be the non-standard dimensions. It might be easy to suppose that a good portion of my 50% unknown are people using a window size less than full (standard) screen, too, but I don't think I can say that - all of your resolutions look quite standard to me, suggesting that most of your visitors are surfing at full screen width. That is surprising - I would have expected as the screen size increased the number of visitors viewing with a reduced window width would increase, too.

This confirms, I would think, that the future for me holds a greater use of larger screens but probably more people - not less - browsing at full screen width. That is of considerable significance to me and contrary to what I was expecting.

Thanks again for the information.

Harold Mansfield
02-06-2011, 01:23 AM
If you just want general information about popular screen resolutions:
Browser Display Statistics (http://www.w3schools.com/browsers/browsers_display.asp)

Spider
02-06-2011, 10:10 AM
Interesting stats, Harold. No surprise that MSIE is continuing to lose market share but a surprise that Firefox has been losing marketshare for the past 18 months, too. Over the same period, Chrome has quadrupled in marketshare.

On the display aspect, it's no surprise that a nerdy bunch like the user of w3schools.com would largely use resolutions higher than 1024. It appears not to consider pad, pod and cellphone internet access. I wonder what the overal stats would look like if they were included. And it clearly does not address the actual usage of browser window widths. That is the crucial statistic for me that does not seem to be commonly addressed - maybe its a difficult stat to collect.

vangogh
02-06-2011, 10:30 AM
It is a little surprising that so many people seem to be surfing with their browser maximized. I would still think that the majority do, but not in the 95% range. It's possible it has something to do with the way Google collects the data. There are also a variety of extensions for different browsers that let you resize the browser to an exact dimension. I wouldn't expect most people use those extensions, but my site is about web design and development so I would think more of my audience might have and use those extensions.

With the non-standard sizes though you usually develop your site to the next common resolution that's less. I wouldn't specifically build a site for 843x721. That person would see the site how anyone using 800x600 would see it.

Harold Mansfield
02-06-2011, 10:35 AM
Just remember that a smaller screen doesn't mean less resolution. My iPod has a 4" screen, but at 960x640 resolution. The iPad has a 7" screen with 1024x768, and the new one s rumored to come with 2048x1536.


It’s impossible to design a website to look the same in every browser, platform and screen resolution, so don’t bother trying. Instead, use a fluid, tableless layout for your design, with % widths that expand and contract to fit a visitors browser setting. Consider – design for 1024×768 setting and ensure it contracts properly, or ‘transforms gracefully’, to the 800×600 setting

I'm sure that there are other opinions on the subject ,but this looks like a good place to start:
Best Screen Size & Screen Resolution to Design Websites | Is There A Standard Size? What Is The Most Common Dimensions? - (http://www.hobo-web.co.uk/seo-blog/best-screen-size/)

vangogh
02-06-2011, 11:16 AM
To add to Harold's quote, you aren't trying to make your site looking exactly the same to all browsers and all resolutions. Doing that means designing for the least common denominator. It's ok if a site looks different in Safari and IE and it's ok if the site looks different to someone viewing at 1600x1200 and someone else viewing at 800x600. You want to the site to look good to all those people, but it doesn't have to look the same.

Spider
02-06-2011, 11:19 AM
VG - I can't see how one would build a site to such an exact dimension. I make my browser approx, 1100px wide, do a bit of code, take a look, do another bit of code, take another look, and so on. Then every few minutes I swing the browser width from 1100 down to about 450 or below then up to 1800 and above see how it looks and adjust accordingly. (The 1600 and 1800 width is simulated on my 1366 screen by using the zoom - 85% zoom @ 1366 = 1600 and 75% @ 1366 = 1820) I guess you could say I 'develop' a page at all widths at once, rather than develop for a single dimension and make compromises later. Just seems natural for me to do that.

Harold - I didn't realize that. I use my telephone as a telephone, not as a makeshift computer, so have never seen my site on a cellphone. So, how do you read stuff? Most sites I visit have too small text on a 16" screen. Surely, full width of a fixed width page on a 4" screen must be unreadable, no? Okay, my eyesight isn't 20-20 but I cannot imagine even the sharpest-eyed teenager being able to read 80 characters on a line that is only 3" long. Please explain.

Spider
02-06-2011, 11:34 AM
... I'm sure that there are other opinions on the subject ,but this looks like a good place to start:
Best Screen Size & Screen Resolution to Design Websites | Is There A Standard Size? What Is The Most Common Dimensions? - (http://www.hobo-web.co.uk/seo-blog/best-screen-size/)AT LAST! Someone to go into print that says what I have been saying all along -- FLUID RULES!!!



...When we say “optimize” we mean that your page should look and work the best at the most common size. It should still look good and work well at other sizes, which is why I recommend a liquid layout using percentage widths to control layout...

YEE-HA!


(Thanks, Harold, for giving me the material on which to base that Oh-so-Texan 'Yee-ha!')

Harold Mansfield
02-06-2011, 02:07 PM
Harold - I didn't realize that. I use my telephone as a telephone, not as a makeshift computer, so have never seen my site on a cellphone. So, how do you read stuff? Most sites I visit have too small text on a 16" screen. Surely, full width of a fixed width page on a 4" screen must be unreadable, no? Okay, my eyesight isn't 20-20 but I cannot imagine even the sharpest-eyed teenager being able to read 80 characters on a line that is only 3" long. Please explain.

It's not exactly comfortable for me either. You certainly ( or at least I can't) don't spend a lot of time surfing on a handheld device. Just quick look ups, directions, maybe the occasional email response or FB reply. Although I see kids on them all of the time. Mostly doing Facebook, Searching videos, and geo based stuff like Foursquare.

When I need to surf websites or spend any significant time online, it's definitely not on a hand held...it's on my desktop. I don't have a pad, but most of them seem to be pretty comfortable for long periods of time.

vangogh
02-06-2011, 11:54 PM
Surfing on my iPad is great. I don't have any problem reading and it's easy enough to zoom in when I need to. The phone is a different story. One reason I prefer apps to a browser on my phone is things will usually be easier to read in an app. They're usually designed specifically for the space. I use the Carrington mobile theme (http://crowdfavorite.com/wordpress/themes/carrington-mobile/) for my site. When a mobile device is detected that's the theme that shows. You have to be running WordPress to use it.

The text is small and I'm noticing that you can't zoom in, but I find it readable. My phone isn't my preferred device for reading, but it works. I read the NY Times on my phone all the time. They make the text bigger and provide options for increasing it. It's mostly websites that haven't been designed to work on a phone that I find hard to read. Everything else seems ok for the most part.

Spider
03-25-2011, 03:17 PM
Notwithstanding my little outburst there in favor of a fully fluid width, I am in the process of reducing the overall maximum width to 1200px. It's throwing up a few minor centering anomalies but I'll go back and tidy them up later. Would anyone who is interested stop by and see if you think 1200 limitation is okay.

I now have it that anyone using a window width of 1200px or less will not notice anything because the site wraps right down to about 600px before a horizontal scroll is necessary. Above 1200px the site stops expanding using the max-width attribute set at 1200. That means people no longer have a choice of viewing my site wider than 1200px - they are limited, but that was the concensus and I thought I would try it.

This only applies to Firefox, Chrome and Safari users - IE does not recognize max-width at present so Explorer users will still see a fully fluid design out to infinity!

Your comments, as always, are appreciated.

cbscreative
03-26-2011, 12:38 PM
It works in Opera too, but Opera users are a pretty small percentage. I adjusted the width up and down and found no issues. I was thinking we didn't have to worry about making your sidebar images so wide any more, but with IE, we still do. Ya gotta love MS.

Spider
03-26-2011, 06:44 PM
Yes, Steve - I am going to assume that people with super-wide screens who are using them at full width, are also using Firefox and others (ie. the folks here.) The 50% of my visitors who use IE are not all using superwide screens of course, and a certain percentage even of those who are will not use them full width. So, wide screen users, using IE and running at full width, is probably quite a small percentage.

For those who do use a wide screen at full width on Firefox et al, how does 1200px max width look to you?

Harold Mansfield
03-27-2011, 02:56 PM
The size of my screen does not affect the website. For most websites I see the background on both sides of the site area. That could be anywhere from 100px on each side on my desktop to flush on a mobile device. Most times the background area is part of the design.
The point is, no matter what screen size I use, I see the website area the same dimensions. It's the same px size no matter how big the screen is. If I have a 60ft screen...I'm still going to see it at the same relative size as any other device...It's just bigger.

I don't use a widescreen monitors because I want to view websites in the full viewable area. I actually don't and none of the websites that I frequent (outside of V-Bulletin forums) display that way. None of them. I use them because I want to see multimedia in full screen. Videos, games and movies and those are more and more created for a widescreen or cinematic screen size. That's why I have widescreen monitors. It has nothing to do with regular websites. I want to see them in a defined area. I expect to see extra space on either side.

Most of my websites and the websites that I put up for people are 1000px-1200px. With 1200 being on the high side. At 1000px I can see most websites on a mobile device without turning the screen sideways for the widescreen view. 1000px seems like it's becoming the norm these days.

The biggest thing is, people don't use widescreen monitors because of websites so you don't need to adjust for them with as much detail and statistics as you are putting into it. They use them because of media and a larger work area. If there was no video or gaming online..there would be no need for widescreen displays. Who would care about looking at a website with no multimedia in widescreen format?

As far as viewing websites is concerned a 15" monitor would be fine. They are just text and images. I expect the layout to be much the same as print media. You should be emulating a print layout like a brochure, magazine or newspaper, not a video.

You can't account for every possible resolution and it doesn't matter anyway. Just ensure that the most amount of people can view it normally. Use Worldwide stats, not just your site stats.

billbenson
03-28-2011, 02:26 PM
It looks good in Opera and FF at 1920 x 1200 and at 1680 x 1050. By comparison I clicked on one of your other sites and it didn't look good on a big screen. I have a 28" (not wide screen) monitor. So what you are doing looks good on the larger monitors.

Spider
03-28-2011, 03:59 PM
Thanks, Bill. And Harold.

Keane
03-30-2011, 03:46 PM
If you have Google Analytics installed on your website, prior to creating a new website, always check what size screen the majority of your audience views your website. This will help you! Trust me.

Jhn Design
04-10-2011, 05:37 PM
It's only statistics but it may help you w3 school display (http://www.w3schools.com/browsers/browsers_display.asp).
I use 1280x800 and 1680x1050.
imo, it's important to avoid horizontal scrolling on "regular screen" like 1024x768. If your content is centered with a descent css then, you shouldn't spend too much time to try optimizing your pages for a screen size.

Nataniell
12-11-2020, 05:28 AM
That's definitely one approach. Another is to make your site more responsive to different conditions. A couple of weeks ago Smashing Magazine posted about responsive web design (http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/). Part of that is making more of your design flexible. Images for example can be coded to vary size by using % instead of px.

I think it comes down to understanding what's going to happen as browsers resize, both up and down. The more you understand what will happen the more you can set limits where appropriate and allow for full flexibility. 2 layouts is certainly one approach, but I think there's going to be more to it.
If you are working with responsive design, it is important to consider the wide variety of monitor resolutions. Moreover, their shape is also important. As it turned out, many people use square monitors, which requires optimization for other resolutions. I can recommend the article "how to make responsive website design (https://www.cleveroad.com/blog/how-to-make-responsive-website-design-important-tips-to-succeed)"