Advertisment
I always struggled at first when I needed to decide, which resolution to design for. So first thing We would need to ask ourselves is – who we will design for, what’s really our audience? That’s not important only to which resolution create our document, but how big our fonts must be and which browsers we must support. Now the vast majority uses computers with 1024×768 px resolution. But that doesn’t mean, that You should create design in 1024×768 resolution too and You got all that space available to use.
Width is important to get rid of browser side scrollbar, which would be seen if You create Your design too wide and as to the height there is no limitations, but You must create design so the most important things You want to display would be seen for example – buttons, some hot links, maybe ads. If I analyze my web page it’s not so well thought-out actually, but I hope to create new design in my spare time real soon.
Okay, so the question remains and that’s why I want to share with You with this great resource -
This resource is so great because there are nice collection of different popular browser screenshots 1024 x 768 px and 800 x 600 px resolutions and in different versions.
And also they also offer not only screenshots but also browser templates as *.psd files with the same 2 different resolution screenshots, 60px vertical grid to help You create column. Also You can switch on/off scrollbar, favicon, type in page title, to give You an overview how Your design will look in selected browser and also to help You show the most important things when user loads the page.
I used FireFox addon – Measure tool, to measure actual shown width and height for FF browser – it is 1000×660px.
You can get Measure tool addon here and also handy comes Firesizer 0.65 addon too, to easily check how Your page is displayed in different resolutions.
That’s one method, but I suggest You to use 955×600 document size, because a lot of articles and comments I read through suggested to use 950-960 width size or just use liquid layouts, that stretches to the current user’s window size and avoid to use fixed layouts that are always in the same size. And for a height I checked with measure tool different browser templates and every browser window seems to fit in 600px height.
If You are interested to check how for example apple.com, windows.com, mtv.com, resize Your window to 1024×768 resolution and test different pages and with measure tool You will see, how much width and size they use . It’s good to check this kind of popular sites, because they spend many thousands to test and optimize their pages.
I hope this short article will help people, who just start to create fresh designs and struggle thinking what resolution they should design for and what width and height they should choose creating new document.
I will appreciate to see Your opinion about this question!
*edited
Also fellow from Squangles.com just gave me great site, where You can check browser compatibility, cross platform browser test. You can get screenshots how Your site would look almost in every browser.
Here is the site : Browsershots
Thank You Dainis! Really useful article.
Keep it up!
wow Great article, thanks!
wow thanks so much.
Great post, but isn’t it ironic that I get a horizontal scrollbar on this site (Firefox 3, Ubuntu 8.04, 1024×768)?
While designing a website, designer most know these basic screen size. It may helps to fresh designers. Thanks a lot for sharing this resources.
I’ll be getting a new computer soon so I needed to read this. Thanks.
Deborah´s last blog ..Video Game Testing Jobs | Beta Game Testing
I feel this is good article for fresh designer they will consider these points before start designing websites, nice post
Great plug ins and a very useful post. Thank you very much.
Yes, some great info here, but your grammar is aweful. It’s one thing having a webpage that fits neatly into the user’s scomputer screen but it’s another presenting such terrible English. Surely, content is more important than stupid issues as whether the user mihgt need to scroll to see all of the page. My advice to web designers is to focus more on content than less important issues like these.
thanks this is extremely useful post for newbie in design field like me..
Rusli zainal´s last blog ..Kontroversi SEO Kontes
Thanks, such great tips, I’ll bookmark it
Stop Dreaming Start actions last blog post : Follow Your Dream
Super-Duper site! I am loving it!! Will come back again – taking you feeds also, Thanks.
I dont know Firefox having such cool addon, thanks for sharing this great tool
Great information here, you certainly did your homework.
this is great advice for the newbie like me
Sulumits Retsambews last blog post : Ten Thousand Thundering Sulumits Retsambew!
most of the time i use 1024×768 resolution..
Sulumits Retsambews last blog post : Sulumits Retsambew remind me of Canada
Link for BrowserShots is wrong. Should be .org instead of .com ;)
for most of my design, i used 1000x 800 for may design and after that by following the 960 grid system i align a ruler on between 40px and 960px to make and that is my basis for content for the sites.
[...] reading Best Screen Resolution To Use in Designing here. Read [...]
Are people using a 800×600 resolution not used to scrolling anyway with most things?
I think we should move to 1024×768 in most things by now…
Imagine the poor dude that has one of the super high resolution monitors viewing a page designed for 800 x 600 :-O
I always design with a maximum width about 1000 pixels… can be less, depends a bit on the design itself…
Nice addons by the way!
Wow, the measure tool is great!
thanks friend.
I usually design for a min. of 1024×768. To be on the safe side, this means a max width for the design of around 975px to me (especially good for designs with background patterns, as this width allows a little of the bg image to show).
@Jim Gaudet, Love Malhotra thanks, appreciated!
@MP that’s for sure – I meant this in most cases, I really agree that You must look to Your auditory and then choose the resolution design for. It’s kind of my point too, but looks like I didn’t create so clear point.
Keep in mind all the laptops in use and mobile devices, The majority of people I know use compact laptops with low screen res. I really think the type/content of the website/blog you are designing dictates the resolution that you should consider using. For instance a website that revolves around old time recipes should likely have a lower resolution as opposed to a web designing blog.
Nice info. I like It.
Nice info and I like the plugins.
~ Jim
Jim Gaudets last blog post : PLEASE!!! Stop Re-Shouting Me
Nice info and I like the plugins.
@Matt Thanks! Tried to do my best!
Yes, but for blogs I will not design for resolution lower than 1024 – I just look over my statistics and I don’t see sense to design for lower resolution. But of course every time we must look for audience, the page will have. Yeah, and it’s just like with IE. But as for me – if I don’t use liquid layouts, I create layout in 960 width because it not really means I don’t support my design for 800×600. It’s just not so well usable for that resolution. Thanks for Your opinion, Matt!
Great information here, you certainly did your homework.
I think it is definitely important to design for lower resolutions, like 1024, but still have the site accessible/readable in 800. It is kind of like how we still support IE6 in our styles, but we aren’t encouraging people to use it by adding IE specific enhancements…or at least I hope not. These are key if we are going to raise awareness and evolve into the future of design.
Very nice post
Zerroq yeah, this took me an interest because I thought about this a lot. And yes, as the most people of my visitors use FF or IE I design my blog to 1000px width too.
@Max It’s interesting because I looked in Google Analytics at my visitor screen resolutions and only 1.16% of all users used 800×600.
I always design for 800 x 600 , i know alot of people still using a 15″ monitor at that resolution, alot of people opt for the grid system 960 cause its highly flexible. im starting to play around with these premade grid systems alot more now.
Max | Design Shards last blog post : Poll: Cast your vote : What interests you most in design?
Damn you managed to kick more than one rabbit with a single shot. Have to admit, never thought bout this, did always use the default size like 1000×660 px. Neat thank you ;)