Responsive design: Should I go bigger than 1024px?

Question

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'?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.