Average screen resolution and designing web sites to fit them
As a designer or an owner of a website it is important to take into consideration the most prevalent screen resolutions, and especially those which your target audience is using. The days of the 640×480 screen resolution is long gone and today with the widespread use of widescreen monitors and laptops it has become important for owners and designers alike to update their existing websites to suit prevailing trends.
According to W3Schools 55% – 75% of people today are using monitors with screen resolutions of 1440 x 900 pixels. This means that if you are designing a website at a lower resolution your target audience may end up having to scroll from side to side in order to properly get a look at your page, which is not good for most businesses that rely on people staying on their website.
Designing Web Pages with Fixed Width
As the name implies ‘Fixed Width’ web pages do not automatically adjust to a user’s screen or browser, so if the design is too wide your visitor will have to scroll from one side to another. In order to get a Fixed Width page right you need to know the lowest most commonly used resolution of your intended audience. Once you know what the prevailing resolution is you will also have to find out how much space you get in each browser. Using a resource like anybrowser.com should help you get an idea of browser space. However, if you are not sure who your target audience is then you are better off not designing a Fixed Width page but rather a fluid page as described below.
Liquid Width Page
A flexible liquid type design will automatically align itself according to the resolution being used and the browser it is being displayed in. All page elements will try to accommodate themselves according to the user’s screen. When designing a flexible page you’ll need to use a certain percentage of width for the containers around the page i.e. a table or a div.
The first thing you need to do is to decide upon the maximum width you are designing for, so for instance if you use a design which takes up around 60% of the space on a screen then you need to keep in mind that everything which includes the elements should add up to a total of 60% of space on the screen.
The one mistake that many designers make is that they use pictures which are too wide. So for instance if you are going to use 60% width then all your images and header should fit within that width or you’ll see the horizontal scroll bar appearing.
Related posts:
- How to create mini sites
- Converting a design into a web page
- 17 free online website creators
- PSD to HTML
- Web Designer Spotlight – Enrim Design
7 Responses to “Average screen resolution and designing web sites to fit them”
Leave a Reply
If you integrate google analytics to your website, you can get a clear view of the screen resolutions used by your visitors, then you can make changes accordingly
Speaking of tags, I think that a ‘more-info’ section in the tag info page would be great. It can have up to 5 links that point to various sources of information on the internet where a user can learn more about the tag (like Wikipedia, or another online info resource, or the Mac website in case of Apple Inc wallpapers, or Microsoft’s website in case of Windows wallpapers, or the individual model’s page on a nude art site that has all info about her various sets, and so on OMGOMGOMG).
A few tags like HDR photography can certainly benefit from this. People usually tag any ‘photo’ with HDR Photography.
It’ll also benefit the mods/admins as it’ll give them more ground when shouting at someone for using wrong tags regularly.
Average Website Width in Web Design will have you wonder which format to design your site in, a fixed or a liquid layout. The screen resolution disparity is one of the main justifications that designers of liquid, or fluid width websites have.
Thank you http://www.webpagedesign.com.au for this awesome article! Sure i will come back for great new posts
Great Post.I agree with W3Schools on facing the problem in different browser with the layout to fit on most common screen size.
Thanks for sharing useful information.
A website which is search engine friendly is best to attract many visitors. It is useless to decorate the shop when no visitor is coming to it and the same principle is applied for the websites too.
I also tend to aim for the lowest screen resolution for the masses, generally considering a standard laptop display, designing most sites at 980px wide (even though i believe the ‘average screen res’ as of 2011 has been increased to 1200px+ wide)
Depending on the type of website, i normally base a lot of my work on the strength of ‘design’ so i use more fixed sizes than i do percentages. Me, personally am not a fan of the way images scale at fluid commands. The rest of the body content is not as problematic.
I feel that as long as the type is still at a legible size for reading without strain the thinking is that they can simply zoom in if they wanted to see bigger images.
On the plus side.. viewing your website on mobile devices tends to find the optimal size anyway so the need to find that exact, optimal size seems to be finally fading away as mobile computing increases.
just my two cents:)
Problem with fixed width is for people with notebooks.. I have not seen the most recent ones, but mine can’t show resolutions at 1440 x 900.