Which screen resolution is best for your blog?
Yesterday, I wrote about Selecting Blog Design Options and discussing the pros and cons of free/premium/custom themes. Today I will discuss which screen resolution is best for your blog. When you are picking a theme you have to analyze all aspects of it. So therefore this can be considered as a sequel post for selecting a blog design.
Screen Resolution
Screen resolution is a value in pixels that can be displayed on the monitor screen. There are many different sizes of screen resolution. Few are listed below:
- 800 x 600
- 1024 x 768
- 1280 x 800
- 1280 x 1024
- 1440 x 1080
Statistics
According to Wikipedia
Higher than 1024×768 – 38%
1024×768 – 48%
800×600 – 8%
Lower than 800×600 – < 1%
Unknown - 6%
What do I think about these Stats? I personally think that stats can vary from site to site. For example, if you are targetting a web audience you are safe to avoid 800 x 600 resolution. I will go as far as saying that majority of the people are on or above 1024 now a days because of the new computers. But there are still a small proportion that is on 800 x 600.
The Ideal Design
There is none! Because there will be always someone that will be unsatisfied. If you want to maintain the quality of the design than you will have to make some sacrifices to satisfy the MOST.
Majority of the sites that I see now a days are running on a fixed design that ignores 800 x 600 audience.
Yahoo.com – 950px ~
Cnn.com – 1000px ~
Youtube – 880px~
Ebay – 945px~
Amazon.com – 990px ~
These are one of the most visited sites in the world. All rank in top 50 Alexa. Eventhough alot of people don’t believe in alexa but we have to agree that these are some well known websites. Do they not care about their users to miss them out or has the standards upgraded?
Before the standards were to be compatible in screen resolutions of 800 x 600 and 1024 x 768, but now as time progresses and technology advances, we are getting higher screen resolutions and smaller screen resolutions are getting outdated. Therefore I think we need to upgrade.
So what are your options now?
Fixed Width Design
Fixed width design is the one that have fixed width. Duh! I think if you look at the sites that I mentioned above all of them are under 1000px and above 800. As a designer I know that the quality of a design improves significantly when I design in 1000px rather than 800px. 800 limits the space. Therefore these companies have decided to give majority of their audience the BEST, and let few of their audience suffer.
Solutions to make an optimized fixed layout
- Select your width below 1000px if you are targetting the majority (1024×768) users. So they don’t have to scroll horizontally.
- Place Content on the left, so even if 800 x 600 users have to scroll, they will see the content. Interlink your posts, so they can visit other posts without the sidebar.
- Rss Button exposure can be an issue because users won’t scroll horizontally, so they won’t scroll. Therefore you can add your RSS link in your posts. Use your vertical space wisely.
- If you have 3 columns in your layout than put the useful links on the left sidebar.
Just remember your goal is to avoid horizontal scrolling for your users. So if you need to optimize for 800 x 600 than set the width to be below 800 so it fits the dimension in the browser. Because you have to consider the scroll bar taking up the width. Same with 1024. Make it 1000 or below.
Fluid Width Design
Fluid designs, also known as liquid designs, are the one that is compatible with all dimensions. Meaning none of the dimensions will have to scroll horizontally. Sounds like a perfect solution right? But it is NOT!
Downside of the fluid designs are:
- You don’t have control over all dimensions. You can’t put alot of images. It must be CSS for the most part if you want it to look good in all dimensions.
- It doesn’t look good in higher resolution (which is the future) because the text line is too long.
So are they good for anything? Yes they are. They look very good in smaller resolution but now you are entering the next age of technology with higher resolutions. So more people will have higher resolutions and your site won’t look good on those. (well the text won’t)
Now the choice is yours.
Are there any other options? Yes there are and that depends on the creativity of the designer. Because you can have the header to be fluid while the content to be fixed width like Balkhis. (We are working on new look)
What resolution are your sites running on?
What are your opinion about the web resolutions?
Hey, I am Syed Balkhi, The guy who is behind Balkhis Inc. I entered the industry back in 2002 not knowing a single thing. I barely spoke English at that time. In the past six years, my language barrier has been eliminated. Aside from English, now I also speak html, and php. Along with the languages I have also managed to master a few arts. Art of web-designing started when I first entered. Messing around with photoshop, I learned how to create my first web design. Now I founded a web designing firm Uzzz Productions. After running numerous amount of websites in various niche, I have mastered the art of web-development. Now I am compiling a resource of what I already know, and what I am learning on this blog. This resource is to help me if I ever need a guide to look back to, and it is help my fellow webmasters.
I like bigger. the bigger the better.
Bigger loooks alot better. But we are talking about which do you think is the smartest way to go right now.
What are the demographics of your current audience and your target audience?
You currently might have a more savvy audience, but you may want to target other audiences that are less savvy.
1024 X 768 according to wikipedia looks like it would be good.
To be on the safest side, I’ll opt for 1024*168.
And 1000px fixed width seems to be the decent res. as seen from the adoption of this by the top sites too.
yup I use the same resolution
Interesting information. I wouldn’t of thought of writing about this.
I always try to opt for a CSS-based solution that is, as you call it “fluid width”. From what I’ve read, there are some good DPI-type options coming in CSS3 that will help make the text a reasonable readable size no matter the display resolution.
I’ve used a photo gallery web app, Wipha, that has a fixed column width (for picture thumbnails) but chooses the number of columns to display in the grid based on the width of the window, thus requiring only vertical scrolling. I wonder if this would be a reasonable way to handle fluid width with text – set the appropriate maximum readability width (since we know people can’t follow excessively long lines), and then columnize as needed to fill the appropriate % of the total width with the primary text content. The main problem I’d anticipate there would be multiple vertical scrolls requiring to jump from the bottom of one column to the top of the next. You’d also want to avoid breaking sentences across columns/pages, I’d think.
There are still issues with the line-breaking code in many browsers, where if you fail to specify an overflow option your layout will explode when confronted with single tokens that are longer than an entire line (perhaps a long in-text URL, for example).
I hope CSS 3 brings new options for us, but as for now the line separator doesn’t work best, so fixed is the best option.
leaving out everything but your first question, which screen resolution is best? I say the best one is the one the most people can read without it looking completely amateur. I design for 1024×768 as a rule precisely because of the data you cite above.
My most recent project, our client assured us that 1280×800 was the right resolution for them. Knowing their user base, I kept asking if they were certain that was right and they kept saying yes. Of course, after we finished the high-fidelity prototype, they came back and said we needed to scale it back to 1024×768. Pain in the a**. Practically had to redesign the whole thing, especially because they were adamant about certain things fitting on one screen so they could see data at a glance.
–mcb
Yup, it happens. Sometimes client ask for a different resolution. By default I assume 1000px unless specified otherwise. At Uzzz Productions, we make changes when its in the psd version, but once the client finalize it, only minor changes will be made nothing major. Sometimes clients can be a PITA, but they are client…
My eyes are not as good as the used to be. I think I am one of the few that still uses 800×600 res. Although many of my sites are designed for higher resolution.