Website layout dimensions today

I remember me very well the last website project meetings with customers:

Why is my website so small? There is so much space to right and the left, why is this? Most of the people I know having laptops / computers with wide screens.

Sure, those customers have a point; the average computer equipment becomes still better. They are faster, having modern web browsers and most of all they have faster Internet connections.

But what is the future of the Internet?
A few years ago if someone asked me to use my mobile phone to surf the Internet I answered: “No, I don’t like to hurt my eyes with this tiny screen”.

Since the last years there are bigger displays for mobile phones and there are PDA’s and handheld PC’s. At least since my wife got her new LG mobile phone I like to surf the net by phone ;)

Last week I bought new small laptop for the vacation; A Eee PC from Asus. This “light” laptop PC has some kind of Debian operating system, Wifi technology and the screen resolution is 800*480 pixel. The specs are good enough to surf the web, read/write documents and also to play some games.

Okay, back to the begin, the “Screen resolution” discussion. I noticed that a lot of websites are designed for a 1024*768 pixel screen resolution or higher! A company as Asus knows the market and I agree that these tiny laptops have a big future market. why? Because the costs are less than $500 and they are very mobile (weight is less than one kg).

So what’s next? Create style-sheets for (normal) screens, print, mobile devices such as PDA’s and for modern light weight PC’s with lower screen resolutions? After checking a lot of websites I created the last years I think a lot of those layouts created for a 800*600 pixel sized screen are still very attractive, even on my bigger Laptop (1920*1200 pixels). Sure A lot of websites I created are larger sized and also the theme I’m using for this Blog is larger, but I think we should keep in mind that websites are not only viewed on modern and large LCD screens.

Before we start with our next website project we should think about visitors using the following equipment to surf the Internet:

  • The Internet Channel on game Consoles (f.e. Nintendo Wii)
  • Modern desktop PC’s connected to bigger Flat screen televisions
  • (online) Presentation tools

Do you know more?

14 thoughts on “Website layout dimensions today

  1. Yeah, I have been watching the viewer’s resolution stats for years now and think that it is about that time to step up to the 1024×768 res for main websites. BUT, why not plan the design and use different style sheets for the various resolutions. Detect the viewers resolution and select the appropriate style sheet to use. If the client is willing to pay for the extra, it shouldn’t be that difficult…

  2. Hi Chris,

    I don’t agree, sure most of your visits are by regular users using some “normal” computer, but these mobile computers area point at least for several types of websites…

    Check how much of your people having a HD-TV, they are not a lot of them. So your website should be accessible with a lower resolution if you think that your site has to get visited from someones living room :)

  3. It’s a simple numbers game actually. The stats on 800×600 sites come at about under 3%, the last time I checked.

    But, this question has no right/wrong answer. It all depends on design time, target audience, design type, etc.

    If you’ve got the time, then I guess you can try a fluid design. I don’t like them, because they tend to stretch out too wide sometimes. Also, I’m just lazy that way.

    For general business websites, I tend to go with a smaller width, since the audience is wider and may include lil’ old grandmas with 5 year old computers. On blogs and graphical sites, I go a bit wider, sine the audience would be expected to have slightly newer PCs.

    Type of design also plays a big role. More graphical sites tend to demand a larger display.

  4. I had been limiting myself to no more than 800 pixels wide and at least attempting to maintain fluid designs. With someone in the house who keeps her text sized above normal, I am reminded daily how terrible a no-liquid design can look if the visitor simply needs larger text.

    Part of me thinks that these handheld devices should be made to deal with the new site sizes that are becoming more common and the other part says that web programmers should always make their sites as accessible as possible. But, if we focus too much on accessibility we would all have 800 pixel wide sites with above average text sizes.

    My approach, for the most part, will continue to be using fluid or at least semi-fluid designs that do not go totally out of shape if the text size is changed. If I see a number of visitors coming via these smaller hand-held devices then I might start using additional style sheets. Until then, they’ll just have to use the scroll function.

  5. I have a Nokia N800 that I surf on quite a bit. I have Gecko 1.9 on it, so web pages render fine, but occasionally I come across pages that aren’t optimized for the 800×480 screen.

  6. We have been using 1024 px Design (a little less in fact) lately, but i always have a bad feeling about it. You are right with all those small gadgets that have a small resolution and the development will split in the future. Huge screens for the desktop and small screen for mobile. We will definitely have to switch designs for the actual user in the future

  7. people get used to the new technologies with time….so whether it is a palm-top or a desk top computer internet still remains to be vital part of our lives and we are bound to surf the net. Yes with the upcoming technologies new concepts of web design are also coming up so that both are in line with each other.

  8. I think the increasing usage of smaller devices adds a valuable element to the ongoing screen size debate.

    2 other factors that I think are important are:

    screen real estate usage, and
    line-length for readability

    I often hear people quoting resolution stats, but what those numbers don’t tell us is how much of the screen the browser is actually displaying. Some users don’t open the browser to its full size, others may keep their histories, delicious boomarks or other content open in a side window (thus narrowing the viewport), while others, like me, have extra toolbars installed that significantly reduce the vertical space. Thus even a user with a big screen may not be seeing the whole screen.

    Line-length is something that becomes a challenge with liquid layouts. We know shorter line lengths are easier to read, but they are far easier to control in a fixed environment. With a liquid layout one can fix the width of columns to prevent text from stretching out too wide, but that often looks weird as well. Yet if we let the text stretch it can become very hard to read. And of course we all know the challenges of designing something that looks good at varying sizes.

    I don’t know that the debate will ever end, but I think as long as we keep reminding people that it is not only a question of screen size, we’re on the right track.

  9. I read similar article also named layout dimensions today | Web Development Blog, and it was completely different. Personally, I agree with you more, because this article makes a little bit more sense for me

  10. Hi Dave,

    you don’t need a third party service ;) some tiny JS snippet will do the job:

    if (screen.width>=1024 && screen.height>=768) {
    window.location="highres.html";
    } else {
    window.location="lowres.html";
    }

    of just include the right CSS style sheet after the resolution is detected.

    But anyway you have to develop multiple websites to serve all the resolutions.

  11. when we develop a site, we use a service such as handsetdetection.com which then allows us to detect the device screen size and then display the correct format and resolution. This then allows us to have a standard view, iphone and blackberry versions and a normal mobile phone version of the site. Our CMS handles the template changes.

  12. I think you raised a very valid point. Portable devices are here to stay and the number of people using them is only going to increase. I think the best way we can handle it at this point is to create different stylesheets – however it all depends on whether the client is willing to pay for it.

  13. i have problems with pages made by Adobe flash with a big resolution. It is almost impossible view all website.

  14. Yes right, this hard to do, try to use a stretched background (width:100%)

Comments are closed.