The ridiculous discussion about monitor sizes and screen resolutions

Published on Thursday, September 28th, 2006

Every time a new web site is to be designed; every time I open a magazine about building web pages; every customer I meet. It’s always there, the ridiculous question:

How big monitors do people have nowadays?

The question comes up in regard to how wide, in fixed pixels, the designer dares to make the web site, but this couldn’t be further from the correct way to approach it. So, let me kill off some common myths:

“It’s all about how big monitors people have”

No! A monitor’s size has no correlation whatsoever to the resolution used on it. Let me give you an example: my PC laptop screen at work is 15.4″ and I have a resolution of 1920 * 1200 pixels. My MacBook Pro laptop screen at home is 15.4″ and the resolution is 1440 * 900. So, please, don’t try to label me by measuring my monitor!

“Well, ok then, it’s all about the resolution then”

No! Maybe 50% of the world’s web surfers use maximized windows; the rest use a size to their liking. No connection exists between web browser window sizes and the maximum resolution available on a monitor.

“So, eh, what should we check for?”

If anything, make sure you have reliable statistics of the actual web browser window sizes used on the web.

But, my main point is to not design for a specific resolution, and to instead use elastic layouts. What I mean with that is to create web sites whose width will adapt to the area available in the visitor’s window. Take this web site for example: The layout I use is flexible with a maximum width of 1200 pixels, if available, and a minimum width of 420 pixels to cater to those with very small web browser windows. The columns will automatically resize themselves, through the magic of CSS, to their given space.

Remember: your design and how it works for various visitor’s is your problem, not theirs! Create elastic layouts when possible to meet the demands of as many end users as possible

To round off: my pet hate customer/designer demand

Ever been in a meeting where the requirement is that the web site (or the start page of the web site) should fit within a web browser window without scroll bars? And as a result of that, you have designers running around to find anyone using the default toolbars and initial size of toolbar button icons in Internet Explorer, to find some kind of golden value to go by?

Are you fucking kidding me? We’re not creating a poster here, nor a frickin’ mural! It’s the web! It’s a living medium where we never, ever can control what the end user chooses to use, and neither are we entitled to do so.

Do you know how many web browsers, devices, platforms and settings there are out there? So please, look to yourself and your design flexibility options instead of trying to label your visitors.

 

Now I please ask you to stand up in the next meeting. Explain to designers and decision makers how the web really works.

Oil Condition Monitoring by Hydac Australia

Posted in CSS, Developing, Technology | 38 comments

38 comments

  • Johan
    September 28th, 2006 at 10:30

    I am designing a website at the moment with a fixed-fluid set up, that is a min 760px and max 1100px where the content flows between these two is ok. I think that a resolution of 1280×1024 is no exception anymore. I dont care about cinema display since it is no factor at all.

  • Johan
    September 28th, 2006 at 10:35

    If I might add: I center that whole setup with margin:0 auto.
    Robert, your fluid setup is even better I think.

  • Harmen Janssen
    September 28th, 2006 at 11:37

    Hear hear! Couldn’t agree more.
    I have just finished a website (and am working on another one) which has fixed layout and excludes 800*600 users. I don’t like it, but designers can be a real pain when it comes to dimensions ;)

    By the way; I second Johan, you’re liquid layout does a very nice job!

  • Dave Child
    September 28th, 2006 at 13:20

    I’ve got the same kind of thing set up with my site - liquid, but with a minimum and maximum. The maximum, because text becomes unreadable above certain line lengths (60-80 characters is ideal, anything about 120-150 causes problems), and at sufficiently low space it all becomes a bit unreadable as things start to overlap.

    I’m asked the same thing often as well. My stats show very few people (less than 5%) on 800 by 600 or below - but I’d be an idiot if I ignored them or gave them horizontal scrollbars.

    Well said, anyway.

  • Karl Dawson
    September 28th, 2006 at 14:28

    Ever been in a meeting where the requirement is that the web site (or the start page of the web site) should fit within a web browser window without scroll bars?

    Yes unfortunately. I said no, that’s not possible citing that you have no idea how big the user’s browser window will be, let alone their screen resolution.

  • Jens Wedin
    September 28th, 2006 at 14:37

    But would it be possible by javascript to really get the size of the window the user is using? I´m not a js guru. Mayby something for you Robert to check out?

    Of course I agree with you that the web is not an poster but it would really nice when building sites to see what the real size is of the user window instead of the screen resolution that we today have in most statistic programs.

  • Ed
    September 28th, 2006 at 14:58

    I think encompassing every resolution, screen size, and device is a pipe dream. Sure you want to include everybody, but it’s simply not possible.

    For some designers, it’s not feasible to use liquid/fluid layouts, as it simply doesn’t work for some designs (visit any good design agency to see how this can become an issue). So then what do you do? In my opinion, check your user stats, as mentioned above. Build around the majority and try and include as many of the minorities as you can (800×600, mobile devices, etc.).

    Fortunately all is not lost. If you can still afford to build around an 800×600 resolution (my latest stats show about 10% still viewing with that), then you’ve included a big piece of the pie that’s 800 and up. You can use alternate CSS sheets to handle mobile devices, which is how it should be done anyway. For anyone with a crazy high resolution (1600+), a fixed layout doesn’t hurt them. If anything, it very well may look better than a liquid layout stretched across the entire screen with a large amount of negative space, which makes the site looks worse.

    In the end, you cannot accomodate everybody. If someone is running 640×480, I’m sorry, but you’ll need to do a little upgrading if you want to be happy surfing the world wide web. It’s not just one or two sites you’ll have issue with. While many would love to build around a 1024×780 resolution, it’s still not quite there yet in my opinion; and the fact of the matter is, designing for 800×600 makes your site better for users with higher resolutions that don’t run their browser as a full-sized window (as mentioned above). Fluid/liquid layouts can be good, but they aren’t a clear cut solution in my opinion.

    Cheers.

  • Felix Geisendörfer
    September 28th, 2006 at 15:01

    Hey robert, I agree with you. Semi-liquid layouts are the way to go these days. However, this can become a real pain on some of the more complex layouts one might wants to use, but I think it’s worth it. I think mozilla.org and tagesschau.de do a really good job at this.

    Anyway, another thing I want to add: Your blog design is probably my favourite designs of all time. You could write about the most boring things (which you don’t), and it would still be a pleasure to read on here ; ). I think I’ll take a good bit of inspiration from it when redesigning my own blog soon.

    @Jens: Yes you can do a lot of things like this, but if it can be done via CSS it’s much better since it doesn’t require people to have JS turned on.

  • Robert Nyman - author
    September 28th, 2006 at 15:19

    Thanks for your comments, and compliments (Felix, you just make me blush over something that I don’t I’m worthy of :-))!

    Jens,

    If we’re talking about JavaScript in statistics, easy ways to check this is through document.body.offsetWidth and its likes.

    Ed,

    Of course it’s a dream to cater to everybody, but why wouldn’t your initial standpoint be to reach as many as possible? Give the best optimal width to those who have the web browser window size to handle it, but make sure it degrades gracefully for those with smaller web browser windows.

    visit any good design agency to see how this can become an issue

    To me it isn’t a good design agency if they don’t design for the web as a medium in the first place, but instead just do what they “think is pretty”.

    With that said, I’m very aware that not every design possible is suitable for elasticity, but I think far more could be if it was considered by the designer from get-go.

    Also, just to note that I’m not a big fan of liquid layouts, but instead elastic layouts with a specified minimum/maximum width. Use the suitable width available, basically, to create a layout as compelling as possible.

  • Steve Williams
    September 28th, 2006 at 16:41

    For me, it’s more about content and user experience than monitor size/resolution.

    Unless the client has a strong preference, I tend to weigh up the extra work in making a jello layout against how much content there is to convey and discuss that with them.

    Besides not wanting to see every site on the web turned into a blue Volvo estate :) , Jello sites definately take longer, so the budget is often a consideration too.

  • Daniel Spronk
    September 28th, 2006 at 17:21

    Hey Robert,
    interesting post. Elastic designs are the way to go.

    You know, elastic designs make up for a lot, but what about the ever increasing pixels per inch (ppi) on the new computers/LCD Panels!? Check out the PPI on the 30″ Cinema Display or the new MacBook Pro 17″.
    Pixels are physically decreasing in size. In the near future we’ll need elastic pixels ;) cuz that MBP 17″ is just squeezing too many pixels on the given screen space.

    Curious about what you think about it.

  • Robert Nyman - author
    September 28th, 2006 at 20:11

    Steve,

    Regarding development time, I’d say it depends. If it’s about setting a minimum/maximum width for the web site and then setting column widths in percent, we’re not talking a lot of work here. But in terms of more sophisticated designs, then it can take more time (but the result is often oh-so-much better :-)).

    Daniel,

    Very interesting perspective, and good article! I’d like to ask you what you think are good options for addressing that problem (if you’re willing to share, that is :-)).

  • Jonathan Snook
    September 29th, 2006 at 3:30

    Why is it bad that users have horizontal scrollbars?

  • Shani elharrar
    September 29th, 2006 at 6:51

    Jonathan, i hate horizontal scrollbars, who like them?

    Im using 15″ (1024*768) and trying to create atleast a normal layout for 800*600 , As everybody else - i love robert’s fluid setup (good job).

  • Robert Nyman - author
    September 29th, 2006 at 8:50

    Jonathan,

    Well, not necessarily bad, but I think most users dislike them and if we can avoid them they will be grateful.

    Shani,

    Thanks! :-)

  • Jonathan Snook
    September 29th, 2006 at 14:18

    I certainly agree that most people don’t like a horizontal scrollbar and I certainly wouldn’t recommend annoying the majority of your audience. But for a minority, I don’t worry about it. The content is still accessible after all.

  • Charlie
    September 29th, 2006 at 23:21

    What’s your thoughts on using a JavaScript resolution dependant layout? So you are not desigining for one specific layout but a number of possibilities.

    I am currently involved in a large redesign where we know the majority of our customers are on 1024 * 768 but still want to cater for the minority on 800 * 600. My plan would be to use a 800 CSS layout as the default and an optimised 1024 css layout when JavaScript is enabled.

    Cheers

  • Robert Nyman - author
    September 30th, 2006 at 11:39

    Charlie,

    I’d only use JavaScript-dependant layout as a last resort. If you want to have an optimized layout with a 1024 width but let it go down to 800 as well, why not just use CSS and let it be elastic inbetween.

  • pauldwaite
    November 27th, 2006 at 21:10

    Maybe 50% of the world’s web surfers use maximized windows; the rest use a size to their liking.

    Have you got a source for that?

  • Robert Nyman - author
    November 27th, 2006 at 21:25

    pauldwaite,

    Nope. It’s just based on personal experience and from talking to a lot of computer users and other web developers.

  • Richard Bychowski
    November 28th, 2006 at 5:13

    “Following the referrer” is good judgement. Look at your referring pages. You don’t want your site to require a larger window size than the site that refers your traffic.

    Personally, I strongly prefer a site to fit the 800×600 px window. Very few sites are demanding enough to require my whole desktop. Maybe an ebay or amazon or a portal-style site with news feeds, email, photo gallery, etc. But most have specific information which require 2 columns of text. Please don’t monopolize my desktop with your freaking blog!

  • Ben ‘Cerbera’ Millard
    November 28th, 2006 at 6:07

    Fluid design is for sure the most web-friendly way to set page width. You can think of it in terms of a normal GUI application:

    * The web browser is the application.
    * The web page is the data or file being viewed.

    Changing the width of the application should change the width of the data accordingly. This is surely the most intuitive way for an application to work? Think Notepad with word wrapping turned on. :)

    I’d disagree with using either of max-width min-width, especially if set to a px size. Anyone using a browser outside of this arbitrary limit effectively gets a fixed-width website.

    Consider the increasing number of high-resolution screens. The physical size of a pixel in two different monitors can be radically different. For a letter to appear the same size in both monitors, it will need to be a different pixel size. This means the number of characters per pixel in width will differ, making a limit based on px end up at a different number of characters.

    This is particularly important for accessibility, too. Some users with reading problems (such as dyslexia) can find extremely long lines easier to read than shorter lines since they have to move down the next line less often. Equally, some users benefit from very short line lengths as a narrower “sea of whitespace” can form.

    Someone with vision impairments using a high-resolution screen will need letters which are many more pixels higher than normal. Because the text is so big, they’ll also need a layout width which is massive when measured in px.

    You might think it’s safe to use min-width. But I don’t think so…

    In some devices, such as the PSP, the text size is smaller than it would be on a desktop PC when measured in px. As such, the layout might not fall apart at this small width in devices like this.

    Similarly, users of low-resolution devices (such as 800×600 desktop PCs) might reduce their text size by a notch to get a more comfortable physical size for the letters. And they might like browsing with a sidebar open, or they might be using Opera and tile two windows vertically, or they might be using Windows and tile two browser windows vertically. This website’s layout actually works alright in a 400px browser window if you are using a smaller-than-default text size and turn off the min-width.

    But I’m glad I’m not alone in thinking about monitor sizes, desktop sizes, browser sizes and web page layout sizes! :D

  • Sergei Shelukhin
    January 9th, 2007 at 3:02

    Hmm… Where do you get customers that good, scrollbars ones?..
    My customers are usually more like “Fuck it, real people don’t use anything below 1024″, I had to convince some that the base width of 1200 is not a good idea…

  • Robert Nyman - author
    January 9th, 2007 at 8:18

    Richard,

    Thanks for your comment. I agree that most web sites should really fit within at least a width of 800 pixels.

    Ben,

    Interesting comment.

    I’d disagree with using either of max-width min-width, especially if set to a px size. Anyone using a browser outside of this arbitrary limit effectively gets a fixed-width website.

    As long as the web browser window is the same size, yes. But that goes for every visitor for any resolution. As soon as the web browser window is resized, the web site will adapt, and that is, to me, the beauty of an elastic web site.

    Sergei,

    I wouldn’t say it’s about getting those customers, but instead convincing them of the benefits and how their business/goals will gain from it.

  • James
    January 20th, 2007 at 16:57

    I couldn’t agree more - flexible layouts are the way to go IMHO. Of course you have to settle for some sort of minimum width because inevitably you end up with elements that can’t be wrapped (as single word or an image for example) but if you can keep this as low as possible that’s a good thing.

  • Robert Nyman - author
    January 20th, 2007 at 20:49

    James,

    Absolutely, some sort of minimum width has to be established. Otherwise, things will just get unusable.

  • Travis
    February 3rd, 2007 at 14:43

    Have you ever seen a website that scales to 100% on a large monitor? It looks ridiculous!

    Also, what about image heavy websites?
    When I get a brief from a client and they want 234726 images shown on one page I need to design to a fixed width. Therefor I have to know what the best width to design for is. But hey, what the hey would I know?

    …maybe us designers should let you developers design for a day…imagine that…a the web with no colour, no sound, no animation and no images, just efficient, scalable text.

  • ReaderX
    February 3rd, 2007 at 21:10

    If I forget screen resolution, there is still a problem with many people who have laptops (or Vista) with a default “120 DPI” setting which effectively magnifies both text and images in IE6 & 7.

    Some CSS designs essentially break under this condition. Many graphics start to look very pixelated. But, then, I noticed some non-CSS, table-HTML sites look just fine after this magnification.

    What are we designers/developers doing wrong?

    I’ve been searching for straight-talk for just over a week now and cannot find any answers other than “put your Windows back to 96 DPI” which is not a valid solution. The number of people with 120 DPI is growing fast.

    I don’t understand where to begin mitigating this problem.

  • Robert Nyman - author
    February 5th, 2007 at 9:16

    Travis,

    I’m not saying that a 100% width is the solution; I’m arguing for elastic widths. And if you design a web site with lots of images, you often use a grid, right? You know you can scale the parts of the grid proportionally then? And then its optional to scale the images if you want as well.

    I’m not saying that we don’t need designers, just as I hope you understand that you need web developers. But each has to be aware of the other role’s skill sets, possibilities and obstacles.

    ReaderX,

    The DPI problem is a difficult one, and unfortunately I don’t have any good answer to give you right now.

  • JP
    February 28th, 2007 at 18:22

    While elastic sites are great for the user in many instances and make for great blog layouts, they do not make great layouts for great portals. This is a design/usability/business decision that just about every single major publisher in the world understands and utilizes.

    Whether liquid or elastic, you can’t “control” the layout. If you can’t “control” the layout, what good are all the focus groups, usability tests and design mockups that you’ve spent $X on?

    In addition, you are neglecting what pays the bills: advertising. Publishers need to know where things are likely to show up on the majority of monitors on the majority of screen resolutions. You can’t get it perfect and I’ve seen some hybrid models work ok — one elastic column and everything else fixed, for example.

    So yes, for the user, maximizing that interface is great. But I’d also like my magazines to be ad free and fit in my pocket. But that’s not going to happen. Sometimes there is a method behind all the madness, and while the end user is a HUGE factor, it’s usually about the bottom line.

  • Robert Nyman - author
    February 28th, 2007 at 19:54

    JP,

    Good input. I agree with you: in those cases, well-thought and developed hybrids can form a very good solution.

  • JP
    February 28th, 2007 at 22:35

    Thanks Robert. Here are two examples of what I meant.

    The Globe and Mail. I really like this. Only the major, middle column is fluid:
    http://www.theglobeandmail.com/

    Forbes
    While nothing is fluid here, they’ve built an 800 pixel wide site, with a 200+ right-side add-on for people wanting, utilizing interactive features (those more likely to have bigger monitors, although the rest of this site is in need of an overhaul, especially as it loses focus at the bottom):
    http://www.forbes.com/

  • Javier Julio
    May 2nd, 2007 at 21:37

    Robert, what are you feelings in regards to fixed or fluid layouts in web applications (not web sites)?? I personally prefer fluid layouts as they cater to the user and improve their experience. Should this carry on over as well to web applications?? I’m not sure if you have more experience as a web site designer or for both sites and applications. Thanks in advance for any input you can offer.

  • Robert Nyman - author
    May 3rd, 2007 at 9:09

    Javier,

    WHen it comes to web applications, I think it depends. But in most cases, fluid layouts work very well with them as well.

  • Sally
    September 19th, 2007 at 12:09

    Nowadays creating a new web site, we try to orient on screen resolution 1024×768, but there is a tendency that in a couple of years 1280×1024 will become more popular. So, we should think about it.

  • Lowtech
    October 18th, 2007 at 12:06

    This is an exceptional Blog - good looking and also helpful! I am now facing these resolution issues in designing sites… this has given me some guidelines - and, also, misery love company! :-)

  • Designing decisions: width — This and that
    January 17th, 2008 at 13:04

    [...] The ridiculous discussion about monitor sizes and screen resolutions — a bid for fluid layouts. [...]

  • eurorma
    May 18th, 2009 at 1:55

    emm.. strange

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview

Top results