Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm just starting to learn web design and ux and I have a very simple question. What is the best resolution to design for?

For example, I want to design a WP Plugin settings page, what resolution should it be? What resolution should I use for the buttons?

share|improve this question
1  
When you ask for the best resolution, are you asking about the typical size of a user's screen or the sizes that you should be using for the different components on your page? –  mgpugne Aug 2 '13 at 19:42
    
Both. Say I'm creating a new document in Photoshop and it asks me what the resolution of the image should be. What is the best one? The most perfect for designing a web page? I'm also asking about the resolution of a button. How to make it look perfect on both retina and non-retina devices? –  user2448984 Aug 2 '13 at 19:52
    
You might also ask over at GraphicDesign.SE. –  plainclothes Aug 6 '13 at 16:41
add comment

6 Answers

With the rapid growth of mobile devices over the past five plus years, you can no longer design an interface targeting a specific resolution.

It was during the process of resolution fragmentation that mobile first design became popular.

The concept with mobile first is that your design (starting with the information architecture all the way through wire-frames and eventually prototypes) should start with the smallest screen size. This is where you have to make the hardest design decisions when it comes to organizing your content and presenting the user with an intuitive interface.

From there you can increase your resolution and add the "nice-to-haves" to the core of "must-haves".

If you are just getting started, I would recommend you read the following to give you a jumping off point:

share|improve this answer
add comment

The best resolution to design for is what your target market uses.

That may mean multiple sizes. For web design, check our Responsive Web Design (RWD).

Mobile First Design is a popular trend as well, meaning you start by designing for mobile first and then worry about other contexts.

Also, you should be wireframing first (most of the time).

share|improve this answer
add comment

I just want to give you a hint concerning nowadays user requirements and needs due to multiple devices. the hint is not really new but maybe it will help you: "responsive design". -> short introduction including mobile first approach: http://www.youtube.com/watch?v=SJK_fRfOuLc -> i'm not really into WP but as far as i know responsive design is also the most important "feature" introduced to WP within last 2 years. -> e.g. http://wordpress.org/themes/responsive and yes.. it's not any more about one single "resolution" ... thats why many designers re-think their photoshop use instead of using html(5) prototyping (but that's another discussion)

share|improve this answer
add comment

Photoshop's "resolution" is different from a computer's resolution. In Photoshop, resolution is in pixels per inches while a computer's resolution is the dimensions of a screen which is pixels by pixels.

For website, the resolution in Photoshop should be 72 pixels/ inch

Source: Photoshop Tutorial - 3 - How to Create a New Document (Youtube tutorial video)

share|improve this answer
    
For a web site, PS's resolution setting is irrelevant. The resolution is merely for sending the images to a printer. On screen, all that matters is the pixel dimensions of the image. Using 72dpi is certainly a fine and typical setting, but note that it really has no bearing on the images when displayed on screen. –  DA01 Aug 6 '13 at 15:13
add comment

It sounds like you're asking "Which PPI value do I use in PhotoShop when creating images for the web".

The answer is: It doesn't matter.

Image resolution in PhotoShop only affects printing the image. It has no affect on the image when displayed in a web browser. All that matters is the pixel dimensions of your image. If your image is 100px x 100px, regardless if you set it at 72ppi or 300ppi, it will look exactly the same on screen.

Most people use 72ppi which is a fine, acceptable default, but it really has no bearing at all on the final output.

The only other time that resolution will likely come in to play is if you need to support high ppi devices--at which point you'd need to create an image with double-the-size dimensions.

So if you want a high resolution image for a Retina iPhone, you'd need to create a 200px x 200px version of your earlier image.

share|improve this answer
add comment

Well, the first thing to do is start with your biggest screen and work your way down. Also you'll probably have to do two designs, one for full width browsers and one for mobile. Now they maybe exactly the same, but it's great to plan for wide and narrow.

As far as what resolution, W3Schools, has a browser resolution statistics page. It shows that about 9% of the people as of January 2013 were using 1024 x 768. This means you should probably still look at designing something along the 960 grid for fixed width or decided if you want your design to be fluid.

share|improve this answer
4  
W3Schools isn't the most reliable of sources for this. Firstly, it's just stats from people visiting that site, (so it's a selective audience) secondly, well it's from W3Schools; not the best source of reliable material. A better source is gs.statcounter as that takes data from a far wider pool. –  JonW Aug 2 '13 at 21:07
    
Good information. I've added the resources to my knowledge base. Thanks. –  lonehorseend Aug 2 '13 at 23:13
1  
1  
Today, most would argue that you should start with mobile (AKA "Mobile First"), and many would suggest NOT making two designs, but rather go a responsive route. –  DA01 Aug 6 '13 at 16:02
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.