What Screen Resolution We Should Design For?

Posted in Tips, Web Design6 years ago • Written by 20 Comments

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 -

webdesigner

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.

screenshots

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.

template2 template

I used FireFox addon – Measure tool, to measure actual shown width and height for FF browser – it is 1000x660px.

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.

measure

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

192 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

20 Comments Best Comments First
  • ZerroQ

    Saturday, September 20th, 2008 16:37

    1

    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 ;)

    0
  • Jim Gaudet

    Monday, September 22nd, 2008 05:00

    7

    Nice info and I like the plugins.

    0
  • Jim Gaudet

    Monday, September 22nd, 2008 05:00

    8

    Nice info and I like the plugins.

    0
  • MP

    Monday, September 22nd, 2008 17:55

    9

    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.

    0
  • Love Malhotra

    Monday, September 22nd, 2008 07:12

    6

    Nice info. I like It.

    0
  • Dainis Graveris

    Sunday, September 21st, 2008 19:32

    5

    @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!

    0
  • Dainis Graveris

    Saturday, September 20th, 2008 17:23

    2

    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.

    0
  • Max

    Saturday, September 20th, 2008 16:41

    3

    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.

    0
  • Matt

    Sunday, September 21st, 2008 15:38

    4

    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

    0
  • Dainis Graveris

    Monday, September 22nd, 2008 18:32

    10

    @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.

    0
  • Richard Carter

    Monday, September 22nd, 2008 19:25

    11

    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).

    0
    • Bob

      Sunday, July 3rd, 2011 16:16

      20

      Geez, that’s uenblievlabe. Kudos and such.

      0
  • Ruslan

    Sunday, July 5th, 2009 16:07

    18

    thanks this is extremely useful post for newbie in design field like me..

    0
  • Valentin

    Saturday, October 10th, 2009 13:52

    19

    Great post, but isn’t it ironic that I get a horizontal scrollbar on this site (Firefox 3, Ubuntu 8.04, 1024×768)?

    0
  • Yehia

    Friday, June 26th, 2009 17:55

    17

    Thanks, such great tips, I’ll bookmark it.

    0
  • Xeniel

    Friday, March 20th, 2009 15:59

    16

    Link for BrowserShots is wrong. Should be .org instead of .com ;)

    0
  • Quin

    Tuesday, September 23rd, 2008 18:54

    12

    Wow, the measure tool is great!
    thanks friend.

    0
  • Santhos

    Monday, September 29th, 2008 20:01

    13

    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!

    0
  • Kris

    Friday, October 17th, 2008 09:46

    14

    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

    0
  • aldrin

    Saturday, March 14th, 2009 12:55

    15

    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.

    0
  • Valentin

    Saturday, October 10th, 2009 13:52

    19

    Great post, but isn’t it ironic that I get a horizontal scrollbar on this site (Firefox 3, Ubuntu 8.04, 1024×768)?

    0
  • Ruslan

    Sunday, July 5th, 2009 16:07

    18

    thanks this is extremely useful post for newbie in design field like me..

    0
  • Yehia

    Friday, June 26th, 2009 17:55

    17

    Thanks, such great tips, I’ll bookmark it.

    0
  • Xeniel

    Friday, March 20th, 2009 15:59

    16

    Link for BrowserShots is wrong. Should be .org instead of .com ;)

    0
  • aldrin

    Saturday, March 14th, 2009 12:55

    15

    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.

    0
  • Kris

    Friday, October 17th, 2008 09:46

    14

    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

    0
  • Santhos

    Monday, September 29th, 2008 20:01

    13

    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!

    0
  • Quin

    Tuesday, September 23rd, 2008 18:54

    12

    Wow, the measure tool is great!
    thanks friend.

    0
  • Richard Carter

    Monday, September 22nd, 2008 19:25

    11

    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).

    0
    • Bob

      Sunday, July 3rd, 2011 16:16

      20

      Geez, that’s uenblievlabe. Kudos and such.

      0
  • Dainis Graveris

    Monday, September 22nd, 2008 18:32

    10

    @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.

    0
  • MP

    Monday, September 22nd, 2008 17:55

    9

    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.

    0
  • Jim Gaudet

    Monday, September 22nd, 2008 05:00

    8

    Nice info and I like the plugins.

    0
  • Jim Gaudet

    Monday, September 22nd, 2008 05:00

    7

    Nice info and I like the plugins.

    0
  • Love Malhotra

    Monday, September 22nd, 2008 07:12

    6

    Nice info. I like It.

    0
  • Dainis Graveris

    Sunday, September 21st, 2008 19:32

    5

    @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!

    0
  • Matt

    Sunday, September 21st, 2008 15:38

    4

    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

    0
  • Max

    Saturday, September 20th, 2008 16:41

    3

    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.

    0
  • Dainis Graveris

    Saturday, September 20th, 2008 17:23

    2

    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.

    0
  • ZerroQ

    Saturday, September 20th, 2008 16:37

    1

    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 ;)

    0

Comments are closed.

54.196.162.238 - unknown - unknown - US