6

Maybe this is a stupid question but I wonder if it changed.

Websites used to be 960px wide so all screen resolution could easily see all the content.

But with the new 'responsive-design' and html5 this isn't really nessesary, because people use responsive design for showing on mobile phones and tablets.

So my question:

What's the best width for a responsive-design on desktop?

2
  • 3
    Available screen estate is not the best measure for content width. Readable line-length is. And by readable line-length, I mean the length of a line that readers can still comfortably keep their position in the line and in the paragraph. You won't see any newspapers with paragraphs spanning the entire width of the page... Jul 28, 2013 at 8:28
  • 4
    "What's the best width for a responsive-design on desktop?" = the preferred width of the end-user.
    – DA01
    Jul 29, 2013 at 2:27

8 Answers 8

6

Ultimately, the optimum width and breakpoints for a website depends on the content that it displays.

That said, the great part about responsive design is that you can cater towards not only smaller screens, but larger displays as well. You can use a 960 breakpoint, but you can also use 1200, 1400, etc.

2
  • 1
    ah yeah, the most responsive sites I come across are around 1100px wide. so I will stick with that. I wasn't sure about it. Thanks :) Jul 27, 2013 at 20:19
  • This is a somewhat good answer, the main thing I miss (not just in this one but all the answers) is nobody talks about readable line length. Which is the main reason to keep a certain width to elements.
    – MJB
    Apr 20, 2021 at 8:09
3

The whole point of responsive design is that you don't start to design from the width of your page.

The idea of responsive design is that you start design from the components up. Think about what content you want to display, and then design a scaling system. Something that expands and shrinks along with the width of the screen.

Responsive sites do not have an inherent width. Very simple responsive designs may have breakpoints. These are essentially a mobile, tablet and desktop site rolled into one. But that's only the simplest level. More ambitious responsive design is defined in terms of the window size, scaling its text size smoothly, but also using breakpoints to decide when certain superfluous elements should disappear or move inline.

It's all about designing systems instead of pages.

1

Granted screen resolutions and the like have probably moved on since this question was asked but here's what I currently understand:

Most desktop screens are full HD (1920px x 1080px) with 4k becoming more common (3840px × 2160px), laptops are usually 768 x 1366px (some have HD screens, and then there is the macbook pro). On top of that there are a wide range of mobile devices with varing screen resolutions (and some with quite high resolution that display as a lower resolution).

Based on that information, if you are happy having multiple columns, I would look to have a "wide" design of approximately 1900px (if most of your users are using desktops). If on the other hand you are looking at standard 2 or 3 column layout I would consider setting a max width (~ 1680px seems common, but this would depend on your content). Obviously it will need to deform nicely for smaller screens.

As always if you can get the screen resolution of your users, it would be best to design your site to look great on the more common resolutions, and deform nicely for the rest.

1
  • 1
    Why the downvote? If there is something wrong with with my answer, that's fine but please leave a comment so I can improve my knowledge Jul 30, 2015 at 2:46
0

According to my knowledge, the responsive designed websites generally don't need any specific width/resloution, since the websites adjust properly automatically on tablets/phones and on desktop as well.

0

960px is a good base width because tablet viewers (in landscape) can still see the whole site as you designed it.

You just have to plan. Yes, a responsive website is based on percentages, but if you set your sidebar to, say, 25% of the page width, then it will be super narrow on a phone or smaller tablet.

Best to set fixed pixel widths for sidebars, then clear their float on screen sizes smaller than 600px or so.

Then test it, test it, test it. Look at every single page. It's tedious, but you'll be so surprised at that thing you thought would jus work on a mobile-sized screen looks terrible.

0

WHOA WHOA WHOA?!? 1100px is not the answer!!!

Responsive means that it responds to a screen up to commercial maximum. 1100px is not the commercial maximum. You might want to reread some of the information that people took the time to give you. A responsive website will be designed for any width of any device.. This is why it frustrates me that people got the terminology all butchered forcing 'fluid' to be a terminology.

2
  • 2
    The question is "What is the best resolution" not "what isn't". Can you amend your answer so you're addressing the question itself?
    – JonW
    Apr 17, 2014 at 14:45
  • I did answer the question. 'A responsive website will be designed for any width of any device' May 7, 2014 at 19:24
0

I think the point here is that if your not doing a FULL width site, then what should your CONTENT container width be. In my eyes 1100px is a good width for something of a boxed design, and then you can make it responsive to adjust to all the smaller resolutions.

The most popular screen resolution now is a laptop screen of 1440 wide and, from W3 Schools website, 99% of people have a screen resolution of 1024x768 now. So if you do a responsive query around 1024 then 960 then 800 then 480 you should cover pretty much all your bounds, maybe add a couple break points in-between if you need to bridge a gap with a logo or text or something.

2
  • 1
    Please provide sources to substantiate your information. A quick Google search seems to contradict your resolution assertions, with 1440x900 at less than 6%. What are your statistic sources and what is the rationale for selection the quoted break points, beyond personal preference? Aug 15, 2014 at 0:57
  • W3Schools information is based on visitors to W3Schools, who are generally web developers, and nothing else so this information should not be used to represent the general public.
    – Rob
    Jun 5, 2015 at 11:45
0

The comment by Marjan Venema on the original question is the most correct. If making your page wider means that your text/content is going to be too wide (like Wikipedia), then you should cap it at that width. You can still have other parts of the page, such as backgrounds/header/footer go full-width, but sites that stretch out the text so it's difficult to read are highly annoying. I always have to resize a Wikipedia window for that reason.

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