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 have 6 responsive variations for a web app, from 916px to 320px wide. While running some internal tests, 2 out of 6 people mentioned that they would prefer if the app responded to bigger screens too, instead of stopping at 960px. This group is not exactly representative of future users, who will most likely have 1024 or 1280 px resolutions, but I'm afraid I might be applying what I do to what I think most users will do (I have a big screen, but my browser is never maximised).

Should I consider a further responsive step to, say, 1260px? Although most people have those mentioned resolutions, is there any data around what percentage uses the browser in 'fullscreen'?

share|improve this question
2  
Anecdata: My browser windows are typically 1920px wide, because most of the time, I'm looking at data tables. So yes, there is me, and that other guy in Japan who use these resolutions in fullscreen. –  Simon Richter Oct 15 '12 at 7:46
1  
There was a discussion about browser viewport sizes here: ux.stackexchange.com/questions/21422/… –  dhmholley Oct 15 '12 at 7:56
1  
It's not really responsive if the largest screen it will support is an iPad. –  alord1689 Oct 20 '12 at 23:25
add comment

4 Answers 4

up vote 37 down vote accepted

The short answer is: if you already account for 6 different mobile screen resolutions, you should also account for many large screen resolutions - keep things consistent.

The long answer: You're over-complicating this. There're 28 "standard" resolutions and creating a dedicated layout for all of them takes too much precious time. Instead, you should follow what is know as The Goldilocks Approach: 3 screen sizes of "narrow", "regular", and "wide". You can increase it to 4 or 5 if you so desire (and have the resources), but mixing responsive break points with fluid sections (i.e. widths set in percentages) will cover you for nearly any screen. See Microsoft's new website for real-world example (4 break points).

share|improve this answer
    
Can't agree more (with the long answer) –  Nic Oct 15 '12 at 6:49
    
Totally agree with you, good pointers all around! –  AndroidHustle Oct 15 '12 at 9:45
add comment

Let your content dictate your decision, not possible devices.

Will the site be easier/better to use if you created a larger version or will it just be bigger? If the answer is yes, then how much effort is required to do so and what percentage of users will be able to take advantage of it?

Also if you decide to make the additional version, consider that the biggest mistake I see in responsive design is forgetting about vertical resolution. Apple is selling a lot of 11" and 13" MacBook Airs with nice widescreens and very limited real estate vertically. Just because you have extra width don't assume I want a really wide and tall hero image pushing tons of important content way off the screen.

share|improve this answer
    
Completely agree. This app wouldn't particularly benefit from going bigger in the majority of scenarios. However, I'd say 30% of it would. Vertical resolution seems to be ok for now. Thanks! –  Yisela Oct 15 '12 at 19:36
add comment

I agree with the "accepted" answer, but it doesn't exactly reply to the question in mention: "should I go bigger than 1024px?".

Let's say we cannot afford to do a responsive/fluid design on every page. Let's be honest, not even Microsoft could afford this. Apparently, as soon as you leave their home page, it goes back to a 960px. It is understandable. As web designers, we sometimes are forced to get the job done as soon as possible.

So, should we go bigger than 1024px? I think it is about time we do.

For the past 4 years, my company has been creating 960px websites and ecommerces in order to fit this paradigm of the minimum resolution. However, times have changed. I believe 1024px wide resolutions are almost dead.

I was doing a little bit of research by reading the analytics of a ecommerce site that receives a decent amount of traffic (500,000 visits), from everywhere in the world, and only less than 5% of desktop users had a resolution of 1024px or less. And I would imagine the likelihood of these users converting is closely related to the amount of money that they would spend on a monitor.

Since a few months ago, my team and I decided to upgrade, and leave behind the myth. Now for us, a reasonable minimum resolution is 1280x768. Our designs now have either 1060px or 1180px width and they give us much more room and flexibility to be more creative. More room gives more breath to the message that we try to communicate, and somehow also to the user to have a better experience.

I know what you must be thinking: ..and what about the iPad? OK, iPad support is important in life and in general. A quick solution for us is the following markup that will make your website fit to the iPad screen resolution. It is pretty awesome!

<meta name="viewport" content="width=1180">

This is all based solely on my opinion. I would actually like to know what other people think.

share|improve this answer
1  
Excellent answer. I added a new responsive step and it actually makes quite a difference. The minimum resolution is not a problem if you have an adaptive design, and for the maximum... well, 960 is definitely getting too small. The one I added will probably be around 1200px (I now have to choose the exact size). –  Yisela Oct 15 '12 at 22:19
add comment

I'd make sure not to fill the extra width by increasing text line lengths, which would introduce readability problems.

Artfully filling a wide range of widths, a la Smashing Magazine, is difficult and resource consuming, so successfully doing so depends on the content and the resources you can throw at the problem. I wouldn't force the issue.

share|improve this answer
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.