Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Screen Resolution Design Sizes

Featured Replies

Hey, I was looking around and there isn't really any fixed sizes screen resolution to go with if you're creating a website design (one thats viewable well on all resolutions) so I wanted to know what size all of you guys & gals use?

It really depends on what the majority of your visitors use. I've stopped fully supporting 800x600 as less than 1% of my visitors are using that resolution.

 

Making sure your website looks great in 1024x768 is a good basis to go by nowadays. Obviously if your website is going to be used on smaller devices (phones) then you'll need to bare that in mind.

I stopped supporting 800*600 a couple of months ago, so design for 1024*768 these days. But of cause when designing remember the scrollbars so design the site smaller than 1024 wide :)

I've all but ditched 800x600 now - stats suggest about 1% usage and that's low enough for me. However depending on the audience I do sometimes use an elastic layout so it condenses to fit an 800x600 window.

Just wondering, since a few of you have stats generators for your sites, what are the percentages for the other resolutions? What is the most popular resolution that people use when they visit your site(s)?

 

When visiting several large computer stores it appears 1280 x 1024 is the resolution of most of the 4:3 ratio monitors that are sold nowadays.

 

What percentage have widescreen? Seems they are becoming almost mainstream over and above 4:3 format.

 

Thanks

1024 with is definitely the best width to aim for nowadays. FYI, the BBC's new homepage is set for 1024 screens.

 

I usually design content at around the 900-950 mark

All of my previous sites have been designed for 800x600 (approximate container width = 760px) but I'm no longer going to support this with future projects. I made this decision last week! :yahoo:

 

I use 1024x768 on my laptop, and that's pretty much the standard I've seen around almost everywhere, except for my Mom's laptop which is set at 800x600. Obviously people use better resolutions but you don't necessarily want to optimize for huge screens.

  • Author

Wow, thanks for all the responses, and the topic name change, So I came to the conclusion that if i designing a background for a site the original width should be 1024 and height 768?

Make sure you take into account the browser window, and the possibility of tabs!

 

I allow for a maximum of 980*680 in most of my designs, unless the client shouts otherwise.

Here's a snapshot from one of my sites

 

1. 1024x768 23.85%

2. 1280x1024 21.79%

3. 1280x800 15.90%

4. 1440x900 10.26%

5. 1680x1050 10.00%

6. 1920x1200 4.36%

7. 800x600 3.59%

8. 1152x864 2.82%

9. 1600x1200 2.05%

10. 1280x768 1.79%

 

Probably lots of very big monitors in use there!

Here are the stats from one of the sites I run.

01. 1280x800 34.69%

02. 1024x768 21.64%

03. 1280x1024 17.59%

04. 1440x900 8.56%

05. 1680x1050 6.55%

06. 1400x1050 2.89%

07. 1152x864 2.02%

08. 1920x1200 1.46%

09. 1600x1200 1.06%

10. 1280x854 0.71%

Clearly those stats tell everyone there's no need to make designs work on 800*600 anymore, hurray !

I forgot to mention, my stats are based on the visits to this website from october until now. The site averages 30.000 visits from about 10.000 visitors per month.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.